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.

(cherry picked from commit 21d8aa4)

Author: clydin

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');
+        },
+      ]);
+    });
   });
 });

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,