fix(compiler-cli): preserve defer block dependencies during HMR when class metadata is disabled (#59313)

crisbeto · thePunderWoman · commit 17fb20f85db9 · 2025-01-06T17:26:30.000Z
Fixes that the compiler wasn't capturing defer block dependencies correctly when `supportTestBed` is disabled. We had tests for this, but we didn't notice the issue because the dependencies ended up being captured because of the `setClassMetadata` calls. Once they're disabled, the dependencies stopped being recorded. Fixes #59310. PR Close #59313
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -271,7 +271,7 @@ export class ComponentDecoratorHandler
 
     // Dependencies can't be deferred during HMR, because the HMR update module can't have
     // dynamic imports and its dependencies need to be passed in directly. If dependencies
-    // are deferred, their imports will be deleted so we won't may lose the reference to them.
+    // are deferred, their imports will be deleted so we may lose the reference to them.
     this.canDeferDeps = !enableHmr;
   }
 
@@ -1610,10 +1610,11 @@ export class ComponentDecoratorHandler
     const perComponentDeferredDeps = this.canDeferDeps
       ? this.resolveAllDeferredDependencies(resolution)
       : null;
+    const defer = this.compileDeferBlocks(resolution);
     const meta: R3ComponentMetadata<R3TemplateDependency> = {
       ...analysis.meta,
       ...resolution,
-      defer: this.compileDeferBlocks(resolution),
+      defer,
     };
     const fac = compileNgFactoryDefField(toFactoryMetadata(meta, FactoryTarget.Component));
 
@@ -1639,6 +1640,7 @@ export class ComponentDecoratorHandler
           this.rootDirs,
           def,
           fac,
+          defer,
           classMetadata,
           debugInfo,
         )
@@ -1680,10 +1682,11 @@ export class ComponentDecoratorHandler
     const perComponentDeferredDeps = this.canDeferDeps
       ? this.resolveAllDeferredDependencies(resolution)
       : null;
+    const defer = this.compileDeferBlocks(resolution);
     const meta: R3ComponentMetadata<R3TemplateDependencyMetadata> = {
       ...analysis.meta,
       ...resolution,
-      defer: this.compileDeferBlocks(resolution),
+      defer,
     };
     const fac = compileDeclareFactory(toFactoryMetadata(meta, FactoryTarget.Component));
     const inputTransformFields = compileInputTransformFields(analysis.inputs);
@@ -1703,6 +1706,7 @@ export class ComponentDecoratorHandler
           this.rootDirs,
           def,
           fac,
+          defer,
           classMetadata,
           null,
         )
@@ -1734,10 +1738,11 @@ export class ComponentDecoratorHandler
     // doesn't have information on which dependencies belong to which defer blocks.
     const deferrableTypes = this.canDeferDeps ? analysis.explicitlyDeferredTypes : null;
 
+    const defer = this.compileDeferBlocks(resolution);
     const meta = {
       ...analysis.meta,
       ...resolution,
-      defer: this.compileDeferBlocks(resolution),
+      defer,
     } as R3ComponentMetadata<R3TemplateDependency>;
 
     if (deferrableTypes !== null) {
@@ -1763,6 +1768,7 @@ export class ComponentDecoratorHandler
           this.rootDirs,
           def,
           fac,
+          defer,
           classMetadata,
           debugInfo,
         )
@@ -1794,10 +1800,11 @@ export class ComponentDecoratorHandler
 
     // Create a brand-new constant pool since there shouldn't be any constant sharing.
     const pool = new ConstantPool();
+    const defer = this.compileDeferBlocks(resolution);
     const meta: R3ComponentMetadata<R3TemplateDependency> = {
       ...analysis.meta,
       ...resolution,
-      defer: this.compileDeferBlocks(resolution),
+      defer,
     };
     const fac = compileNgFactoryDefField(toFactoryMetadata(meta, FactoryTarget.Component));
     const def = compileComponentFromMetadata(meta, pool, makeBindingParser());
