fixup! fix(@angular/build): merge component stylesheet metafiles in a stable order

Author: sdjayna

packages/angular/build/src/builders/application/execute-build.ts

@@ -43,6 +43,25 @@ import { createComponentStyleBundler, setupBundlerContexts } from './setup-bundl
 /** The esbuild error text prefix used to detect top-level await errors. */
 const TOP_LEVEL_AWAIT_ERROR_TEXT =
   'Top-level await is not available in the configured target environment';
+/**
+ * Serializes a metafile with object keys sorted so the stats file is identical across builds.
+ * Arrays keep their order.
+ */
+function stableStringify(value: unknown): string {
+  return JSON.stringify(
+    value,
+    (_key, current: unknown) =>
+      current && typeof current === 'object' && !Array.isArray(current)
+        ? Object.fromEntries(
+            Object.keys(current)
+              .sort()
+              .map((key) => [key, (current as Record<string, unknown>)[key]]),
+          )
+        : current,
+    2,
+  );
+}
+
 // eslint-disable-next-line max-lines-per-function
 export async function executeBuild(
   options: NormalizedApplicationBuildOptions,
@@ -394,14 +413,14 @@ export async function executeBuild(
     if (options.stats) {
       executionResult.addOutputFile(
         'browser-stats.json',
-        JSON.stringify(browserMetafile, null, 2),
+        stableStringify(browserMetafile),
         BuildOutputFileType.Root,
       );
 
       if (serverEntryPoint) {
         executionResult.addOutputFile(
           'server-stats.json',
-          JSON.stringify(serverMetafile, null, 2),
+          stableStringify(serverMetafile),
           BuildOutputFileType.Root,
         );
       }

packages/angular/build/src/builders/application/tests/options/stats-json_spec.ts

@@ -52,10 +52,9 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/server-stats.json').toNotExist();
     });
 
-    it('attributes a shared component stylesheet output to the same input on every build', async () => {
+    it('attributes a shared component stylesheet output to every input on every build', async () => {
       // Two components in different directories with byte-identical stylesheets of the same
-      // file name bundle to the same output file. The merged metafile must attribute that output
-      // to the same input regardless of which stylesheet bundle finishes first.
+      // file name bundle to the same output file. The merged metafile must list both inputs.
       const component = (dir: string) => `
         import { Component } from '@angular/core';
         @Component({
@@ -102,7 +101,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         expect(result?.success).toBeTrue();
 
         const stats = JSON.parse(harness.readFile('dist/browser-stats.json'));
-        expect(Object.keys(stats.outputs['shared.css'].inputs)).toEqual(['src/app/b/shared.css']);
+        expect(Object.keys(stats.outputs['shared.css'].inputs)).toEqual([
+          'src/app/a/shared.css',
+          'src/app/b/shared.css',
+        ]);
       }
     });
 

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

@@ -626,12 +626,7 @@ export function createCompilerPlugin(
           angularCompilationContext.markAsReady(hasCompilationErrors);
         }
 
-        // Merge in key order: the map fills in completion order, and when two entries share an
-        // output file the last one merged wins, so the metafile would otherwise vary between builds.
-        const sortedResults = [...additionalResults].sort(([a], [b]) =>
-          a < b ? -1 : a > b ? 1 : 0,
-        );
-        for (const [, { outputFiles, metafile }] of sortedResults) {
+        for (const { outputFiles, metafile } of additionalResults.values()) {
           // Add any additional output files to the main output files
           if (outputFiles?.length) {
             result.outputFiles?.push(...outputFiles);
@@ -643,7 +638,15 @@ export function createCompilerPlugin(
             // mitigating significant performance overhead for large apps.
             // See: https://bugs.chromium.org/p/v8/issues/detail?id=11536
             Object.assign(result.metafile.inputs, metafile.inputs);
-            Object.assign(result.metafile.outputs, metafile.outputs);
+            for (const [outputPath, output] of Object.entries(metafile.outputs)) {
+              // Two stylesheets can bundle to the same output file. Union the inputs into a new
+              // object so every input is attributed and the bundler's cached metafile is untouched.
+              const existing: Metafile['outputs'][string] | undefined =
+                result.metafile.outputs[outputPath];
+              result.metafile.outputs[outputPath] = existing
+                ? { ...existing, inputs: { ...existing.inputs, ...output.inputs } }
+                : output;
+            }
           }
         }