fix(compiler-cli): defer symbols only used in types (angular#58104)

Currently we don't defer any symbols that have references outside of the `import` statement and the `imports` array. This is a bit too aggressive, because it's possible that the symbol is only used for types (e.g. `viewChild<SomeCmp>('ref')`) which will be stripped when emitting to JS.

These changes expand the logic so that references inside type nodes aren't considered.

**Note:** one special case is when the symbol used in constructor-based DI (e.g. `constructor(someCmp: SomeCmp)`, because these constructors will be compiled to `directiveInject` calls. We don't need to worry about them, because the compiler introduces an addition `import * as i1 from './some-cmp';` import that it uses to refer to the symbol.

Fixes angular#55991.

PR Close angular#58104

Author: crisbeto

packages/compiler-cli/src/ngtsc/imports/src/deferred_symbol_tracker.ts

@@ -171,7 +171,7 @@ export class DeferredSymbolTracker {
     }
 
     const symbolsMap = this.imports.get(importDecl)!;
-    for (const [symbol, refs] of symbolsMap) {
+    for (const refs of symbolsMap.values()) {
       if (refs === AssumeEager || refs.size > 0) {
         // There may be still eager references to this symbol.
         return false;
@@ -201,8 +201,9 @@ export class DeferredSymbolTracker {
   ): Set<ts.Identifier> {
     const results = new Set<ts.Identifier>();
     const visit = (node: ts.Node): void => {
-      if (node === importDecl) {
-        // Don't record references from the declaration itself.
+      // Don't record references from the declaration itself or inside
+      // type nodes which will be stripped from the JS output.
+      if (node === importDecl || ts.isTypeNode(node)) {
         return;
       }
 

packages/compiler-cli/test/ngtsc/defer_spec.ts

@@ -79,12 +79,10 @@ runInEachFileSystem(() => {
       expect(jsContents).not.toContain('import { CmpA }');
     });
 
-    it(
-      'should include timer scheduler function when ' + '`after` or `minimum` parameters are used',
-      () => {
-        env.write(
-          'cmp-a.ts',
-          `
+    it('should include timer scheduler function when `after` or `minimum` parameters are used', () => {
+      env.write(
+        'cmp-a.ts',
+        `
           import { Component } from '@angular/core';
 
           @Component({
@@ -94,38 +92,37 @@ runInEachFileSystem(() => {
           })
           export class CmpA {}
         `,
-        );
+      );
 
-        env.write(
-          '/test.ts',
-          `
-            import { Component } from '@angular/core';
-            import { CmpA } from './cmp-a';
+      env.write(
+        '/test.ts',
+        `
+          import { Component } from '@angular/core';
+          import { CmpA } from './cmp-a';
 
-            @Component({
-              selector: 'test-cmp',
-              standalone: true,
-              imports: [CmpA],
-              template: \`
-                @defer {
-                  <cmp-a />
-                } @loading (after 500ms; minimum 300ms) {
-                  Loading...
-                }
-              \`,
-            })
-            export class TestCmp {}
-          `,
-        );
+          @Component({
+            selector: 'test-cmp',
+            standalone: true,
+            imports: [CmpA],
+            template: \`
+              @defer {
+                <cmp-a />
+              } @loading (after 500ms; minimum 300ms) {
+                Loading...
+              }
+            \`,
+          })
+          export class TestCmp {}
+        `,
+      );
 
-        env.driveMain();
+      env.driveMain();
 
-        const jsContents = env.getContents('test.js');
-        expect(jsContents).toContain(
-          'ɵɵdefer(2, 0, TestCmp_Defer_2_DepsFn, 1, null, null, 0, null, i0.ɵɵdeferEnableTimerScheduling)',
-        );
-      },
-    );
+      const jsContents = env.getContents('test.js');
+      expect(jsContents).toContain(
+        'ɵɵdefer(2, 0, TestCmp_Defer_2_DepsFn, 1, null, null, 0, null, i0.ɵɵdeferEnableTimerScheduling)',
+      );
+    });
 
     describe('imports', () => {
       it('should retain regular imports when symbol is eagerly referenced', () => {
@@ -652,6 +649,112 @@ runInEachFileSystem(() => {
         // via dynamic imports and an original import can be removed.
         expect(jsContents).not.toContain('import CmpA');
       });
+
+      it('should defer symbol that is used only in types', () => {
+        env.write(
+          'cmp.ts',
+          `
+          import { Component } from '@angular/core';
+
+          @Component({
+            standalone: true,
+            selector: 'cmp',
+            template: 'Cmp!'
+          })
+          export class Cmp {}
+        `,
+        );
+
+        env.write(
+          '/test.ts',
+          `
+          import { Component, viewChild } from '@angular/core';
+          import { Cmp } from './cmp';
+
+          const topLevelConst: Cmp = null!;
+
+          @Component({
+            standalone: true,
+            imports: [Cmp],
+            template: \`
+              @defer {
+                <cmp #ref/>
+              }
+            \`,
+          })
+          export class TestCmp {
+            query = viewChild<Cmp>('ref');
+            asType: Cmp;
+            inlineType: {foo: Cmp};
+            unionType: string | Cmp | number;
+            constructor(param: Cmp) {}
+            inMethod(param: Cmp): Cmp {
+              let localVar: Cmp | null = null;
+              return localVar!;
+            }
+          }
+
+          function inFunction(param: Cmp): Cmp {
+            return null!;
+          }
+        `,
+        );
+
+        env.driveMain();
+
+        const jsContents = env.getContents('test.js');
+        expect(jsContents).toContain('ɵɵdefer(1, 0, TestCmp_Defer_1_DepsFn)');
+        expect(jsContents).toContain('() => [import("./cmp").then(m => m.Cmp)]');
+        expect(jsContents).not.toContain('import { Cmp }');
+      });
+
+      it('should retain symbols used in types and eagerly', () => {
+        env.write(
+          'cmp.ts',
+          `
+          import { Component } from '@angular/core';
+
+          @Component({
+            standalone: true,
+            selector: 'cmp',
+            template: 'Cmp!'
+          })
+          export class Cmp {}
+        `,
+        );
+
+        env.write(
+          '/test.ts',
+          `
+          import { Component, viewChild } from '@angular/core';
+          import { Cmp } from './cmp';
+
+          @Component({
+            standalone: true,
+            imports: [Cmp],
+            template: \`
+              @defer {
+                <cmp #ref/>
+              }
+            \`,
+          })
+          export class TestCmp {
+            // Type-only reference
+            query = viewChild<Cmp>('ref');
+
+            // Directy reference
+            otherQuery = viewChild(Cmp);
+          }
+        `,
+        );
+
+        env.driveMain();
+
+        const jsContents = env.getContents('test.js');
+        expect(jsContents).toContain('ɵɵdefer(1, 0, TestCmp_Defer_1_DepsFn)');
+        expect(jsContents).toContain('() => [Cmp]');
+        expect(jsContents).toContain('import { Cmp }');
+      });
     });
 
     it('should detect pipe used in the `when` trigger as an eager dependency', () => {