@@ -1817,6 +1824,7 @@ export class ComponentDecoratorHandler
           this.rootDirs,
           def,
           fac,
+          defer,
           classMetadata,
           debugInfo,
         )
diff --git a/packages/compiler-cli/src/ngtsc/hmr/src/extract_dependencies.ts b/packages/compiler-cli/src/ngtsc/hmr/src/extract_dependencies.ts
@@ -6,7 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {R3CompiledExpression, R3HmrNamespaceDependency, outputAst as o} from '@angular/compiler';
+import {
+  DeferBlockDepsEmitMode,
+  R3CompiledExpression,
+  R3ComponentDeferMetadata,
+  R3HmrNamespaceDependency,
+  outputAst as o,
+} from '@angular/compiler';
 import {DeclarationNode} from '../../reflection';
 import {CompileResult} from '../../transform';
 import ts from 'typescript';
@@ -16,21 +22,23 @@ import ts from 'typescript';
  * @param sourceFile File in which the file is being compiled.
  * @param definition Compiled component definition.
  * @param factory Compiled component factory.
+ * @param deferBlockMetadata Metadata about the defer blocks in the component.
  * @param classMetadata Compiled `setClassMetadata` expression, if any.
  * @param debugInfo Compiled `setClassDebugInfo` expression, if any.
  */
 export function extractHmrDependencies(
   node: DeclarationNode,
   definition: R3CompiledExpression,
   factory: CompileResult,
+  deferBlockMetadata: R3ComponentDeferMetadata,
   classMetadata: o.Statement | null,
   debugInfo: o.Statement | null,
 ): {local: string[]; external: R3HmrNamespaceDependency[]} {
   const name = ts.isClassDeclaration(node) && node.name ? node.name.text : null;
   const visitor = new PotentialTopLevelReadsVisitor();
   const sourceFile = node.getSourceFile();
 
-  // Visit all of the compiled expression to look for potential
+  // Visit all of the compiled expressions to look for potential
   // local references that would have to be retained.
   definition.expression.visitExpression(visitor, null);
   definition.statements.forEach((statement) => statement.visitStatement(visitor, null));
@@ -39,6 +47,12 @@ export function extractHmrDependencies(
   classMetadata?.visitStatement(visitor, null);
   debugInfo?.visitStatement(visitor, null);
 
+  if (deferBlockMetadata.mode === DeferBlockDepsEmitMode.PerBlock) {
+    deferBlockMetadata.blocks.forEach((loader) => loader?.visitExpression(visitor, null));
+  } else {
+    deferBlockMetadata.dependenciesFn?.visitExpression(visitor, null);
+  }
+
   // Filter out only the references to defined top-level symbols. This allows us to ignore local
   // variables inside of functions. Note that we filter out the class name since it is always
   // defined and it saves us having to repeat this logic wherever the locals are consumed.
diff --git a/packages/compiler-cli/src/ngtsc/hmr/src/metadata.ts b/packages/compiler-cli/src/ngtsc/hmr/src/metadata.ts
@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {R3CompiledExpression, R3HmrMetadata, outputAst as o} from '@angular/compiler';
+import {
+  R3CompiledExpression,
+  R3ComponentDeferMetadata,
+  R3HmrMetadata,
+  outputAst as o,
+} from '@angular/compiler';
 import {DeclarationNode, ReflectionHost} from '../../reflection';
 import {getProjectRelativePath} from '../../util/src/path';
 import {CompileResult} from '../../transform';
@@ -21,6 +26,7 @@ import ts from 'typescript';
  * @param rootDirs Root directories configured by the user.
  * @param definition Analyzed component definition.
  * @param factory Analyzed component factory.
+ * @param deferBlockMetadata Metadata about the defer blocks in the component.
  * @param classMetadata Analyzed `setClassMetadata` expression, if any.
  * @param debugInfo Analyzed `setClassDebugInfo` expression, if any.
  */
@@ -31,6 +37,7 @@ export function extractHmrMetatadata(
   rootDirs: readonly string[],
   definition: R3CompiledExpression,
   factory: CompileResult,
+  deferBlockMetadata: R3ComponentDeferMetadata,
   classMetadata: o.Statement | null,
   debugInfo: o.Statement | null,
 ): R3HmrMetadata | null {
@@ -43,7 +50,14 @@ export function extractHmrMetatadata(
     getProjectRelativePath(sourceFile, rootDirs, compilerHost) ||
     compilerHost.getCanonicalFileName(sourceFile.fileName);
 
-  const dependencies = extractHmrDependencies(clazz, definition, factory, classMetadata, debugInfo);
+  const dependencies = extractHmrDependencies(
+    clazz,
+    definition,
+    factory,
+    deferBlockMetadata,
+    classMetadata,
+    debugInfo,
+  );
   const meta: R3HmrMetadata = {
     type: new o.WrappedNodeExpr(clazz.name),
     className: clazz.name.text,
diff --git a/packages/compiler-cli/test/ngtsc/hmr_spec.ts b/packages/compiler-cli/test/ngtsc/hmr_spec.ts
@@ -20,13 +20,14 @@ runInEachFileSystem(() => {
       env.tsconfig();
     });
 
-    function enableHmr(): void {
+    function enableHmr(additionalOptions: Record<string, unknown> = {}): void {
       env.write(
         'tsconfig.json',
         JSON.stringify({
           extends: './tsconfig-base.json',
           angularCompilerOptions: {
             _enableHmr: true,
+            ...additionalOptions,
           },
         }),
       );
@@ -298,6 +299,60 @@ runInEachFileSystem(() => {
       expect(hmrContents).not.toContain('import(');
     });
 
+    it('should capture deferred dependencies when no class metadata is produced', () => {
+      // `supportTestBed` determines whether we produce `setClassMetadata` calls.
+      enableHmr({supportTestBed: false});
+      env.write(
+        'dep.ts',
+        `
+          import {Directive} from '@angular/core';
+
+          @Directive({
+            selector: '[dep]',
+            standalone: true,
+          })
+          export class Dep {}
+        `,
+      );
+
+      env.write(
+        'test.ts',
+        `
+          import {Component} from '@angular/core';
+          import {Dep} from './dep';
+
+          @Component({
+            selector: 'cmp',
+            standalone: true,
+            template: '@defer (on timer(1000)) {<div dep></div>}',
+            imports: [Dep],
+          })
+          export class Cmp {}
+        `,
+      );
+
+      env.driveMain();
+
+      const jsContents = env.getContents('test.js');
+      const hmrContents = env.driveHmr('test.ts', 'Cmp');
+
+      expect(jsContents).toContain(`import { Dep } from './dep';`);
+      expect(jsContents).toContain('const Cmp_Defer_1_DepsFn = () => [Dep];');
+      expect(jsContents).toContain('function Cmp_Defer_0_Template(rf, ctx) { if (rf & 1) {');
+      expect(jsContents).toContain('i0.ɵɵdefer(1, 0, Cmp_Defer_1_DepsFn);');
+      expect(jsContents).toContain('ɵɵreplaceMetadata(Cmp, m.default, [i0], [Dep]));');
+      expect(jsContents).not.toContain('setClassMetadata');
+
+      expect(hmrContents).toContain(
+        'export default function Cmp_UpdateMetadata(Cmp, ɵɵnamespaces, Dep) {',
+      );
+      expect(hmrContents).toContain('const Cmp_Defer_1_DepsFn = () => [Dep];');
+      expect(hmrContents).toContain('function Cmp_Defer_0_Template(rf, ctx) {');
+      expect(hmrContents).toContain('ɵhmr0.ɵɵdefer(1, 0, Cmp_Defer_1_DepsFn);');
+      expect(hmrContents).not.toContain('import(');
+      expect(hmrContents).not.toContain('setClassMetadata');
+    });
+
     it('should not generate an HMR update function for a component that has errors', () => {
       enableHmr();
       env.write(
