fixup! perf(@angular/build): optimize incremental watch rebuilds in angular compilation

Author: alan-agius4

packages/angular/build/src/builders/application/tests/behavior/rebuild-errors_spec.ts

@@ -15,12 +15,6 @@ import {
   expectNoLog,
 } from '../setup';
 
-/**
- * Maximum time in milliseconds for single build/rebuild
- * This accounts for CI variability.
- */
-export const BUILD_TIMEOUT = 30_000;
-
 describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
   describe('Behavior: "Rebuild Error Detection"', () => {
     it('detects template errors with no AOT codegen or TS emit differences', async () => {
@@ -128,6 +122,116 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       );
     });
 
+    it('detects template errors across components on watch rebuild when isolatedModules is enabled', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        watch: true,
+      });
+
+      await harness.modifyFile('tsconfig.json', (content) => {
+        const tsconfig = JSON.parse(content);
+        tsconfig.compilerOptions = {
+          ...tsconfig.compilerOptions,
+          isolatedModules: true,
+        };
+
+        return JSON.stringify(tsconfig);
+      });
+
+      const goodChildComponentContents = `
+        import { Component, Input } from '@angular/core';
+        @Component({
+          selector: 'child',
+          standalone: true,
+          template: '<p>{{ value }}</p>',
+        })
+        export class ChildComponent {
+          @Input() value!: number;
+        }
+      `;
+
+      const typeErrorText = `Type 'number' is not assignable to type 'string'.`;
+
+      await harness.writeFiles({
+        'src/app/child.component.ts': goodChildComponentContents,
+        'src/app/app.module.ts': `
+          import { NgModule } from '@angular/core';
+          import { BrowserModule } from '@angular/platform-browser';
+          import { AppComponent } from './app.component';
+          @NgModule({
+            imports: [
+              BrowserModule,
+              AppComponent,
+            ],
+            providers: [],
+            bootstrap: [AppComponent]
+          })
+          export class AppModule { }
+        `,
+        'src/app/app.component.ts': `
+          import { Component } from '@angular/core';
+          import { ChildComponent } from './child.component';
+          @Component({
+            selector: 'app-root',
+            standalone: true,
+            imports: [ChildComponent],
+            template: '<child [value]="123" />',
+          })
+          export class AppComponent {}
+        `,
+      });
+
+      await harness.executeWithCases(
+        [
+          async ({ result }) => {
+            expect(result?.success).toBeTrue();
+
+            // Update child component to change input type from number to string
+            await harness.writeFile(
+              'src/app/child.component.ts',
+              `
+              import { Component, Input } from '@angular/core';
+              @Component({
+                selector: 'child',
+                standalone: true,
+                template: '<p>{{ value }}</p>',
+              })
+              export class ChildComponent {
+                @Input() value!: string;
+              }
+            `,
+            );
+          },
+          async ({ result, logs }) => {
+            expect(result?.success).toBeFalse();
+            expectLog(logs, typeErrorText);
+
+            // Make an unrelated change to verify error persists
+            await harness.modifyFile('src/main.ts', (content) => content + '\n');
+          },
+          async ({ result, logs }) => {
+            expect(result?.success).toBeFalse();
+            expectLog(logs, typeErrorText);
+
+            // Revert back to number
+            await harness.writeFile('src/app/child.component.ts', goodChildComponentContents);
+          },
+          async ({ result, logs }) => {
+            expect(result?.success).toBeTrue();
+            expectNoLog(logs, typeErrorText);
+
+            // Make an unrelated change to verify error cache cleared
+            await harness.modifyFile('src/main.ts', (content) => content + '\n');
+          },
+          ({ result, logs }) => {
+            expect(result?.success).toBeTrue();
+            expectNoLog(logs, typeErrorText);
+          },
+        ],
+        { outputLogsOnFailure: false },
+      );
+    });
+
     it('detects cumulative block syntax errors', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
@@ -234,7 +338,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
             await harness.appendToFile('src/app/app.component.html', '<div>Guten Tag</div>');
           },
           ({ logs }) => {
-            expectNoLog(logs, 'invalid-css-content');
+            expectNoLog(logs, 'Unexpected character "EOF"');
 
             harness.expectFile('dist/browser/main.js').content.toContain('Hello, world!');
             harness.expectFile('dist/browser/main.js').content.toContain('Guten Tag');

packages/angular/build/src/tools/angular/compilation/aot-compilation.ts

@@ -240,6 +240,10 @@ export class AotCompilation extends TypeScriptCompilation {
             !/\.(?:css|scss|sass|less)$/i.test(resourceDependency)
           ) {
             this.#state.diagnosticCache.delete(sourceFile);
+            const oldSourceFile = this.#state.typeScriptProgram.getSourceFile(sourceFile.fileName);
+            if (oldSourceFile) {
+              this.#state.diagnosticCache.delete(oldSourceFile);
+            }
             // Also mark as affected in case changed template affects diagnostics
             affectedFiles.add(sourceFile);
           }
@@ -567,6 +571,88 @@ function findAffectedFiles(
     }
   }
 
