fix(ivy): include directive base class metadata when generating TCBs (#29698)

Previously the template type-checking code only considered the metadata of
directive classes actually referenced in the template. If those directives
had base classes, any inputs/outputs/etc of the base classes were not
tracked when generating the TCB. This resulted in bindings to those inputs
being incorrectly attributed to the host component or element.

This commit uses the new metadata package to follow directive inheritance
chains and use the full metadata for a directive for TCB generation.

Testing strategy: Template type-checking tests included.

PR Close #29698

packages/compiler-cli/src/ngtsc/annotations/src/component.ts

@@ -13,7 +13,8 @@ import * as ts from 'typescript';
 import {CycleAnalyzer} from '../../cycles';
 import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
 import {DefaultImportRecorder, ModuleResolver, Reference, ReferenceEmitter} from '../../imports';
-import {DirectiveMeta, MetadataRegistry, extractDirectiveGuards} from '../../metadata';
+import {DirectiveMeta, MetadataReader, MetadataRegistry, extractDirectiveGuards} from '../../metadata';
+import {flattenInheritedDirectiveMetadata} from '../../metadata/src/inheritance';
 import {EnumValue, PartialEvaluator} from '../../partial_evaluator';
 import {ClassDeclaration, Decorator, ReflectionHost, filterToMembersWithDecorator, reflectObjectLiteral} from '../../reflection';
 import {LocalModuleScopeRegistry} from '../../scope';
@@ -24,7 +25,7 @@ import {tsSourceMapBug29300Fixed} from '../../util/src/ts_source_map_bug_29300';
 import {ResourceLoader} from './api';
 import {extractDirectiveMetadata, extractQueriesFromDecorator, parseFieldArrayValue, queriesFromFields} from './directive';
 import {generateSetClassMetadataCall} from './metadata';
-import {findAngularDecorator, isAngularCoreReference, isExpressionForwardReference, unwrapExpression} from './util';
+import {findAngularDecorator, isAngularCoreReference, isExpressionForwardReference, readBaseClass, unwrapExpression} from './util';
 
 const EMPTY_MAP = new Map<string, Expression>();
 const EMPTY_ARRAY: any[] = [];
@@ -42,8 +43,9 @@ export class ComponentDecoratorHandler implements
     DecoratorHandler<ComponentHandlerData, Decorator> {
   constructor(
       private reflector: ReflectionHost, private evaluator: PartialEvaluator,
-      private metaRegistry: MetadataRegistry, private scopeRegistry: LocalModuleScopeRegistry,
-      private isCore: boolean, private resourceLoader: ResourceLoader, private rootDirs: string[],
+      private metaRegistry: MetadataRegistry, private metaReader: MetadataReader,
+      private scopeRegistry: LocalModuleScopeRegistry, private isCore: boolean,
+      private resourceLoader: ResourceLoader, private rootDirs: string[],
       private defaultPreserveWhitespaces: boolean, private i18nUseExternalIds: boolean,
       private moduleResolver: ModuleResolver, private cycleAnalyzer: CycleAnalyzer,
       private refEmitter: ReferenceEmitter, private defaultImportRecorder: DefaultImportRecorder) {}
@@ -221,7 +223,7 @@ export class ComponentDecoratorHandler implements
         outputs: metadata.outputs,
         queries: metadata.queries.map(query => query.propertyName),
         isComponent: true, ...extractDirectiveGuards(node, this.reflector),
-        baseClass: null,
+        baseClass: readBaseClass(node, this.reflector, this.evaluator),
       });
     }
 
@@ -307,7 +309,8 @@ export class ComponentDecoratorHandler implements
     const matcher = new SelectorMatcher<DirectiveMeta>();
     if (scope !== null) {
       for (const meta of scope.compilation.directives) {
-        matcher.addSelectables(CssSelector.parse(meta.selector), meta);
+        const extMeta = flattenInheritedDirectiveMetadata(this.metaReader, meta.ref);
+        matcher.addSelectables(CssSelector.parse(meta.selector), extMeta);
       }
       const bound = new R3TargetBinder(matcher).bind({template: meta.parsedTemplate});
       ctx.addTemplate(node, bound);

packages/compiler-cli/src/ngtsc/annotations/src/directive.ts

@@ -19,7 +19,7 @@ import {LocalModuleScopeRegistry} from '../../scope/src/local';
 import {AnalysisOutput, CompileResult, DecoratorHandler, DetectResult, HandlerPrecedence} from '../../transform';
 
 import {generateSetClassMetadataCall} from './metadata';
-import {findAngularDecorator, getValidConstructorDependencies, unwrapExpression, unwrapForwardRef} from './util';
+import {findAngularDecorator, getValidConstructorDependencies, readBaseClass, unwrapExpression, unwrapForwardRef} from './util';
 
 const EMPTY_OBJECT: {[key: string]: string} = {};
 
@@ -69,7 +69,7 @@ export class DirectiveDecoratorHandler implements
         outputs: analysis.outputs,
         queries: analysis.queries.map(query => query.propertyName),
         isComponent: false, ...extractDirectiveGuards(node, this.reflector),
-        baseClass: null,
+        baseClass: readBaseClass(node, this.reflector, this.evaluator),
       });
     }
 

