fix(@angular/build): merge component stylesheet metafiles in a stable…

… order The compiler plugin merges each component stylesheet and web worker metafile into the main esbuild metafile by iterating `additionalResults` in insertion order. The map is populated as each bundle finishes, so the order varies from build to build. When two entries produce the same output file, for example two components whose stylesheets share a file name and content, or two identical images referenced from different stylesheets, the last merged entry wins and `outputs[<file>].inputs` in the stats file flips between builds of identical sources while every emitted file stays byte-identical. Sort the entries by key before merging so the result is the same on every build. Any consumer of the metafile from `onEnd` sees the same attribution. Fixes #34209
sdjayna · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026 · c57b288bfc8d7dcfc552be4075a6687cc17735b2
commit c57b288bfc8d7dcfc552be4075a6687cc17735b2
diff --git a/packages/angular/build/src/builders/application/tests/options/stats-json_spec.ts b/packages/angular/build/src/builders/application/tests/options/stats-json_spec.ts
@@ -52,6 +52,60 @@ 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 () => {
+      // 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.
+      const component = (dir: string) => `
+        import { Component } from '@angular/core';
+        @Component({
+          selector: 'app-shared-${dir}',
+          template: '<p>${dir}</p>',
+          styleUrl: './shared.css',
+        })
+        export class Shared${dir.toUpperCase()}Component {}
+      `;
+      await harness.writeFiles({
+        'src/app/a/shared.component.ts': component('a'),
+        'src/app/a/shared.css': 'p { color: red; }',
+        'src/app/b/shared.component.ts': component('b'),
+        'src/app/b/shared.css': 'p { color: red; }',
+      });
+      await harness.writeFile(
+        'src/app/app.module.ts',
+        `
+        import { NgModule } from '@angular/core';
+        import { BrowserModule } from '@angular/platform-browser';
+        import { AppComponent } from './app.component';
+        import { SharedAComponent } from './a/shared.component';
+        import { SharedBComponent } from './b/shared.component';
+        @NgModule({
+          declarations: [AppComponent],
+          imports: [BrowserModule, SharedAComponent, SharedBComponent],
+          bootstrap: [AppComponent],
+        })
+        export class AppModule {}
+      `,
+      );
+      await harness.writeFile(
+        'src/app/app.component.html',
+        '<app-shared-a></app-shared-a><app-shared-b></app-shared-b>',
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        statsJson: true,
+      });
+
+      for (let i = 0; i < 2; i++) {
+        const { result } = await harness.executeOnce();
+        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']);
+      }
+    });
+
     describe('server build', () => {
       beforeEach(async () => {
         await harness.modifyFile('src/tsconfig.app.json', (content) => {

diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts
@@ -626,7 +626,12 @@ export function createCompilerPlugin(
           angularCompilationContext.markAsReady(hasCompilationErrors);
         }
 
-        for (const { outputFiles, metafile } of additionalResults.values()) {
+        // 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) {
           // Add any additional output files to the main output files
           if (outputFiles?.length) {
             result.outputFiles?.push(...outputFiles);