fix(core): capture self-referencing component during HMR (#59644)

Fixes that we were filtering out the component itself from the set of dependencies when HMR is enabled, breaking self-referencing components. Fixes #59632. PR Close #59644
angular · Jan 21, 2025 · 408af24 · 408af24
1 parent d7575c2
commit 408af24
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -1229,6 +1229,11 @@ export class ComponentDecoratorHandler
         for (const dep of dependencies) {
           if (dep.ref.node !== node) {
             eagerlyUsed.add(dep.ref.node);
+          } else {
+            const used = bound.getEagerlyUsedDirectives();
+            if (used.some((current) => current.ref.node === node)) {
+              eagerlyUsed.add(node);
+            }
           }
         }
       } else {

diff --git a/packages/compiler-cli/test/ngtsc/hmr_spec.ts b/packages/compiler-cli/test/ngtsc/hmr_spec.ts
@@ -405,6 +405,52 @@ runInEachFileSystem(() => {
       expect(hmrContents).toBe(null);
     });
 
+    it('should capture self-referencing component during HMR', () => {
+      enableHmr();
+      env.write(
+        'test.ts',
+        `
+          import {Component} from '@angular/core';
+
+          @Component({selector: 'cmp', template: '<cmp/>',})
+          export class Cmp {}
+        `,
+      );
+
+      env.driveMain();
+
+      const jsContents = env.getContents('test.js');
+      const hmrContents = env.driveHmr('test.ts', 'Cmp');
+      expect(jsContents).toContain('dependencies: [Cmp]');
+      expect(jsContents).toContain('ɵɵreplaceMetadata(Cmp, m.default, [i0], [Component]));');
+      expect(hmrContents).toContain(
+        'export default function Cmp_UpdateMetadata(Cmp, ɵɵnamespaces, Component) {',
+      );
+    });
+
+    it('should capture component in its own dependencies if it is not used in the template', () => {
+      enableHmr();
+      env.write(
+        'test.ts',
+        `
+          import {Component} from '@angular/core';
+
+          @Component({selector: 'cmp', template: ''})
+          export class Cmp {}
+        `,
+      );
+
+      env.driveMain();
+
+      const jsContents = env.getContents('test.js');
+      const hmrContents = env.driveHmr('test.ts', 'Cmp');
+      expect(jsContents).not.toContain('dependencies');
+      expect(jsContents).toContain('ɵɵreplaceMetadata(Cmp, m.default, [i0], [Component]));');
+      expect(hmrContents).toContain(
+        'export default function Cmp_UpdateMetadata(Cmp, ɵɵnamespaces, Component) {',
+      );
+    });
+
     it('should capture shorthand property assignment dependencies', () => {
       enableHmr();
       env.write(