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

Enable the developer to disable the auto-import for the external
module. If disabled, the completion only includes the info from the
file scope and the ng-module scope.

Fixes #2132

Author: ivanwonder

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=974837034
-pnpm-lock.yaml=1493175183
+pnpm-lock.yaml=1538625471
 yarn.lock=485928896
-package.json=-1370450906
+package.json=-100959756
 pnpm-workspace.yaml=1711114604

client/src/client.ts

@@ -316,6 +316,11 @@ export class AngularLanguageClient implements vscode.Disposable {
       args.push('--includeCompletionsWithSnippetText');
     }
 
+    const includeCompletionsForModuleExports = config.get<boolean>('angular.suggest.autoImports');
+    if (includeCompletionsForModuleExports) {
+      args.push('--includeCompletionsForModuleExports');
+    }
+
     // Sort the versions from oldest to newest.
     const angularVersions = (await getAngularVersionsInWorkspace(this.outputChannel))
                                 .sort((a, b) => a.version.greaterThanOrEqual(b.version) ? 1 : -1);

package.json

@@ -143,6 +143,11 @@
           "default": true,
           "markdownDescription": "Enable snippet completions from Angular language server. Requires using TypeScript 4.3+ in the workspace."
         },
+        "angular.suggest.autoImports": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Enable/disable auto import suggestions for the exported Angular components from the current project."
+        },
         "angular.forceStrictTemplates": {
           "type": "boolean",
           "default": false,

pnpm-lock.yaml

@@ -36,6 +36,7 @@ interface CommandLineOptions {
   tsdk: string|null;
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
+  includeCompletionsForModuleExports?: boolean;
   forceStrictTemplates: boolean;
   disableBlockSyntax: boolean;
   disableLetSyntax: boolean;
@@ -55,6 +56,7 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     includeAutomaticOptionalChainCompletions:
         hasArgument(argv, '--includeAutomaticOptionalChainCompletions'),
     includeCompletionsWithSnippetText: hasArgument(argv, '--includeCompletionsWithSnippetText'),
+    includeCompletionsForModuleExports: hasArgument(argv, '--includeCompletionsForModuleExports'),
     forceStrictTemplates: hasArgument(argv, '--forceStrictTemplates'),
     disableBlockSyntax: hasArgument(argv, '--disableBlockSyntax'),
     disableLetSyntax: hasArgument(argv, '--disableLetSyntax'),

server/src/cmdline_utils.ts

@@ -47,6 +47,8 @@ export interface NgCompletionOriginData {
 
   filePath: string;
   position: lsp.Position;
+
+  tsData?: ts.CompletionEntryData;
 }
 
 /**
@@ -135,6 +137,7 @@ export function tsCompletionEntryToLspCompletionItem(
     kind: 'ngCompletionOriginData',
     filePath: scriptInfo.fileName,
     position,
+    tsData: entry.data,
   } as NgCompletionOriginData;
   return item;
 }

server/src/completion.ts

@@ -47,6 +47,7 @@ function main() {
     logToConsole: options.logToConsole,
     includeAutomaticOptionalChainCompletions: options.includeAutomaticOptionalChainCompletions,
     includeCompletionsWithSnippetText: options.includeCompletionsWithSnippetText,
+    includeCompletionsForModuleExports: options.includeCompletionsForModuleExports ?? true,
     forceStrictTemplates: isG3 || options.forceStrictTemplates,
     disableBlockSyntax: options.disableBlockSyntax,
     disableLetSyntax: options.disableLetSyntax,

server/src/server.ts

@@ -32,6 +32,7 @@ export interface SessionOptions {
   logToConsole: boolean;
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
+  includeCompletionsForModuleExports: boolean;
   forceStrictTemplates: boolean;
   disableBlockSyntax: boolean;
   disableLetSyntax: boolean;
@@ -49,7 +50,7 @@ const EMPTY_RANGE = lsp.Range.create(0, 0, 0, 0);
 const setImmediateP = promisify(setImmediate);
 
 const defaultFormatOptions: ts.FormatCodeSettings = {};
-const defaultPreferences: ts.UserPreferences = {};
+let defaultPreferences: ts.UserPreferences = {};
 
 const htmlLS = getHTMLLanguageService();
 
@@ -70,6 +71,7 @@ export class Session {
   private readonly openFiles = new MruTracker();
   private readonly includeAutomaticOptionalChainCompletions: boolean;
   private readonly includeCompletionsWithSnippetText: boolean;
+  private readonly includeCompletionsForModuleExports: boolean;
   private snippetSupport: boolean|undefined;
   private diagnosticsTimeout: NodeJS.Timeout|null = null;
   private isProjectLoading = false;
@@ -86,8 +88,13 @@ export class Session {
     this.includeAutomaticOptionalChainCompletions =
         options.includeAutomaticOptionalChainCompletions;
     this.includeCompletionsWithSnippetText = options.includeCompletionsWithSnippetText;
+    this.includeCompletionsForModuleExports = options.includeCompletionsForModuleExports;
     this.logger = options.logger;
     this.logToConsole = options.logToConsole;
+    defaultPreferences = {
+      ...defaultPreferences,
+      includeCompletionsForModuleExports: options.includeCompletionsForModuleExports,
+    };
     // Create a connection for the server. The connection uses Node's IPC as a transport.
     this.connection = lsp.createConnection({
       // cancelUndispatched is a "middleware" to handle all cancellation requests.
@@ -150,6 +157,7 @@ export class Session {
         // We don't want the AutoImportProvider projects to be created. See
         // https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/#smarter-auto-imports
         includePackageJsonAutoImports: 'off',
+        includeCompletionsForModuleExports: this.includeCompletionsForModuleExports,
       },
       watchOptions: {
         // Used as watch options when not specified by user's `tsconfig`.
@@ -1234,12 +1242,14 @@ export class Session {
     let options: ts.GetCompletionsAtPositionOptions = {};
     const includeCompletionsWithSnippetText =
         this.includeCompletionsWithSnippetText && this.snippetSupport;
-    if (this.includeAutomaticOptionalChainCompletions || includeCompletionsWithSnippetText) {
+    if (this.includeAutomaticOptionalChainCompletions || includeCompletionsWithSnippetText ||
+        this.includeCompletionsForModuleExports) {
       options = {
         includeAutomaticOptionalChainCompletions: this.includeAutomaticOptionalChainCompletions,
         includeCompletionsWithSnippetText: includeCompletionsWithSnippetText,
         includeCompletionsWithInsertText:
             this.includeAutomaticOptionalChainCompletions || includeCompletionsWithSnippetText,
+        includeCompletionsForModuleExports: this.includeCompletionsForModuleExports,
       };
     }
 
@@ -1269,8 +1279,8 @@ export class Session {
 
     const offset = lspPositionToTsPosition(scriptInfo, position);
     const details = languageService.getCompletionEntryDetails(
-        filePath, offset, item.insertText ?? item.label, undefined, undefined, undefined,
-        undefined);
+        filePath, offset, item.insertText ?? item.label, undefined, undefined, defaultPreferences,
+        data.tsData);
     if (details === undefined) {
       return item;
     }