fix(compiler-cli): correctly type check host listeners to own outputs (#62965)

crisbeto · crisbeto · commit 3b2e8efcacc5 · 2025-08-05T10:04:26.000+02:00
Currently the code that type checks host bindings assumes that all listeners are bound to the DOM, however that's not the case since host bindings can also bind to own outputs. These changes update the TCB to generate the proper code for type checking such outputs. Fixes #62783. PR Close #62965
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -1116,7 +1116,8 @@ export class ComponentDecoratorHandler
     if (!ts.isClassDeclaration(node) || (meta.isPoisoned && !this.usePoisonedData)) {
       return;
     }
-    const scope = this.typeCheckScopeRegistry.getTypeCheckScope(node);
+    const ref = new Reference(node);
+    const scope = this.typeCheckScopeRegistry.getTypeCheckScope(ref);
     if (scope.isPoisoned && !this.usePoisonedData) {
       // Don't type-check components that had errors in their scopes, unless requested.
       return;
@@ -1143,15 +1144,16 @@ export class ComponentDecoratorHandler
         )
       : null;
     const hostBindingsContext: HostBindingsContext | null =
-      hostElement === null
+      hostElement === null || scope.directivesOnHost === null
         ? null
         : {
             node: hostElement,
+            directives: scope.directivesOnHost,
             sourceMapping: {type: 'direct', node},
           };
 
     ctx.addDirective(
-      new Reference(node),
+      ref,
       binder,
       scope.schemas,
       templateContext,
diff --git a/packages/compiler-cli/src/ngtsc/annotations/directive/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/directive/src/handler.ts
@@ -331,7 +331,8 @@ export class DirectiveDecoratorHandler
     if (!ts.isClassDeclaration(node) || (meta.isPoisoned && !this.usePoisonedData)) {
       return;
     }
-    const scope = this.typeCheckScopeRegistry.getTypeCheckScope(node);
+    const ref = new Reference(node);
+    const scope = this.typeCheckScopeRegistry.getTypeCheckScope(ref);
     if (scope.isPoisoned && !this.usePoisonedData) {
       // Don't type-check components that had errors in their scopes, unless requested.
       return;
@@ -346,15 +347,16 @@ export class DirectiveDecoratorHandler
       meta.hostBindingNodes.listenerDecorators,
     );
 
-    if (hostElement !== null) {
+    if (hostElement !== null && scope.directivesOnHost !== null) {
       const binder = new R3TargetBinder<TypeCheckableDirectiveMeta>(scope.matcher);
       const hostBindingsContext: HostBindingsContext = {
         node: hostElement,
+        directives: scope.directivesOnHost,
         sourceMapping: {type: 'direct', node},
       };
 
       ctx.addDirective(
-        new Reference(node),
+        ref,
         binder,
         scope.schemas,
         null,
diff --git a/packages/compiler-cli/src/ngtsc/scope/src/typecheck.ts b/packages/compiler-cli/src/ngtsc/scope/src/typecheck.ts
@@ -57,6 +57,11 @@ export interface TypeCheckScope {
    * (contained semantic errors during its production).
    */
   isPoisoned: boolean;
+
+  /**
+   * Directives that have been set on the host of the scope.
+   */
+  directivesOnHost: DirectiveMeta[] | null;
 }
 
 /**
@@ -85,10 +90,12 @@ export class TypeCheckScopeRegistry {
    * contains an error, then 'error' is returned. If the component is not declared in any NgModule,
    * an empty type-check scope is returned.
    */
-  getTypeCheckScope(node: ClassDeclaration): TypeCheckScope {
+  getTypeCheckScope(ref: Reference<ClassDeclaration>): TypeCheckScope {
     const directives: DirectiveMeta[] = [];
     const pipes = new Map<string, PipeMeta>();
-    const scope = this.scopeReader.getScopeForComponent(node);
+    const scope = this.scopeReader.getScopeForComponent(ref.node);
+    const hostMeta = this.getTypeCheckDirectiveMetadata(ref);
+    const directivesOnHost = hostMeta === null ? null : this.combineWithHostDirectives(hostMeta);
 
     if (scope === null) {
       return {
@@ -97,6 +104,7 @@ export class TypeCheckScopeRegistry {
         pipes,
         schemas: [],
         isPoisoned: false,
+        directivesOnHost,
       };
     }
 
@@ -149,11 +157,13 @@ export class TypeCheckScopeRegistry {
       directives,
       pipes,
       schemas: scope.schemas,
+      directivesOnHost,
       isPoisoned:
         scope.kind === ComponentScopeKind.NgModule
           ? scope.compilation.isPoisoned || scope.exported.isPoisoned
           : scope.isPoisoned,
     };
+
     this.scopeCache.set(cacheKey, typeCheckScope);
     return typeCheckScope;
   }
@@ -193,10 +203,10 @@ export class TypeCheckScopeRegistry {
 
         // Carry over the `isExplicitlyDeferred` flag from the dependency info.
         const directiveMeta = this.applyExplicitlyDeferredFlag(extMeta, meta.isExplicitlyDeferred);
-        matcher.addSelectables(CssSelector.parse(meta.selector), [
-          ...this.hostDirectivesResolver.resolve(directiveMeta),
-          directiveMeta,
-        ]);
+        matcher.addSelectables(
+          CssSelector.parse(meta.selector),
+          this.combineWithHostDirectives(directiveMeta),
+        );
       }
     }
 
@@ -210,10 +220,14 @@ export class TypeCheckScopeRegistry {
       const extMeta =
         dep.kind === MetaKind.Directive ? this.getTypeCheckDirectiveMetadata(dep.ref) : null;
       if (extMeta !== null) {
-        registry.set(name, [extMeta, ...this.hostDirectivesResolver.resolve(extMeta)]);
+        registry.set(name, this.combineWithHostDirectives(extMeta));
       }
     }
 
     return new SelectorlessMatcher(registry);
   }
+
+  private combineWithHostDirectives(meta: DirectiveMeta): DirectiveMeta[] {
+    return [...this.hostDirectivesResolver.resolve(meta), meta];
+  }
 }
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/api/context.ts b/packages/compiler-cli/src/ngtsc/typecheck/api/context.ts
@@ -17,7 +17,7 @@ import {
 import ts from 'typescript';
 
 import {Reference} from '../../imports';
-import {PipeMeta} from '../../metadata';
+import {DirectiveMeta, PipeMeta} from '../../metadata';
 import {ClassDeclaration} from '../../reflection';
 
 import {SourceMapping, TypeCheckableDirectiveMeta} from './api';
@@ -48,6 +48,9 @@ export interface HostBindingsContext {
   /** AST node representing the host element of the directive. */
   node: TmplAstHostElement;
 
+  /** Directives present on the host element. */
+  directives: DirectiveMeta[];
+
   /** Describes the source of the host bindings. Used for mapping errors back. */
   sourceMapping: SourceMapping;
 }
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/context.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/context.ts
@@ -259,7 +259,13 @@ export class TypeCheckContextImpl implements TypeCheckContext {
 
     const boundTarget = binder.bind({
       template: templateContext?.nodes,
-      host: hostBindingContext?.node,
+      host:
+        hostBindingContext === null
+          ? undefined
+          : {
+              node: hostBindingContext.node,
+              directives: hostBindingContext.directives,
+            },
     });
 
     if (this.inlining === InliningMode.InlineOps) {
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
diff --git a/packages/compiler-cli/test/ngtsc/host_bindings_type_check_spec.ts b/packages/compiler-cli/test/ngtsc/host_bindings_type_check_spec.ts