+  // When `isolatedModules` or `verbatimModuleSyntax` is enabled, TypeScript's builder skips
+  // walking `referencedMap` for affected files. As a result, TTC shims (`.ngtypecheck.ts`) that depend
+  // on modified components or directives are not returned by `getSemanticDiagnosticsOfNextAffectedFile`.
+  // Propagate affected status through `referencedMap` to identify dependent TTC shims.
+  const compilerOptions = builder.getCompilerOptions();
+  if (
+    (compilerOptions.isolatedModules || compilerOptions.verbatimModuleSyntax) &&
+    affectedFiles.size > 0
+  ) {
+    const internalBuilder = builder as InternalBuilderProgram;
+    const referencedMap = internalBuilder.state?.referencedMap;
+
+    if (referencedMap) {
+      const queue: string[] = [];
+      const seen = new Set<string>();
+
+      for (const sf of affectedFiles) {
+        const resolvedPath =
+          (sf as ts.SourceFile & { resolvedPath?: string }).resolvedPath ?? sf.fileName;
+        queue.push(resolvedPath);
+        seen.add(resolvedPath);
+      }
+
+      while (queue.length > 0) {
+        const currentPath = queue.pop();
+        if (!currentPath) {
+          break;
+        }
+
+        const dependents = referencedMap.getKeys(currentPath);
+        if (!dependents) {
+          continue;
+        }
+
+        for (const depPath of dependents) {
+          if (seen.has(depPath)) {
+            continue;
+          }
+
+          seen.add(depPath);
+
+          if (depPath.endsWith('.ngtypecheck.ts')) {
+            const originalFilename = depPath.slice(0, -15) + '.ts';
+            const originalSourceFile = builder.getSourceFile(originalFilename);
+            if (originalSourceFile) {
+              affectedFiles.add(originalSourceFile);
+            }
+          } else {
+            queue.push(depPath);
+          }
+        }
+      }
+    } else if (typeof builder.getAllDependencies === 'function') {
+      const affectedPathSet = new Set<string>();
+      for (const sf of affectedFiles) {
+        affectedPathSet.add(sf.fileName);
+        const resolvedPath = (sf as ts.SourceFile & { resolvedPath?: string }).resolvedPath;
+        if (resolvedPath) {
+          affectedPathSet.add(resolvedPath);
+        }
+      }
+
+      for (const sourceFile of builder.getSourceFiles()) {
+        if (
+          !sourceFile.fileName.endsWith('.ngtypecheck.ts') ||
+          !ignoreForDiagnostics.has(sourceFile)
+        ) {
+          continue;
+        }
+
+        const deps = builder.getAllDependencies(sourceFile);
+        if (deps.some((dep) => affectedPathSet.has(dep))) {
+          const originalFilename = sourceFile.fileName.slice(0, -15) + '.ts';
+          const originalSourceFile = builder.getSourceFile(originalFilename);
+          if (originalSourceFile) {
+            affectedFiles.add(originalSourceFile);
+          }
+        }
+      }
+    }
+  }
+
   return affectedFiles;
 }
 
@@ -576,6 +662,10 @@ interface InternalBuilderProgram extends ts.EmitAndSemanticDiagnosticsBuilderPro
     changedFilesSet?: Set<string>;
     oldSignatures?: Map<string, string | false>;
     hasCalledUpdateShapeSignature?: Set<string>;
+    referencedMap?: {
+      getKeys(path: string): Set<string> | undefined;
+      getValues(path: string): Set<string> | undefined;
+    };
   };
 }