refactor(language-service): make selector nullable

packages/compiler-cli/src/ngtsc/typecheck/api/scope.ts

@@ -50,7 +50,7 @@ export interface PotentialDirective {
   /**
    * The selector for the directive or component.
    */
-  selector: string;
+  selector: string|null;
 
   /**
    * `true` if this directive is a component.

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

@@ -611,6 +611,10 @@ export class TemplateTypeCheckerImpl implements TemplateTypeChecker {
     const scope = this.getScopeData(component);
     if (scope !== null) {
       for (const directive of scope.directives) {
+        if (directive.selector === null) {
+          continue;
+        }
+
         for (const selector of CssSelector.parse(directive.selector)) {
           if (selector.element === null || tagMap.has(selector.element)) {
             // Skip this directive if it doesn't match an element tag, or if another directive has

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

@@ -180,9 +180,7 @@ export class SymbolBuilder {
           tsSymbol: symbol.tsSymbol,
           exposedInputs: current.inputs,
           exposedOutputs: current.outputs,
-          // TODO(crisbeto): rework `DirectiveSymbol` to make
-          // `selector` nullable and remove the `|| ''` here.
-          selector: meta.selector || '',
+          selector: meta.selector,
           isComponent: meta.isComponent,
           ngModule: this.getDirectiveModule(current.directive.node),
           kind: SymbolKind.Directive,

packages/language-service/src/utils.ts

@@ -10,7 +10,7 @@ import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {absoluteFrom, absoluteFromSourceFile, AbsoluteFsPath} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {isExternalResource} from '@angular/compiler-cli/src/ngtsc/metadata';
 import {DeclarationNode} from '@angular/compiler-cli/src/ngtsc/reflection';
-import {DirectiveSymbol, PotentialDirective, TemplateTypeChecker} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
+import {DirectiveSymbol, TemplateTypeChecker} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
 import * as e from '@angular/compiler/src/expression_parser/ast';  // e for expression AST
 import * as t from '@angular/compiler/src/render3/r3_ast';         // t for template AST
 import ts from 'typescript';
@@ -224,7 +224,7 @@ function difference<T>(left: Set<T>, right: Set<T>): Set<T> {
  * @returns The list of directives matching the tag name via the strategy described above.
  */
 // TODO(atscott): Add unit tests for this and the one for attributes
-export function getDirectiveMatchesForElementTag<T extends {selector: string}>(
+export function getDirectiveMatchesForElementTag<T extends {selector: string | null}>(
     element: t.Template|t.Element, directives: T[]): Set<T> {
   const attributes = getAttributes(element);
   const allAttrs = attributes.map(toAttributeCssSelector);
@@ -269,7 +269,7 @@ export function getDirectiveMatchesForAttribute(
  * Given a list of directives and a text to use as a selector, returns the directives which match
  * for the selector.
  */
-function getDirectiveMatchesForSelector<T extends {selector: string}>(
+function getDirectiveMatchesForSelector<T extends {selector: string | null}>(
     directives: T[], selector: string): Set<T> {
   try {
     const selectors = CssSelector.parse(selector);