refactor(@angular/build): switch chunk optimizer to rollup by default

This commit transitions the chunk optimization logic in the application builder from the experimental Rolldown bundler to the stable Rollup bundler. Rollup is now used by default, while support for the NG_BUILD_CHUNKS_ROLLDOWN environment variable has been added to allow opting back into Rolldown for testing and debugging. To make Rolldown truly optional for end users, it has been moved from dependencies to devDependencies, and is now loaded via dynamic import only when requested.

Author: clydin

packages/angular/build/BUILD.bazel

@@ -102,6 +102,7 @@ ts_project(
         ":node_modules/piscina",
         ":node_modules/postcss",
         ":node_modules/rolldown",
+        ":node_modules/rollup",
         ":node_modules/sass",
         ":node_modules/source-map-support",
         ":node_modules/tinyglobby",

packages/angular/build/package.json

@@ -36,7 +36,7 @@
     "parse5-html-rewriting-stream": "8.0.0",
     "picomatch": "4.0.4",
     "piscina": "5.1.4",
-    "rolldown": "1.0.0-rc.12",
+    "rollup": "4.60.0",
     "sass": "1.98.0",
     "semver": "7.7.4",
     "source-map-support": "0.5.21",
@@ -55,6 +55,7 @@
     "less": "4.6.4",
     "ng-packagr": "22.0.0-next.1",
     "postcss": "8.5.8",
+    "rolldown": "1.0.0-rc.12",
     "rxjs": "7.8.2",
     "vitest": "4.1.2"
   },

packages/angular/build/src/builders/application/chunk-optimizer.ts

@@ -19,7 +19,8 @@
 
 import type { Message, Metafile } from 'esbuild';
 import assert from 'node:assert';
