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

@@ -15,7 +15,7 @@ import type * as Vite from 'vite' with {
 };
 import type { ComponentStyleRecord } from '../../../tools/vite/middlewares';
 import { ServerSsrMode } from '../../../tools/vite/plugins';
-import { EsbuildLoaderOption, updateExternalMetadata } from '../../../tools/vite/utils';
+import { updateExternalMetadata } from '../../../tools/vite/utils';
 import { normalizeSourceMaps } from '../../../utils';
 import { useComponentStyleHmr, useComponentTemplateHmr } from '../../../utils/environment-options';
 import { Result, ResultKind } from '../../application/results';
@@ -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 &&
@@ -408,6 +415,16 @@ export async function* serveWithVite(
         });
       }
 
+      // Copy the loader and modify the file extension to be asset
+      const loader = browserOptions.loader;
+      if (loader) {
+        for (const [key, value] of Object.entries(loader)) {
+          if (value === 'file') {
+            loader[key] = 'asset';
+          }
+        }
+      }
+
       // Setup server and start listening
       const serverConfiguration = await setupServer(
         serverOptions,
@@ -418,12 +435,12 @@ export async function* serveWithVite(
         ssrMode,
         prebundleTransformer,
         target,
-        isZonelessApp(polyfills),
         componentStyles,
         templateUpdates,
-        browserOptions.loader as EsbuildLoaderOption | undefined,
+        loader,
         {
           ...browserOptions.define,
+          'ngServerMode': 'false',
           'ngJitMode': browserOptions.aot ? 'false' : 'true',
           'ngHmrMode': browserOptions.templateUpdates ? 'true' : 'false',
         },

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

@@ -20,7 +20,7 @@ import {
   createAngularSsrTransformPlugin,
   createRemoveIdPrefixPlugin,
 } from '../../../tools/vite/plugins';
-import { EsbuildLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
+import { RolldownLoaderOption, getDepOptimizationConfig } from '../../../tools/vite/utils';
 import { loadProxyConfiguration } from '../../../utils';
 import { type ApplicationBuilderInternalOptions, JavaScriptTransformer } from '../internal';
 import type { NormalizedDevServerOptions } from '../options';
@@ -82,13 +82,16 @@ async function createServerConfig(
     },
   };
 
-  if (serverOptions.ssl) {
-    if (serverOptions.sslCert && serverOptions.sslKey) {
-      server.https = {
-        cert: await readFile(serverOptions.sslCert),
-        key: await readFile(serverOptions.sslKey),
-      };
-    }
+  if (serverOptions.ssl && serverOptions.sslCert && serverOptions.sslKey) {
+    const [cert, key] = await Promise.all([
+      readFile(serverOptions.sslCert),
+      readFile(serverOptions.sslKey),
+    ]);
+
+    server.https = {
+      cert,
+      key,
+    };
   }
 
   return server;
@@ -98,9 +101,8 @@ function createSsrConfig(
   externalMetadata: DevServerExternalResultMetadata,
   serverOptions: NormalizedDevServerOptions,
   prebundleTransformer: JavaScriptTransformer,
-  zoneless: boolean,
   target: string[],
-  prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
+  prebundleLoaderExtensions: RolldownLoaderOption | undefined,
   thirdPartySourcemaps: boolean,
   define: ApplicationBuilderInternalOptions['define'],
 ): Vite.SSROptions {
@@ -116,13 +118,14 @@ function createSsrConfig(
       exclude: externalMetadata.explicitServer,
       // Include all implict dependencies from the external packages internal option
       include: externalMetadata.implicitServer,
-      ssr: true,
       prebundleTransformer,
-      zoneless,
       target,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
-      define,
+      define: {
+        ...define,
+        'ngServerMode': 'true',
+      },
     }),
   };
 }
@@ -136,10 +139,9 @@ export async function setupServer(
   ssrMode: ServerSsrMode,
   prebundleTransformer: JavaScriptTransformer,
   target: string[],
-  zoneless: boolean,
   componentStyles: Map<string, ComponentStyleRecord>,
   templateUpdates: Map<string, string>,
-  prebundleLoaderExtensions: EsbuildLoaderOption | undefined,
+  prebundleLoaderExtensions: RolldownLoaderOption | undefined,
   define: ApplicationBuilderInternalOptions['define'],
   extensionMiddleware?: Vite.Connect.NextHandleFunction[],
   indexHtmlTransformer?: (content: string) => Promise<string>,
@@ -182,7 +184,7 @@ export async function setupServer(
     assetsInclude:
       prebundleLoaderExtensions &&
       Object.entries(prebundleLoaderExtensions)
-        .filter(([, value]) => value === 'file')
+        .filter(([, value]) => value === 'asset')
         // Create a file extension glob for each key
         .map(([key]) => '*' + key),
     // Vite will normalize the `base` option by adding a leading slash.
@@ -208,7 +210,6 @@ export async function setupServer(
             externalMetadata,
             serverOptions,
             prebundleTransformer,
-            zoneless,
             target,
             prebundleLoaderExtensions,
             thirdPartySourcemaps,
@@ -244,10 +245,8 @@ export async function setupServer(
       exclude: externalMetadata.explicitBrowser,
       // Include all implict dependencies from the external packages internal option
       include: externalMetadata.implicitBrowser,
-      ssr: false,
       prebundleTransformer,
       target,
-      zoneless,
       loader: prebundleLoaderExtensions,
       thirdPartySourcemaps,
       define,

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

@@ -9,7 +9,6 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildOptions, Metafile, OutputFile, formatMessages } from 'esbuild';
 import { Listr } from 'listr2';
-import { createHash } from 'node:crypto';
 import { basename, join } from 'node:path';
 import { pathToFileURL } from 'node:url';
 import { brotliCompress } from 'node:zlib';

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

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import type { OnLoadArgs, PluginBuild } from 'esbuild';
 import { lookup as lookupMimeType } from 'mrmime';
 import { builtinModules, isBuiltin } from 'node:module';
 import { extname } from 'node:path';
@@ -15,7 +14,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,23 +42,17 @@ 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'],
+export type RolldownLoaderOption = Exclude<
+  DepOptimizationConfig['rolldownOptions'],
   undefined
->['loader'];
+>['moduleTypes'];
 
 export function getDepOptimizationConfig({
   disabled,
   exclude,
   include,
   target,
-  zoneless,
   prebundleTransformer,
-  ssr,
   loader,
   thirdPartySourcemaps,
   define = {},
@@ -70,49 +62,62 @@ export function getDepOptimizationConfig({
   include: string[];
   target: string[];
   prebundleTransformer: JavaScriptTransformer;
-  ssr: boolean;
-  zoneless: boolean;
-  loader?: EsbuildLoaderOption;
+  loader?: RolldownLoaderOption;
   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: {
+        target,
+        define,
+      },
+      plugins: [
+        {
+          name: `angular-vite-optimize-deps${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
+          transform: {
+            filter: { id: /\.[cm]?js$/ },
+            async handler(code: string, id: string) {
+              const result = await prebundleTransformer.transformData(
+                id,
+                code,
+                /** skipLinker */ false,
+              );
+
+              const transformedCode = Buffer.from(result).toString('utf-8');
+              const mapCommentRegex =
+                /\/\/# sourceMappingURL=data:application\/json;(?:charset=[^;]+;)?base64,(.*)$/m;
+              const match = mapCommentRegex.exec(transformedCode);
+              if (match) {
+                try {
+                  const mapJson = Buffer.from(match[1], 'base64').toString('utf-8');
+
+                  return {
+                    code: transformedCode.replace(mapCommentRegex, ''),
+                    map: JSON.parse(mapJson),
+                  };
+                } catch {}
+              }
+
+              return { transformedCode, map: null };
+            },
+          },
+        },
+      ],
+      moduleTypes: loader,
+      resolve: {
+        extensions: ['.mjs', '.js', '.cjs'],
       },
-      resolveExtensions: ['.mjs', '.js', '.cjs'],
     },
   };
+
+  return config;
 }
 
 export interface DevServerExternalResultMetadata {