refactor(@angular/build): migrate to optimizeDeps.rolldownOptions in Vite config

Vite now uses Rolldown as the underlying engine to optimize dependencies, rendering `optimizeDeps.esbuildOptions` deprecated.

This commit refactors the Vite dev-server config in `@angular/build` to use `optimizeDeps.rolldownOptions` instead.
It also updates the custom dependency optimization plugin from the esbuild-specific format to a native Rolldown plugin using the `load` hook, and aligns browser target lowering by pushing `es2016` when Zone.js is present (since Rolldown lacks esbuild-style feature-support flags).

Author: alan-agius4

packages/angular/build/src/builders/dev-server/vite/index.ts

@@ -384,12 +384,19 @@ export async function* serveWithVite(
       const projectRoot = join(context.workspaceRoot, root as string);
       const browsers = getSupportedBrowsers(projectRoot, context.logger);
 
-      const target = transformSupportedBrowsersToTargets(browsers);
       // Needed for browser-esbuild as polyfills can be a string.
       const polyfills = Array.isArray((browserOptions.polyfills ??= []))
         ? browserOptions.polyfills
         : [browserOptions.polyfills];
 
+      let target: string[];
+      if (isZonelessApp(polyfills)) {
+        target = transformSupportedBrowsersToTargets(browsers);
+      } else {
+        // Rolldown doesn't have an option to support Zone.js/async-await, so we need to support es2016.
+        target = ['es2016'];
+      }
+
       let ssrMode: ServerSsrMode = ServerSsrMode.NoSsr;
       if (
         browserOptions.outputMode &&
@@ -418,7 +425,6 @@ export async function* serveWithVite(
         ssrMode,
         prebundleTransformer,
         target,
-        isZonelessApp(polyfills),
         componentStyles,
         templateUpdates,
         browserOptions.loader as EsbuildLoaderOption | undefined,

packages/angular/build/src/builders/dev-server/vite/server.ts

@@ -98,7 +98,6 @@ function createSsrConfig(
   externalMetadata: DevServerExternalResultMetadata,
   serverOptions: NormalizedDevServerOptions,
   prebundleTransformer: JavaScriptTransformer,
-  zoneless: boolean,
   target: string[],
   prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
   thirdPartySourcemaps: boolean,
@@ -118,7 +117,6 @@ function createSsrConfig(
       include: externalMetadata.implicitServer,
       ssr: true,
       prebundleTransformer,
-      zoneless,
       target,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
@@ -136,7 +134,6 @@ export async function setupServer(
   ssrMode: ServerSsrMode,
   prebundleTransformer: JavaScriptTransformer,
   target: string[],
-  zoneless: boolean,
   componentStyles: Map<string, ComponentStyleRecord>,
   templateUpdates: Map<string, string>,
   prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
@@ -208,7 +205,6 @@ export async function setupServer(
             externalMetadata,
             serverOptions,
             prebundleTransformer,
-            zoneless,
             target,
             prebundleLoaderExtensions,
             thirdPartySourcemaps,
@@ -247,7 +243,6 @@ export async function setupServer(
       ssr: false,
       prebundleTransformer,
       target,
-      zoneless,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
       define,

packages/angular/build/src/tools/vite/utils.ts

@@ -15,7 +15,6 @@ import type { DepOptimizationConfig } from 'vite' with {
 };
 import type { ExternalResultMetadata } from '../esbuild/bundler-execution-result';
 import { JavaScriptTransformer } from '../esbuild/javascript-transformer';
-import { getFeatureSupport } from '../esbuild/utils';
 
 export type AngularMemoryOutputFiles = Map<
   string,
@@ -44,10 +43,6 @@ export function lookupMimeTypeFromRequest(url: string): string | undefined {
   return extension && lookupMimeType(extension);
 }
 
-type ViteEsBuildPlugin = NonNullable<
-  NonNullable<DepOptimizationConfig['esbuildOptions']>['plugins']
->[0];
-
 export type EsbuildLoaderOption = Exclude<
   DepOptimizationConfig['esbuildOptions'],
   undefined
@@ -58,7 +53,6 @@ export function getDepOptimizationConfig({
   exclude,
   include,
   target,
-  zoneless,
   prebundleTransformer,
   ssr,
   loader,
@@ -71,48 +65,56 @@ export function getDepOptimizationConfig({
   target: string[];
   prebundleTransformer: JavaScriptTransformer;
   ssr: boolean;
-  zoneless: boolean;
   loader?: EsbuildLoaderOption;
   thirdPartySourcemaps: boolean;
   define: Record<string, string> | undefined;
 }): DepOptimizationConfig {
-  const plugins: ViteEsBuildPlugin[] = [
-    {
-      name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${
-        thirdPartySourcemaps ? '-vendor-sourcemap' : ''
-      }`,
-      setup(build: PluginBuild) {
-        build.onLoad({ filter: /\.[cm]?js$/ }, async (args: OnLoadArgs) => {
-          return {
-            contents: await prebundleTransformer.transformFile(args.path),
-            loader: 'js',
-          };
-        });
-      },
-    },
-  ];
-
-  return {
+  const config: DepOptimizationConfig = {
     // Exclude any explicitly defined dependencies (currently build defined externals)
     exclude,
     // NB: to disable the deps optimizer, set optimizeDeps.noDiscovery to true and optimizeDeps.include as undefined.
     // Include all implict dependencies from the external packages internal option
     include: disabled ? undefined : include,
     noDiscovery: disabled,
-    // Add an esbuild plugin to run the Angular linker on dependencies
-    esbuildOptions: {
-      // Set esbuild supported targets.
-      target,
-      supported: getFeatureSupport(zoneless),
-      plugins,
-      loader,
-      define: {
-        ...define,
-        'ngServerMode': `${ssr}`,
+    rolldownOptions: {
+      transform: {
+        // Set target.
+        target,
+        define: {
+          ...define,
+          'ngServerMode': `${ssr}`,
+        },
+      },
+      plugins: [
+        {
+          name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${
+            thirdPartySourcemaps ? '-vendor-sourcemap' : ''
+          }`,
+          transform: {
+            filter: { id: /\.[cm]?js$/ },
+            async handler(code: string, id: string) {
+              const result = await prebundleTransformer.transformData(
+                id,
+                code,
+                /** skipLinker */ false,
+              );
+
+              return {
+                code: Buffer.from(result).toString('utf-8'),
+                map: null,
+              };
+            },
+          },
+        },
+      ],
+      moduleTypes: loader,
+      resolve: {
+        extensions: ['.mjs', '.js', '.cjs'],
       },
-      resolveExtensions: ['.mjs', '.js', '.cjs'],
     },
   };
+
+  return config;
 }
 
 export interface DevServerExternalResultMetadata {