packages/compiler-cli/src/ngtsc/annotations/src/util.ts

@@ -11,8 +11,8 @@ import * as ts from 'typescript';
 
 import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
 import {DefaultImportRecorder, ImportMode, Reference, ReferenceEmitter} from '../../imports';
-import {ForeignFunctionResolver} from '../../partial_evaluator';
-import {ClassDeclaration, CtorParameter, Decorator, Import, ReflectionHost, TypeValueReference} from '../../reflection';
+import {ForeignFunctionResolver, PartialEvaluator} from '../../partial_evaluator';
+import {ClassDeclaration, CtorParameter, Decorator, Import, ReflectionHost, TypeValueReference, isNamedClassDeclaration} from '../../reflection';
 
 export enum ConstructorDepErrorKind {
   NO_SUITABLE_TOKEN,
@@ -294,3 +294,28 @@ export function isExpressionForwardReference(
 export function isWrappedTsNodeExpr(expr: Expression): expr is WrappedNodeExpr<ts.Node> {
   return expr instanceof WrappedNodeExpr;
 }
+
+export function readBaseClass(
+    node: ClassDeclaration, reflector: ReflectionHost,
+    evaluator: PartialEvaluator): Reference<ClassDeclaration>|'dynamic'|null {
+  if (!isNamedClassDeclaration(node)) {
+    // If the node isn't a ts.ClassDeclaration, consider any base class to be dynamic for now.
+    return reflector.hasBaseClass(node) ? 'dynamic' : null;
+  }
+
+  if (node.heritageClauses !== undefined) {
+    for (const clause of node.heritageClauses) {
+      if (clause.token === ts.SyntaxKind.ExtendsKeyword) {
+        // The class has a base class. Figure out whether it's resolvable or not.
+        const baseClass = evaluator.evaluate(clause.types[0].expression);
+        if (baseClass instanceof Reference && isNamedClassDeclaration(baseClass.node)) {
+          return baseClass as Reference<ClassDeclaration>;
+        } else {
+          return 'dynamic';
+        }
+      }
+    }
+  }
+
+  return null;
+}

packages/compiler-cli/src/ngtsc/annotations/test/component_spec.ts

@@ -11,7 +11,7 @@ import * as ts from 'typescript';
 import {CycleAnalyzer, ImportGraph} from '../../cycles';
 import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
 import {ModuleResolver, NOOP_DEFAULT_IMPORT_RECORDER, ReferenceEmitter} from '../../imports';
-import {DtsMetadataReader, LocalMetadataRegistry} from '../../metadata';
+import {CompoundMetadataReader, DtsMetadataReader, LocalMetadataRegistry} from '../../metadata';
 import {PartialEvaluator} from '../../partial_evaluator';
 import {TypeScriptReflectionHost, isNamedClassDeclaration} from '../../reflection';
 import {LocalModuleScopeRegistry, MetadataDtsModuleScopeResolver} from '../../scope';
@@ -54,11 +54,13 @@ describe('ComponentDecoratorHandler', () => {
     const scopeRegistry = new LocalModuleScopeRegistry(
         metaRegistry, new MetadataDtsModuleScopeResolver(dtsReader, null), new ReferenceEmitter([]),
         null);
+    const metaReader = new CompoundMetadataReader([metaRegistry, dtsReader]);
     const refEmitter = new ReferenceEmitter([]);
 
     const handler = new ComponentDecoratorHandler(
-        reflectionHost, evaluator, metaRegistry, scopeRegistry, false, new NoopResourceLoader(),
-        [''], false, true, moduleResolver, cycleAnalyzer, refEmitter, NOOP_DEFAULT_IMPORT_RECORDER);
+        reflectionHost, evaluator, metaRegistry, metaReader, scopeRegistry, false,
+        new NoopResourceLoader(), [''], false, true, moduleResolver, cycleAnalyzer, refEmitter,
+        NOOP_DEFAULT_IMPORT_RECORDER);
     const TestCmp = getDeclaration(program, 'entry.ts', 'TestCmp', isNamedClassDeclaration);
     const detected = handler.detect(TestCmp, reflectionHost.getDecoratorsOfDeclaration(TestCmp));
     if (detected === undefined) {