fix(compiler-cli): symbol builder duplicating host directives (#61240)

The template symbol builder works by finding the variables referring to template AST nodes with specific offsets and resolving them to directives. Afterwards it goes through the directives and resolves their host directives.

The problem is that host directives are added with the exact same offsets as their host which means they get added once initially and again when resolving host directives.

These changes resolve the issue by de-duplicating them.

PR Close #61240

Author: crisbeto

packages/compiler-cli/src/ngtsc/typecheck/src/template_symbol_builder.ts

@@ -172,6 +172,7 @@ export class SymbolBuilder {
       filter: isDirectiveDeclaration,
     });
     const symbols: DirectiveSymbol[] = [];
+    const seenDirectives = new Set<ts.ClassDeclaration>();
 
     for (const node of nodes) {
       const symbol = this.getSymbolOfTsNode(node.parent);
@@ -183,13 +184,16 @@ export class SymbolBuilder {
         continue;
       }
 
-      const meta = this.getDirectiveMeta(element, symbol.tsSymbol.valueDeclaration);
+      const declaration = symbol.tsSymbol.valueDeclaration;
+      const meta = this.getDirectiveMeta(element, declaration);
 
-      if (meta !== null && meta.selector !== null) {
-        const ref = new Reference<ClassDeclaration>(symbol.tsSymbol.valueDeclaration as any);
+      // Host directives will be added as identifiers with the same offset as the host
+      // which means that they'll get added twice. De-duplicate them to avoid confusion.
+      if (meta !== null && !seenDirectives.has(declaration)) {
+        const ref = new Reference<ClassDeclaration>(declaration as ClassDeclaration);
 
         if (meta.hostDirectives !== null) {
-          this.addHostDirectiveSymbols(element, meta.hostDirectives, symbols);
+          this.addHostDirectiveSymbols(element, meta.hostDirectives, symbols, seenDirectives);
         }
 
         const directiveSymbol: DirectiveSymbol = {
@@ -198,14 +202,15 @@ export class SymbolBuilder {
           tsSymbol: symbol.tsSymbol,
           selector: meta.selector,
           isComponent: meta.isComponent,
-          ngModule: this.getDirectiveModule(symbol.tsSymbol.valueDeclaration),
+          ngModule: this.getDirectiveModule(declaration),
           kind: SymbolKind.Directive,
           isStructural: meta.isStructural,
           isInScope: true,
           isHostDirective: false,
         };
 
         symbols.push(directiveSymbol);
+        seenDirectives.add(declaration);
       }
     }
 
@@ -216,22 +221,25 @@ export class SymbolBuilder {
     host: TmplAstTemplate | TmplAstElement,
     hostDirectives: HostDirectiveMeta[],
     symbols: DirectiveSymbol[],
+    seenDirectives: Set<ts.ClassDeclaration>,
   ): void {
     for (const current of hostDirectives) {
       if (!isHostDirectiveMetaForGlobalMode(current)) {
         throw new Error('Impossible state: typecheck code path in local compilation mode.');
       }
 
-      if (!ts.isClassDeclaration(current.directive.node)) {
+      const node = current.directive.node;
+
+      if (!ts.isClassDeclaration(node) || seenDirectives.has(node)) {
         continue;
       }
 
-      const symbol = this.getSymbolOfTsNode(current.directive.node);
-      const meta = this.getDirectiveMeta(host, current.directive.node);
+      const symbol = this.getSymbolOfTsNode(node);
+      const meta = this.getDirectiveMeta(host, node);
 
       if (meta !== null && symbol !== null && isSymbolWithValueDeclaration(symbol.tsSymbol)) {
         if (meta.hostDirectives !== null) {
-          this.addHostDirectiveSymbols(host, meta.hostDirectives, symbols);
+          this.addHostDirectiveSymbols(host, meta.hostDirectives, symbols, seenDirectives);
         }
 
         const directiveSymbol: DirectiveSymbol = {
@@ -243,13 +251,14 @@ export class SymbolBuilder {
           exposedOutputs: current.outputs,
           selector: meta.selector,
           isComponent: meta.isComponent,
-          ngModule: this.getDirectiveModule(current.directive.node),
+          ngModule: this.getDirectiveModule(node),
           kind: SymbolKind.Directive,
           isStructural: meta.isStructural,
           isInScope: true,
         };
 
         symbols.push(directiveSymbol);
+        seenDirectives.add(node);
       }
     }
   }

packages/compiler-cli/src/ngtsc/typecheck/test/type_checker__get_symbol_of_template_node_spec.ts

@@ -56,6 +56,7 @@ import {
   setup as baseTestSetup,
   TypeCheckingTarget,
   createNgCompilerForFile,
+  TestDirective,
 } from '../testing';
 import {TsCreateProgramDriver} from '../../program_driver';
 import {findNodeInFile} from '../src/tcb_util';
@@ -2286,7 +2287,7 @@ runInEachFileSystem(() => {
               template: '<div *foo></div>',
             })
             class MyCmp {}
-          } 
+          }
         }
 
         if(true) {
@@ -2331,7 +2332,7 @@ runInEachFileSystem(() => {
               template: '<div *foo></div>',
             })
             class MyCmp {}
-          } 
+          }
         }
       `);
 
@@ -2350,6 +2351,66 @@ runInEachFileSystem(() => {
       expect(symbol.directives.length).toBe(1);
       expect(symbol.directives[0].selector).toBe('[foo]');
     });
+
+    it('should return the correct amount of directives when a host directive with a selector is applied', () => {
+      const fileName = absoluteFrom('/main.ts');
+      const depFile = absoluteFrom('/dep.ts');
+      const depHostFile = absoluteFrom('/dep-host.ts');
+      const depInnerHostFile = absoluteFrom('/dep-inner-host.ts');
+      const dep: TestDirective = {
+        name: 'Dep',
+        file: depFile,
+        selector: 'dep',
+        type: 'directive',
+        isStandalone: true,
+        isComponent: true,
+        hostDirectives: [
+          {
+            directive: {
+              name: 'DepHost',
+              file: depHostFile,
+              selector: 'dep-host', // <-- Note: this is necessary to hit the specific code path
+              type: 'directive',
+              isStandalone: true,
+              hostDirectives: [
+                {
+                  directive: {
+                    name: 'DepInnerHost',
+                    file: depInnerHostFile,
+                    selector: 'dep-inner-host', // <-- Note: this is necessary to hit the specific code path
+                    type: 'directive',
+                    isStandalone: true,
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+
+      const {program, templateTypeChecker} = setup([
+        {fileName, templates: {'Cmp': '<dep/>'}, declarations: [dep]},
+        {fileName: depFile, source: 'export class Dep {}', templates: {}},
+        {fileName: depHostFile, source: 'export class DepHost {}', templates: {}},
+        {fileName: depInnerHostFile, source: 'export class DepInnerHost {}', templates: {}},
+      ]);
+      const sf = getSourceFileOrError(program, fileName);
+      const cmp = getClass(sf, 'Cmp');
+      const nodes = templateTypeChecker.getTemplate(cmp)!;
+      const element = nodes[0] as TmplAstElement;
+      const symbol = templateTypeChecker.getSymbolOfNode(element, cmp)!;
+      assertElementSymbol(symbol);
+      expect(
+        symbol.directives.map((d) => ({
+          name: d.ref.node.name.text,
+          isHostDirective: d.isHostDirective,
+        })),
+      ).toEqual([
+        {name: 'DepInnerHost', isHostDirective: true},
+        {name: 'DepHost', isHostDirective: true},
+        {name: 'Dep', isHostDirective: false},
+      ]);
+    });
   });
 });