fix(ivy): support abstract directives in template type checking

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

@@ -216,24 +216,20 @@ export class ComponentDecoratorHandler implements
           `Errors parsing template: ${template.errors.map(e => e.toString()).join(', ')}`);
     }
 
-    // If the component has a selector, it should be registered with the
-    // `LocalModuleScopeRegistry`
-    // so that when this component appears in an `@NgModule` scope, its selector can be
-    // determined.
-    if (metadata.selector !== null) {
-      const ref = new Reference(node);
-      this.metaRegistry.registerDirectiveMetadata({
-        ref,
-        name: node.name.text,
-        selector: metadata.selector,
-        exportAs: metadata.exportAs,
-        inputs: metadata.inputs,
-        outputs: metadata.outputs,
-        queries: metadata.queries.map(query => query.propertyName),
-        isComponent: true, ...extractDirectiveGuards(node, this.reflector),
-        baseClass: readBaseClass(node, this.reflector, this.evaluator),
-      });
-    }
+    // Register this component's information with the `MetadataRegistry`. This ensures that
+    // the information about the component is available during the compile() phase.
+    const ref = new Reference(node);
+    this.metaRegistry.registerDirectiveMetadata({
+      ref,
+      name: node.name.text,
+      selector: metadata.selector,
+      exportAs: metadata.exportAs,
+      inputs: metadata.inputs,
+      outputs: metadata.outputs,
+      queries: metadata.queries.map(query => query.propertyName),
+      isComponent: true, ...extractDirectiveGuards(node, this.reflector),
+      baseClass: readBaseClass(node, this.reflector, this.evaluator),
+    });
 
     // Figure out the set of styles. The ordering here is important: external resources (styleUrls)
     // precede inline styles, and styles defined in the template override styles defined in the
@@ -325,7 +321,9 @@ export class ComponentDecoratorHandler implements
     const matcher = new SelectorMatcher<DirectiveMeta>();
     if (scope !== null) {
       for (const directive of scope.compilation.directives) {
-        matcher.addSelectables(CssSelector.parse(directive.selector), directive);
+        if (directive.selector !== null) {
+          matcher.addSelectables(CssSelector.parse(directive.selector), directive);
+        }
       }
     }
     const binder = new R3TargetBinder(matcher);
