feat(language-service): Support importing the external module's export about the angular metadata. (#61122)

This works for the code actions and completion. When the ls wants to complete
all importable angular metadata in the template, the ls will invoke the function
`ls.getCompletionsAtPosition` and filter the item about the angular. When the
developer selects an item, the ls will get the module specifier from the code action
return by the `ls.getCompletionEntryDetails`.

PR Close #61122

Author: ivanwonder

packages/compiler-cli/src/ngtsc/testing/fake_common/index.ts

@@ -129,3 +129,17 @@ export declare class CommonModule {
     [typeof NgForOf, typeof NgIf, typeof DatePipe, typeof IndexPipe, typeof NgTemplateOutlet]
   >;
 }
+
+export declare class MatCard {
+  static ɵcmp: ɵɵDirectiveDeclaration<
+    MatCard,
+    'mat-card',
+    ['matCard'],
+    {'appearance': {'alias': 'appearance'; 'required': false}},
+    {},
+    never,
+    never,
+    true,
+    never
+  >;
+}

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

@@ -424,3 +424,7 @@ export interface FullSourceMapping {
   sourceMapping: SourceMapping;
   span: ParseSourceSpan;
 }
+
+export interface GetPotentialAngularMetaOptions {
+  includeExternalModule: boolean;
+}

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

@@ -29,9 +29,20 @@ import {Reference} from '../../imports';
 import {NgModuleMeta, PipeMeta} from '../../metadata';
 import {ClassDeclaration} from '../../reflection';
 
-import {FullSourceMapping, NgTemplateDiagnostic, TypeCheckableDirectiveMeta} from './api';
+import {
+  FullSourceMapping,
+  GetPotentialAngularMetaOptions,
+  NgTemplateDiagnostic,
+  TypeCheckableDirectiveMeta,
+} from './api';
 import {GlobalCompletion} from './completion';
-import {PotentialDirective, PotentialImport, PotentialImportMode, PotentialPipe} from './scope';
+import {
+  PotentialDirective,
+  PotentialImport,
+  PotentialImportMode,
+  PotentialPipe,
+  TsCompletionEntryInfo,
+} from './scope';
 import {
   ElementSymbol,
   SelectorlessComponentSymbol,
@@ -153,6 +164,11 @@ export interface TemplateTypeChecker {
     node: AST | TmplAstNode,
   ): GlobalCompletion | null;
 
+  /**
+   * Get the `TcbLocation` for the global context, which is the location of the `this` variable.
+   */
+  getGlobalTsContext(component: ts.ClassDeclaration): TcbLocation | null;
+
   /**
    * For the given expression node, retrieve a `TcbLocation` that can be used to perform
    * autocompletion at that point in the expression, if such a location exists.
@@ -176,7 +192,11 @@ export interface TemplateTypeChecker {
    * Get basic metadata on the directives which are in scope or can be imported for the given
    * component.
    */
-  getPotentialTemplateDirectives(component: ts.ClassDeclaration): PotentialDirective[];
+  getPotentialTemplateDirectives(
+    component: ts.ClassDeclaration,
+    tsLs: ts.LanguageService,
+    options: GetPotentialAngularMetaOptions,
+  ): PotentialDirective[];
 
   /**
    * Get basic metadata on the pipes which are in scope or can be imported for the given component.
@@ -188,7 +208,29 @@ export interface TemplateTypeChecker {
    * declares them (if the tag is from a directive/component), or `null` if the tag originates from
    * the DOM schema.
    */
-  getPotentialElementTags(component: ts.ClassDeclaration): Map<string, PotentialDirective | null>;
+  getPotentialElementTags(
+    component: ts.ClassDeclaration,
+    tsLs: ts.LanguageService,
+    options: GetPotentialAngularMetaOptions,
+  ): Map<string, PotentialDirective | null>;
+
+  /**
+   * Retrieve a `Map` of potential template element tags that includes in the current component's file
+   * scope, or in the component's NgModule scope.
+   *
+   * The different with the `getPotentialElementTags` is that the directives in the map do not need
+   * to update the import statement.
+   */
+  getElementsInFileScope(component: ts.ClassDeclaration): Map<string, PotentialDirective | null>;
+
+  /**
+   * Get the scope data for a directive.
+   */
+  getDirectiveScopeData(
+    component: ts.ClassDeclaration,
+    isInScope: boolean,
+    tsCompletionEntryInfo: TsCompletionEntryInfo | null,
+  ): PotentialDirective | null;
 
   /**
    * In the context of an Angular trait, generate potential imports for a directive.

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

@@ -32,6 +32,21 @@ export enum PotentialImportKind {
   Standalone,
 }
 
+export interface TsCompletionEntryInfo {
+  /**
+   * Sometimes, the location of the tsCompletionEntry symbol does not match the location of the Angular symbol.
+   *
+   * For example, the BarComponent is declared in `bar.ts` and exported from there. The `public_api.ts` also
+   * reexports the BarComponent from `bar.ts`, so the `tsCompletionEntrySymbolFileName` will be `public_api.ts`.
+   */
+  tsCompletionEntrySymbolFileName: string;
+  /**
+   * This data is from the tsLs completion entry, and
+   * will be used in the `ls.getCompletionEntryDetails`.
+   */
+  tsCompletionEntryData?: ts.CompletionEntryData;
+}
+
 /**
  * Metadata on a directive which is available in a template.
  */
@@ -67,6 +82,8 @@ export interface PotentialDirective {
    * Whether or not this directive is in scope.
    */
   isInScope: boolean;
+
+  tsCompletionEntryInfo: TsCompletionEntryInfo | null;
 }
 
 /**
@@ -89,6 +106,8 @@ export interface PotentialPipe {
    * Whether or not this pipe is in scope.
    */
   isInScope: boolean;
+
+  tsCompletionEntryInfo: TsCompletionEntryInfo | null;
 }
 
 /**