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

@@ -382,12 +382,17 @@ 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];
 
+      const target = transformSupportedBrowsersToTargets(browsers);
+      if (!isZonelessApp(polyfills)) {
+        // Rolldown doesn't have an option to support Zone.js/async-await, so we need to support es2016.
+        target.push('es2016');
+      }
+
       let ssrMode: ServerSsrMode = ServerSsrMode.NoSsr;
       if (
         browserOptions.outputMode &&
@@ -416,7 +421,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

@@ -96,7 +96,6 @@ function createSsrConfig(
   externalMetadata: DevServerExternalResultMetadata,
   serverOptions: NormalizedDevServerOptions,
   prebundleTransformer: JavaScriptTransformer,
-  zoneless: boolean,
   target: string[],
   prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
   thirdPartySourcemaps: boolean,
@@ -116,7 +115,6 @@ function createSsrConfig(
       include: externalMetadata.implicitServer,
       ssr: true,
       prebundleTransformer,
-      zoneless,
       target,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
@@ -134,7 +132,6 @@ export async function setupServer(
   ssrMode: ServerSsrMode,
   prebundleTransformer: JavaScriptTransformer,
   target: string[],
-  zoneless: boolean,
   componentStyles: Map<string, ComponentStyleRecord>,
   templateUpdates: Map<string, string>,
   prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
@@ -206,7 +203,6 @@ export async function setupServer(
             externalMetadata,
             serverOptions,
             prebundleTransformer,
-            zoneless,
             target,
             prebundleLoaderExtensions,
             thirdPartySourcemaps,
@@ -245,7 +241,6 @@ export async function setupServer(
       ssr: false,
       prebundleTransformer,
       target,
-      zoneless,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
       define,

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

@@ -12,7 +12,6 @@ import { extname } from 'node:path';
 import type { DepOptimizationConfig } from 'vite';
 import type { ExternalResultMetadata } from '../esbuild/bundler-execution-result';
 import { JavaScriptTransformer } from '../esbuild/javascript-transformer';
-import { getFeatureSupport } from '../esbuild/utils';
 
 export type AngularMemoryOutputFiles = Map<
   string,
@@ -41,10 +40,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
@@ -55,7 +50,6 @@ export function getDepOptimizationConfig({
   exclude,
   include,
   target,
-  zoneless,
   prebundleTransformer,
   ssr,
   loader,
@@ -68,48 +62,53 @@ 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) {
-        build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-          return {
-            contents: await prebundleTransformer.transformFile(args.path),
-            loader: 'js',
-          };
-        });
-      },
-    },
-  ];
-
-  return {
+  const config: DepOptimizationConfig & {
+    rolldownOptions?: Record<string, unknown>;
+  } = {
     // 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' : ''
+          }`,
+          async load(id: string) {
+            if (/\.[cm]?js$/.test(id)) {
+              return {
+                code: await prebundleTransformer.transformFile(id),
+                map: null,
+              };
+            }
+
+            return null;
+          },
+        },
+      ],
+      moduleTypes: loader as Record<string, string> | undefined,
+      resolve: {
+        extensions: ['.mjs', '.js', '.cjs'],
       },
-      resolveExtensions: ['.mjs', '.js', '.cjs'],
     },
   };
+
+  return config;
 }
 
 export interface DevServerExternalResultMetadata {