@@ -368,8 +366,10 @@ export class ComponentDecoratorHandler implements
     const scope = this.scopeReader.getScopeForComponent(node);
     if (scope !== null) {
       for (const meta of scope.compilation.directives) {
-        const extMeta = flattenInheritedDirectiveMetadata(this.metaReader, meta.ref);
-        matcher.addSelectables(CssSelector.parse(meta.selector), extMeta);
+        if (meta.selector !== null) {
+          const extMeta = flattenInheritedDirectiveMetadata(this.metaReader, meta.ref);
+          matcher.addSelectables(CssSelector.parse(meta.selector), extMeta);
+        }
       }
       for (const {name, ref} of scope.compilation.pipes) {
         if (!ts.isClassDeclaration(ref.node)) {
@@ -422,9 +422,11 @@ export class ComponentDecoratorHandler implements
 
       for (const dir of scope.compilation.directives) {
         const {ref, selector} = dir;
-        const expression = this.refEmitter.emit(ref, context);
-        directives.push({selector, expression});
-        matcher.addSelectables(CssSelector.parse(selector), {...dir, expression});
+        if (selector !== null) {
+          const expression = this.refEmitter.emit(ref, context);
+          directives.push({selector, expression});
+          matcher.addSelectables(CssSelector.parse(selector), {...dir, expression});
+        }
       }
       const pipes = new Map<string, Expression>();
       for (const pipe of scope.compilation.pipes) {

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

@@ -55,32 +55,25 @@ export class DirectiveDecoratorHandler implements
     const directiveResult = extractDirectiveMetadata(
         node, decorator, this.reflector, this.evaluator, this.defaultImportRecorder, this.isCore);
     const analysis = directiveResult && directiveResult.metadata;
-
-    // If the directive has a selector, it should be registered with the `SelectorScopeRegistry` so
-    // when this directive appears in an `@NgModule` scope, its selector can be determined.
-    if (analysis && analysis.selector !== null) {
-      const ref = new Reference(node);
-      this.metaRegistry.registerDirectiveMetadata({
-        ref,
-        name: node.name.text,
-        selector: analysis.selector,
-        exportAs: analysis.exportAs,
-        inputs: analysis.inputs,
-        outputs: analysis.outputs,
-        queries: analysis.queries.map(query => query.propertyName),
-        isComponent: false, ...extractDirectiveGuards(node, this.reflector),
-        baseClass: readBaseClass(node, this.reflector, this.evaluator),
-      });
-    }
-
-    if (analysis && !analysis.selector) {
-      this.metaRegistry.registerAbstractDirective(node);
-    }
-
     if (analysis === undefined) {
       return {};
     }
 
+    // Register this directive's information with the `MetadataRegistry`. This ensures that
+    // the information about the directive is available during the compile() phase.
+    const ref = new Reference(node);
+    this.metaRegistry.registerDirectiveMetadata({
+      ref,
+      name: node.name.text,
+      selector: analysis.selector,
+      exportAs: analysis.exportAs,
+      inputs: analysis.inputs,
+      outputs: analysis.outputs,
+      queries: analysis.queries.map(query => query.propertyName),
+      isComponent: false, ...extractDirectiveGuards(node, this.reflector),
+      baseClass: readBaseClass(node, this.reflector, this.evaluator),
+    });
+
     return {
       analysis: {
         meta: analysis,

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

@@ -262,7 +262,9 @@ export class NgModuleDecoratorHandler implements DecoratorHandler<NgModuleAnalys
       }
 
       for (const decl of analysis.declarations) {
-        if (this.metaReader.isAbstractDirective(decl)) {
+        const metadata = this.metaReader.getDirectiveMetadata(decl);
+
+        if (metadata !== null && metadata.selector === null) {
           throw new FatalDiagnosticError(
               ErrorCode.DIRECTIVE_MISSING_SELECTOR, decl.node,
               `Directive ${decl.node.name.text} has no selector, please add it!`);

packages/compiler-cli/src/ngtsc/incremental/src/state.ts

@@ -93,19 +93,6 @@ export class IncrementalState implements DependencyTracker, MetadataReader, Meta
     metadata.ngModuleMeta.set(meta.ref.node, meta);
   }
 
-  isAbstractDirective(ref: Reference<ClassDeclaration>): boolean {
-    if (!this.metadata.has(ref.node.getSourceFile())) {
-      return false;
-    }
-    const metadata = this.metadata.get(ref.node.getSourceFile()) !;
-    return metadata.abstractDirectives.has(ref.node);
-  }
-
-  registerAbstractDirective(clazz: ClassDeclaration): void {
-    const metadata = this.ensureMetadata(clazz.getSourceFile());
-    metadata.abstractDirectives.add(clazz);
-  }
-
   getDirectiveMetadata(ref: Reference<ClassDeclaration>): DirectiveMeta|null {
     if (!this.metadata.has(ref.node.getSourceFile())) {
       return null;
@@ -200,7 +187,6 @@ class FileMetadata {
   /** A set of source files that this file depends upon. */
   fileDependencies = new Set<ts.SourceFile>();
   resourcePaths = new Set<string>();
-  abstractDirectives = new Set<ClassDeclaration>();
   directiveMeta = new Map<ClassDeclaration, DirectiveMeta>();
   ngModuleMeta = new Map<ClassDeclaration, NgModuleMeta>();
   pipeMeta = new Map<ClassDeclaration, PipeMeta>();

packages/compiler-cli/src/ngtsc/indexer/src/context.ts

@@ -13,9 +13,9 @@ import {ClassDeclaration} from '../../reflection';
 export interface ComponentMeta extends DirectiveMeta {
   ref: Reference<ClassDeclaration>;
   /**
-   * Unparsed selector of the directive.
+   * Unparsed selector of the directive, or null if the directive does not have a selector.
    */
-  selector: string;
+  selector: string|null;
 }
 
 /**

packages/compiler-cli/src/ngtsc/metadata/src/api.ts

@@ -28,9 +28,9 @@ export interface NgModuleMeta {
 export interface DirectiveMeta extends T2DirectiveMeta {
   ref: Reference<ClassDeclaration>;
   /**
-   * Unparsed selector of the directive.
+   * Unparsed selector of the directive, or null if the directive does not have a selector.
    */
-  selector: string;
+  selector: string|null;
   queries: string[];
   ngTemplateGuards: TemplateGuardMeta[];
   hasNgTemplateContextGuard: boolean;
@@ -76,7 +76,6 @@ export interface PipeMeta {
  * or a registry.
  */
 export interface MetadataReader {
-  isAbstractDirective(node: Reference<ClassDeclaration>): boolean;
   getDirectiveMetadata(node: Reference<ClassDeclaration>): DirectiveMeta|null;
   getNgModuleMetadata(node: Reference<ClassDeclaration>): NgModuleMeta|null;
   getPipeMetadata(node: Reference<ClassDeclaration>): PipeMeta|null;
@@ -86,7 +85,6 @@ export interface MetadataReader {
  * Registers new metadata for directives, pipes, and modules.
  */
 export interface MetadataRegistry {
-  registerAbstractDirective(clazz: ClassDeclaration): void;
   registerDirectiveMetadata(meta: DirectiveMeta): void;
   registerNgModuleMetadata(meta: NgModuleMeta): void;
   registerPipeMetadata(meta: PipeMeta): void;

packages/compiler-cli/src/ngtsc/metadata/src/dts.ts

@@ -21,11 +21,6 @@ import {extractDirectiveGuards, extractReferencesFromType, readStringArrayType,
 export class DtsMetadataReader implements MetadataReader {
   constructor(private checker: ts.TypeChecker, private reflector: ReflectionHost) {}
 
-  isAbstractDirective(ref: Reference<ClassDeclaration>): boolean {
-    const meta = this.getDirectiveMetadata(ref);
-    return meta !== null && meta.selector === null;
-  }
-
   /**
    * Read the metadata from a class that has already been compiled somehow (either it's in a .d.ts
    * file, or in a .ts file with a handwritten definition).
@@ -79,15 +74,12 @@ export class DtsMetadataReader implements MetadataReader {
       // The type metadata was the wrong shape.
       return null;
     }
-    const selector = readStringType(def.type.typeArguments[1]);
-    if (selector === null) {
-      return null;
-    }
 
     return {
       ref,
       name: clazz.name.text,
-      isComponent: def.name === 'ɵcmp', selector,
+      isComponent: def.name === 'ɵcmp',
+      selector: readStringType(def.type.typeArguments[1]),
       exportAs: readStringArrayType(def.type.typeArguments[2]),
       inputs: readStringMapType(def.type.typeArguments[3]),
       outputs: readStringMapType(def.type.typeArguments[4]),

packages/compiler-cli/src/ngtsc/metadata/src/registry.ts

@@ -16,14 +16,10 @@ import {DirectiveMeta, MetadataReader, MetadataRegistry, NgModuleMeta, PipeMeta}
  * unit, which supports both reading and registering.
  */
 export class LocalMetadataRegistry implements MetadataRegistry, MetadataReader {
-  private abstractDirectives = new Set<ClassDeclaration>();
   private directives = new Map<ClassDeclaration, DirectiveMeta>();
   private ngModules = new Map<ClassDeclaration, NgModuleMeta>();
   private pipes = new Map<ClassDeclaration, PipeMeta>();
 
-  isAbstractDirective(ref: Reference<ClassDeclaration>): boolean {
-    return this.abstractDirectives.has(ref.node);
-  }
   getDirectiveMetadata(ref: Reference<ClassDeclaration>): DirectiveMeta|null {
     return this.directives.has(ref.node) ? this.directives.get(ref.node) ! : null;
   }
@@ -34,7 +30,6 @@ export class LocalMetadataRegistry implements MetadataRegistry, MetadataReader {
     return this.pipes.has(ref.node) ? this.pipes.get(ref.node) ! : null;
   }
 
-  registerAbstractDirective(clazz: ClassDeclaration): void { this.abstractDirectives.add(clazz); }
   registerDirectiveMetadata(meta: DirectiveMeta): void { this.directives.set(meta.ref.node, meta); }
   registerNgModuleMetadata(meta: NgModuleMeta): void { this.ngModules.set(meta.ref.node, meta); }
   registerPipeMetadata(meta: PipeMeta): void { this.pipes.set(meta.ref.node, meta); }
@@ -46,12 +41,6 @@ export class LocalMetadataRegistry implements MetadataRegistry, MetadataReader {
 export class CompoundMetadataRegistry implements MetadataRegistry {
   constructor(private registries: MetadataRegistry[]) {}
 
-  registerAbstractDirective(clazz: ClassDeclaration) {
-    for (const registry of this.registries) {
-      registry.registerAbstractDirective(clazz);
-    }
-  }
-
   registerDirectiveMetadata(meta: DirectiveMeta): void {
     for (const registry of this.registries) {
       registry.registerDirectiveMetadata(meta);

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

@@ -125,10 +125,6 @@ function extractTemplateGuard(member: ClassMember): TemplateGuardMeta|null {
 export class CompoundMetadataReader implements MetadataReader {
   constructor(private readers: MetadataReader[]) {}
 
-  isAbstractDirective(node: Reference<ClassDeclaration>): boolean {
-    return this.readers.some(r => r.isAbstractDirective(node));
-  }
-
   getDirectiveMetadata(node: Reference<ClassDeclaration<ts.Declaration>>): DirectiveMeta|null {
     for (const reader of this.readers) {
       const meta = reader.getDirectiveMetadata(node);

packages/compiler-cli/src/ngtsc/scope/src/local.ts

@@ -118,8 +118,6 @@ export class LocalModuleScopeRegistry implements MetadataRegistry, ComponentScop
     }
   }
 
-  registerAbstractDirective(clazz: ClassDeclaration): void {}
-
   registerDirectiveMetadata(directive: DirectiveMeta): void {}
 
   registerPipeMetadata(pipe: PipeMeta): void {}

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

@@ -191,6 +191,50 @@ runInEachFileSystem(os => {
       expect(jsContents).toContain('inject(Dep, 8)');
     });
 
+    it('should compile Directives without errors', () => {
+      env.write('test.ts', `
+        import {Directive} from '@angular/core';
+
+        @Directive({selector: '[dir]'})
+        export class TestDir {}
+      `);
+
+      env.driveMain();
+
+      const jsContents = env.getContents('test.js');
+      expect(jsContents).toContain('TestDir.ɵdir = i0.ɵɵdefineDirective');
+      expect(jsContents).toContain('TestDir.ɵfac = function');
+      expect(jsContents).not.toContain('__decorate');
+
+      const dtsContents = env.getContents('test.d.ts');
+      expect(dtsContents)
+          .toContain(
+              'static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestDir, "[dir]", never, {}, {}, never>');
+      expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestDir>');
+    });
+
+    it('should compile abstract Directives without errors', () => {
+      env.write('test.ts', `
+        import {Directive} from '@angular/core';
+
+        @Directive()
+        export class TestDir {}
+      `);
+
+      env.driveMain();
+
+      const jsContents = env.getContents('test.js');
+      expect(jsContents).toContain('TestDir.ɵdir = i0.ɵɵdefineDirective');
+      expect(jsContents).toContain('TestDir.ɵfac = function');
+      expect(jsContents).not.toContain('__decorate');
+
+      const dtsContents = env.getContents('test.d.ts');
+      expect(dtsContents)
+          .toContain(
+              'static ɵdir: i0.ɵɵDirectiveDefWithMeta<TestDir, never, never, {}, {}, never>');
+      expect(dtsContents).toContain('static ɵfac: i0.ɵɵFactoryDef<TestDir>');
+    });
+
     it('should compile Components (inline template) without errors', () => {
       env.write('test.ts', `
         import {Component} from '@angular/core';