-import { type OutputAsset, type OutputChunk, rolldown } from 'rolldown';
+import { rollup } from 'rollup';
+import { useRolldownChunks } from '../../utils/environment-options';
 import {
   BuildOutputFile,
   BuildOutputFileType,
@@ -30,13 +31,45 @@ import { createOutputFile } from '../../tools/esbuild/utils';
 import { assertIsError } from '../../utils/error';
 
 /**
- * Converts the output of a rolldown build into an esbuild-compatible metafile.
- * @param rolldownOutput The output of a rolldown build.
+ * Represents a minimal subset of a Rollup/Rolldown output asset.
+ * This is manually defined to avoid hard dependencies on both bundlers' types
+ * and to ensure compatibility since Rolldown and Rollup types have slight differences
+ * but share these core properties.
+ */
+interface OutputAsset {
+  type: 'asset';
+  fileName: string;
+  source: string | Uint8Array;
+}
+
+/**
+ * Represents a minimal subset of a Rollup/Rolldown output chunk.
+ * This is manually defined to avoid hard dependencies on both bundlers' types
+ * and to ensure compatibility since Rolldown and Rollup types have slight differences
+ * but share these core properties.
+ */
+interface OutputChunk {
+  type: 'chunk';
+  fileName: string;
+  code: string;
+  modules: Record<string, { renderedLength: number }>;
+  imports: string[];
+  dynamicImports?: string[];
+  exports: string[];
+  isEntry: boolean;
+  facadeModuleId: string | null | undefined;
+  map?: { toString(): string } | null;
+  sourcemapFileName?: string | null;
+}
+
+/**
+ * Converts the output of a bundle build into an esbuild-compatible metafile.
+ * @param bundleOutput The output of a bundle build.
  * @param originalMetafile The original esbuild metafile from the build.
  * @returns An esbuild-compatible metafile.
  */
-function rolldownToEsbuildMetafile(
-  rolldownOutput: (OutputChunk | OutputAsset)[],
+function bundleOutputToEsbuildMetafile(
+  bundleOutput: (OutputChunk | OutputAsset)[],
   originalMetafile: Metafile,
 ): Metafile {
   const newMetafile: Metafile = {
@@ -52,7 +85,7 @@ function rolldownToEsbuildMetafile(
     );
   }
 
-  for (const chunk of rolldownOutput) {
+  for (const chunk of bundleOutput) {
     if (chunk.type === 'asset') {
       newMetafile.outputs[chunk.fileName] = {
         bytes:
@@ -214,49 +247,65 @@ export async function optimizeChunks(
   const usedChunks = new Set<string>();
 
   let bundle;
-  let optimizedOutput;
+  let optimizedOutput: (OutputChunk | OutputAsset)[];
   try {
-    bundle = await rolldown({
-      input: mainFile,
-      plugins: [
-        {
-          name: 'angular-bundle',
-          resolveId(source) {
-            // Remove leading `./` if present
-            const file = source[0] === '.' && source[1] === '/' ? source.slice(2) : source;
-
-            if (chunks[file]) {
-              return file;
-            }
-
-            // All other identifiers are considered external to maintain behavior
-            return { id: source, external: true };
-          },
-          load(id) {
-            assert(
-              chunks[id],
-              `Angular chunk content should always be present in chunk optimizer [${id}].`,
-            );
-
-            usedChunks.add(id);
-
-            const result = {
-              code: chunks[id].text,
-              map: maps[id]?.text,
-            };
-
-            return result;
-          },
+    const plugins = [
+      {
+        name: 'angular-bundle',
+        resolveId(source: string) {
+          // Remove leading `./` if present
+          const file = source[0] === '.' && source[1] === '/' ? source.slice(2) : source;
+
+          if (chunks[file]) {
+            return file;
+          }
+
+          // All other identifiers are considered external to maintain behavior
+          return { id: source, external: true };
+        },
+        load(id: string) {
+          assert(
+            chunks[id],
+            `Angular chunk content should always be present in chunk optimizer [${id}].`,
+          );
+
+          usedChunks.add(id);
+
+          const result = {
+            code: chunks[id].text,
+            map: maps[id]?.text,
+          };
+
+          return result;
         },
-      ],
-    });
-
-    const result = await bundle.generate({
-      minify: { mangle: false, compress: false },
-      sourcemap,
-      chunkFileNames: (chunkInfo) => `${chunkInfo.name.replace(/-[a-zA-Z0-9]{8}$/, '')}-[hash].js`,
-    });
-    optimizedOutput = result.output;
+      },
+    ];
+
+    if (useRolldownChunks) {
+      const { rolldown } = await import('rolldown');
+      bundle = await rolldown({
+        input: mainFile,
+        plugins,
+      });
+
+      const result = await bundle.generate({
+        minify: { mangle: false, compress: false },
+        sourcemap,
+        chunkFileNames: (chunkInfo) => `${chunkInfo.name.replace(/-[a-zA-Z0-9]{8}$/, '')}-[hash].js`,
+      });
+      optimizedOutput = result.output;
+    } else {
+      bundle = await rollup({
+        input: mainFile,
+        plugins: plugins as any,
+      });
+
+      const result = await bundle.generate({
+        sourcemap,
+        chunkFileNames: (chunkInfo) => `${chunkInfo.name.replace(/-[a-zA-Z0-9]{8}$/, '')}-[hash].js`,
+      });
+      optimizedOutput = result.output;
+    }
   } catch (e) {
     assertIsError(e);
 
@@ -269,7 +318,7 @@ export async function optimizeChunks(
   }
 
   // Update metafile
-  const newMetafile = rolldownToEsbuildMetafile(optimizedOutput, original.metafile);
+  const newMetafile = bundleOutputToEsbuildMetafile(optimizedOutput, original.metafile);
   // Add back the outputs that were not part of the optimization
   for (const [path, output] of Object.entries(original.metafile.outputs)) {
     if (usedChunks.has(path)) {

packages/angular/build/src/builders/unit-test/runners/vitest/plugins.ts

@@ -11,7 +11,13 @@ import { readFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { platform } from 'node:os';
 import path from 'node:path';
-import type { ExistingRawSourceMap } from 'rolldown';
+
+interface ExistingRawSourceMap {
+  sources?: string[];
+  sourcesContent?: string[];
+  mappings?: string;
+}
+
 import type {
   BrowserConfigOptions,
   InlineConfig,

packages/angular/build/src/utils/environment-options.ts

@@ -102,6 +102,12 @@ export const shouldBeautify = debugOptimize.beautify;
  */
 export const allowMinify = debugOptimize.minify;
 
+/**
+ * Allows using Rolldown for chunk optimization instead of Rollup.
+ * This is useful for debugging and testing scenarios.
+ */
+export const useRolldownChunks = parseTristate(process.env['NG_BUILD_CHUNKS_ROLLDOWN']) ?? false;
+
 /**
  * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
  * This cause `Error: Call retries were exceeded` errors when trying to use them.

pnpm-lock.yaml

@@ -15,5 +15,5 @@ export default async function () {
   });
 
   const content = await readFile('dist/test-project/browser/main.js', 'utf-8');
-  assert.match(content, /ɵɵdefineComponent/u);
+  assert.match(content, /(ɵɵ|\\u0275\\u0275)defineComponent/u);
 }