From 8ff0ea19ca16bb856111b55d1f49b8cdea78e128 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 27 Mar 2026 14:50:15 -0400
Subject: [PATCH] fix(@angular/build): ensure transitive SCSS partial errors
 are tracked in watch mode

When stylesheet bundling fails due to an error in a SCSS partial, we now ensure that `referencedFiles` are still passed to the `FileReferenceTracker`. This prevents the dependency between the component and the error file from being lost, allowing the component to be correctly rebuilt when the error is fixed.
---
 .../behavior/rebuild-component_styles_spec.ts | 80 +++++++++++++++++++
 .../tools/esbuild/angular/compiler-plugin.ts  |  9 +++
 2 files changed, 89 insertions(+)

diff --git a/packages/angular/build/src/builders/application/tests/behavior/rebuild-component_styles_spec.ts b/packages/angular/build/src/builders/application/tests/behavior/rebuild-component_styles_spec.ts
index 26ae35a8221f..08b683439684 100644
--- a/packages/angular/build/src/builders/application/tests/behavior/rebuild-component_styles_spec.ts
+++ b/packages/angular/build/src/builders/application/tests/behavior/rebuild-component_styles_spec.ts
@@ -58,5 +58,85 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         ]);
       });
     }
+
+    it('rebuilds component after error on rebuild from transitive import', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        watch: true,
+      });
+
+      await harness.modifyFile('src/app/app.component.ts', (content) =>
+        content.replace('app.component.css', 'app.component.scss'),
+      );
+      await harness.writeFile('src/app/app.component.scss', "@import './a';");
+      await harness.writeFile('src/app/a.scss', '$primary: aqua;\\nh1 { color: $primary; }');
+
+      await harness.executeWithCases([
+        async ({ result }) => {
+          expect(result?.success).toBe(true);
+
+          harness.expectFile('dist/browser/main.js').content.toContain('color: aqua');
+
+          // Introduce a syntax error
+          await harness.writeFile(
+            'src/app/a.scss',
+            'invalid-invalid-invalid\\nh1 { color: $primary; }',
+          );
+        },
+        async ({ result }) => {
+          expect(result?.success).toBe(false);
+
+          // Fix the syntax error
+          await harness.writeFile('src/app/a.scss', '$primary: blue;\\nh1 { color: $primary; }');
+        },
+        ({ result }) => {
+          expect(result?.success).toBe(true);
+
+          harness.expectFile('dist/browser/main.js').content.toContain('color: blue');
+        },
+      ]);
+    });
+
+    it('rebuilds component after error on rebuild from deep transitive import with partials', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        watch: true,
+      });
+
+      await harness.modifyFile('src/app/app.component.ts', (content) =>
+        content.replace('app.component.css', 'app.component.scss'),
+      );
+      await harness.writeFile('src/app/app.component.scss', "@import './intermediary';");
+      await harness.writeFile('src/app/_intermediary.scss', "@import './partial';");
+      await harness.writeFile('src/app/_partial.scss', '$primary: aqua;\\nh1 { color: $primary; }');
+
+      await harness.executeWithCases([
+        async ({ result }) => {
+          expect(result?.success).toBe(true);
+
+          harness.expectFile('dist/browser/main.js').content.toContain('color: aqua');
+
+          // Introduce a syntax error deeply
+          await harness.writeFile(
+            'src/app/_partial.scss',
+            'invalid-invalid-invalid\\nh1 { color: $primary; }',
+          );
+        },
+        async ({ result }) => {
+          expect(result?.success).toBe(false);
+
+          // Fix the syntax error deeply
+          await harness.writeFile(
+            'src/app/_partial.scss',
+            '$primary: blue;\\nh1 { color: $primary; }',
+          );
+        },
+        ({ result }) => {
+          expect(result?.success).toBe(true);
+
+          harness.expectFile('dist/browser/main.js').content.toContain('color: blue');
+        },
+      ]);
+    });
   });
 });
diff --git a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts
index af4dcaea01fb..1bcb8c40500a 100644
--- a/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts
+++ b/packages/angular/build/src/tools/esbuild/angular/compiler-plugin.ts
@@ -220,10 +220,19 @@ export function createCompilerPlugin(
             if (stylesheetResult.errors) {
               (result.errors ??= []).push(...stylesheetResult.errors);
 
+              const { referencedFiles } = stylesheetResult;
+              if (referencedFiles) {
+                referencedFileTracker.add(containingFile, referencedFiles);
+                if (stylesheetFile) {
+                  referencedFileTracker.add(stylesheetFile, referencedFiles);
+                }
+              }
+
               return '';
             }
 
             const { contents, outputFiles, metafile, referencedFiles } = stylesheetResult;
+
             additionalResults.set(resultSource, {
               outputFiles,
               metafile,