fix(@angular/build): re-enable code splitting for unit tests

Re-enables esbuild code splitting for unit test builds by removing
`disableCodeSplitting` and resolving the underlying live export binding
issue when chunks are loaded by Vitest under Zone.js (#33728):

1. Ensures test spec files are treated as ES modules by appending
   `export {};` in the Angular compiler plugin if absent. In Zone.js
   applications, downleveled `async` functions capture module-level `this`
   via `__async(this, ...)`. Without an explicit export, esbuild misclassified
   spec files as CommonJS and wrapped them in `__commonJS`, which led to lazy
   `__esm` initializers for shared dependencies.
2. In the Vitest in-memory provider plugin, eagerly invokes any lazy `__esm`
   initializers detected in chunks when loaded for `vite-node`. Because
   `vite-node` statically captures exports upon initial chunk evaluation,
   eagerly executing the initializers ensures exported values are populated
   before consumers read them.
3. Enforces `namedChunks: false` for unit test builds to ensure chunks
   consistently match chunk naming patterns.

closes #33948

Author: alan-agius4

packages/angular/build/src/builders/application/options.ts

@@ -126,20 +126,6 @@ interface InternalOptions {
    * Suppress build summary and stats table.
    */
   quiet?: boolean;
-
-  /**
-   * Disables esbuild code splitting for the browser code bundle.
-   *
-   * Splitting emits shared chunks whose exports are read across chunk boundaries as live ESM
-   * bindings. A module hoisted into a shared chunk is wrapped in a lazy initializer, so its exported
-   * value is only assigned once that initializer runs. Runners that load the generated output
-   * through a module runner rather than the browser's own ESM implementation do not reliably
-   * preserve those bindings, and an importing chunk can observe the export as `undefined`.
-   *
-   * Test bundles are never downloaded by a browser, so there is nothing for splitting to optimize
-   * there. Used exclusively for tests and shouldn't be used for other kinds of builds.
-   */
-  disableCodeSplitting?: boolean;
 }
 
 /** Full set of options for `application` builder. */
@@ -453,7 +439,6 @@ export async function normalizeOptions(
     partialSSRBuild = false,
     externalRuntimeStyles,
     instrumentForCoverage,
-    disableCodeSplitting,
   } = options;
 
   // Return all the normalized options
@@ -490,7 +475,6 @@ export async function normalizeOptions(
     watch,
     workspaceRoot,
     entryPoints,
-    disableCodeSplitting,
     optimizationOptions,
     outputOptions,
     outExtension,

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

@@ -256,13 +256,9 @@ export async function getVitestBuildOptions(
     sourceMap: { scripts: true, vendor: false, styles: false },
     outputHashing: adjustOutputHashing(baseBuildOptions.outputHashing),
     optimization: false,
+    namedChunks: false,
     entryPoints,
-    // Every spec file is its own entry point, so splitting hoists any module shared between two
-    // specs into a chunk whose exports are then read across a chunk boundary. Those reads rely on
-    // live ESM bindings, and a module placed in a shared chunk is only assigned its exported value
-    // when that chunk's lazy initializer runs, so an importing chunk can read `undefined`. Nothing
-    // downloads these bundles, so there is no benefit to weigh against that.
-    disableCodeSplitting: true,
+
     // Enable support for vitest browser prebundling. Excludes can be controlled with a runnerConfig
     // and the `optimizeDeps.exclude` option.
     externalPackages: true,

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

@@ -404,7 +404,7 @@ export function createVitestPlugins(pluginOptions: PluginOptions): VitestPlugins
 
         const outputFile = buildResultFiles.get(outputPath);
         if (outputFile) {
-          const code = await loadResultFile(outputFile);
+          let code = await loadResultFile(outputFile);
           const sourceMapPath = outputPath + '.map';
           const sourceMapFile = buildResultFiles.get(sourceMapPath);
           const sourceMapText = sourceMapFile ? await loadResultFile(sourceMapFile) : undefined;
@@ -414,6 +414,21 @@ export function createVitestPlugins(pluginOptions: PluginOptions): VitestPlugins
             adjustSourcemapSources(map, true, workspaceRoot, id);
           }
 
+          // Eagerly invoke any __esm initializers in chunks / bundles.
+          // In Node-based Vitest runs (jsdom/happy-dom), vite-node evaluates code via ssrTransform,
+          // which copies exports statically and does not maintain live ESM bindings across chunk
+          // boundaries for variables initialized inside lazy __esm wrappers. Eagerly executing
+          // these initializers when the chunk is loaded ensures that all exported values are
+          // populated before vite-node reads them.
+          const inits = [
+            ...new Set(
+              [...code.matchAll(/\b(init_[a-zA-Z0-9_$]+)\s*=\s*__esm\b/g)].map((m) => m[1]),
+            ),
+          ];
+          if (inits.length > 0) {
+            code += `\n${inits.map((fn) => `typeof ${fn} === 'function' && ${fn}();`).join('\n')}\n`;
+          }
+
           return {
             code,
             map,
@@ -557,6 +572,7 @@ async function generateCoverageOption(
       ? {
           exclude: Array.from(
             new Set([
+              'virtual:*',
               // Augment the default exclude https://vitest.dev/config/#coverage-exclude
               // with the user defined exclusions
               ...(configCoverage?.exclude || []),

packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts

@@ -440,6 +440,10 @@ export function createCompilerPlugin(
         if (contents === undefined && compilation.transformFile) {
           try {
             directContents = await readFile(request, 'utf-8');
+            if (pluginOptions.includeTestMetadata) {
+              directContents = ensureTestFileEsm(request, directContents);
+            }
+
             const transformResult = await compilation.transformFile(request, directContents);
             if (transformResult) {
               contents = transformResult.contents;
@@ -483,6 +487,10 @@ export function createCompilerPlugin(
           // Evaluate whether the file requires the Angular compiler transpilation.
           // If not, issue a warning but allow bundler to process the file (no type-checking).
           directContents ??= await readFile(request, 'utf-8');
+          if (pluginOptions.includeTestMetadata) {
+            directContents = ensureTestFileEsm(request, directContents);
+          }
+
           if (!requiresAngularCompiler(directContents)) {
             return {
               warnings: [createMissingFileDiagnostic(request, args.path, diangosticRoot, false)],
@@ -496,21 +504,27 @@ export function createCompilerPlugin(
           return {
             errors: [createMissingFileDiagnostic(request, args.path, diangosticRoot, true)],
           };
-        } else if (typeof contents === 'string' && (useTypeScriptTranspilation || isJS)) {
-          // A string indicates untransformed output from the TS/NG compiler.
-          // This step is unneeded when using esbuild transpilation.
-          const sideEffects = await hasSideEffects(request);
-          const instrumentForCoverage = pluginOptions.instrumentForCoverage?.(request);
-          contents = await javascriptTransformer.transformData(
-            request,
-            contents,
-            true /* skipLinker */,
-            sideEffects,
-            instrumentForCoverage,
-          );
+        } else if (typeof contents === 'string') {
+          if (pluginOptions.includeTestMetadata) {
+            contents = ensureTestFileEsm(request, contents);
+          }
+
+          if (useTypeScriptTranspilation || isJS) {
+            // A string indicates untransformed output from the TS/NG compiler.
+            // This step is unneeded when using esbuild transpilation.
+            const sideEffects = await hasSideEffects(request);
+            const instrumentForCoverage = pluginOptions.instrumentForCoverage?.(request);
+            contents = await javascriptTransformer.transformData(
+              request,
+              contents,
+              true /* skipLinker */,
+              sideEffects,
+              instrumentForCoverage,
+            );
 
-          // Store as the returned Uint8Array to allow caching the fully transformed code
-          typeScriptFileCache.set(request, contents);
+            // Store as the returned Uint8Array to allow caching the fully transformed code
+            typeScriptFileCache.set(request, contents);
+          }
         }
 
         let loader: Loader;
@@ -576,9 +590,7 @@ export function createCompilerPlugin(
             const replacement = pluginOptions.fileReplacements?.[path.normalize(args.path)];
             if (replacement) {
               return {
-                contents: await import('node:fs/promises').then(({ readFile }) =>
-                  readFile(path.normalize(replacement)),
-                ),
+                contents: await readFile(path.normalize(replacement)),
                 loader: 'json' as const,
                 watchFiles: [replacement],
               };
@@ -860,3 +872,19 @@ const POTENTIAL_METADATA_REGEX = /@angular\/core|@Component|@Directive|@Injectab
 function requiresAngularCompiler(contents: string): boolean {
   return POTENTIAL_METADATA_REGEX.test(contents);
 }
+
+const SPECS_REGEXP = /\.(?:spec|test)\.[cm]?[jt]sx?$/;
+
+/**
+ * Ensures test spec files lacking export statements are treated as ES modules by esbuild.
+ * In Zone.js apps, async test callbacks are downleveled to `__async(this, ...)`, which captures
+ * module-level `this`. If a file has a top-level `this` and no `export` statements, esbuild's
+ * module detection treats it as CommonJS and wraps it in `__commonJS`. This causes esbuild to wrap
+ * imported modules in lazy `__esm` initializers, which breaks live export bindings in Vite SSR
+ * (https://github.com/angular/angular-cli/issues/33728). Adding an empty export guarantees the file is bundled as an ES module.
+ */
+function ensureTestFileEsm(request: string, contents: string): string {
+  return SPECS_REGEXP.test(request) && !contents.includes('export {};')
+    ? contents + '\nexport {};\n'
+    : contents;
+}

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -70,15 +70,6 @@ export function createBrowserCodeBundleOptions(
       supported: getFeatureSupport(zoneless),
     };
 
-    if (options.disableCodeSplitting) {
-      // Splitting emits shared chunks that are read across chunk boundaries as live ESM bindings,
-      // which the unit-test runners' module loading does not reliably preserve.
-      buildOptions.splitting = false;
-      // In unit test builds, package.json "sideEffects": false annotations can cause esbuild
-      // to incorrectly elide statically-referenced barrel module bodies across multiple entry points.
-      buildOptions.ignoreAnnotations = true;
-    }
-
     buildOptions.plugins ??= [];
     buildOptions.plugins.push(
       createWasmPlugin({ allowAsync: zoneless, cache: loadCache }),