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

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=

@@ -4,5 +4,5 @@
 .npmrc=974837034
 pnpm-lock.yaml=1493175183
 yarn.lock=485928896
-package.json=-1370450906
+package.json=-100959756
 pnpm-workspace.yaml=1711114604

client/src/client.ts

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

integration/lsp/BUILD.bazel

@@ -6,6 +6,8 @@ jasmine_test(
     data = [
         "//integration",
         "//integration/project",
+        "//integration/project:node_modules/@angular/core",
+        "//integration/project:node_modules/@angular/common",
         "//integration/pre_standalone_project",
         "//integration/pre_standalone_project:node_modules/@angular/core",
         "//integration/pre_standalone_project:node_modules/@angular/common",

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,

server/src/cmdline_utils.ts

@@ -14,6 +14,31 @@ function findArgument(argv: string[], argName: string): string|undefined {
   return argv[index + 1];
 }
 
+function findArgumentWithDefault<T>(argv: string[], argName: string, defaultValue: T): T|string|
+    undefined {
+  const index = argv.indexOf(argName);
+  if (index < 0) {
+    return defaultValue;
+  }
+  if (index === argv.length - 1) {
+    return undefined;
+  }
+  const argValue = argv[index + 1];
+  if (argValue.startsWith('-')) {
+    return undefined;
+  } else {
+    return argValue;
+  }
+}
+
+function parseBooleanArgument(argv: string[], argName: string): boolean {
+  const argValue = findArgumentWithDefault(argv, argName, 'true');
+  if (argValue === undefined || argValue === 'true') {
+    return true;
+  }
+  return false;
+}
+
 function parseStringArray(argv: string[], argName: string): string[] {
   const arg = findArgument(argv, argName);
   if (!arg) {
@@ -36,6 +61,7 @@ interface CommandLineOptions {
   tsdk: string|null;
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
+  includeCompletionsForModuleExports: boolean;
   forceStrictTemplates: boolean;
   disableBlockSyntax: boolean;
   disableLetSyntax: boolean;
@@ -55,6 +81,8 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     includeAutomaticOptionalChainCompletions:
         hasArgument(argv, '--includeAutomaticOptionalChainCompletions'),
     includeCompletionsWithSnippetText: hasArgument(argv, '--includeCompletionsWithSnippetText'),
+    includeCompletionsForModuleExports:
+        parseBooleanArgument(argv, '--includeCompletionsForModuleExports'),
     forceStrictTemplates: hasArgument(argv, '--forceStrictTemplates'),
     disableBlockSyntax: hasArgument(argv, '--disableBlockSyntax'),
     disableLetSyntax: hasArgument(argv, '--disableLetSyntax'),

server/src/completion.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/server.ts

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

server/src/session.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;
     }

server/src/tests/cmdline_utils_spec.ts

@@ -33,4 +33,24 @@ describe('parseCommandLine', () => {
     const options = parseCommandLine(['--tsProbeLocations', '/baz,/qux']);
     expect(options.tsProbeLocations).toEqual(['/baz', '/qux']);
   });
+
+  it('should parse without "includeCompletionsForModuleExports"', () => {
+    const options = parseCommandLine(['--tsProbeLocations', '/baz,/qux']);
+    expect(options.includeCompletionsForModuleExports).toEqual(true);
+  });
+
+  it('should parse with "--includeCompletionsForModuleExports --help"', () => {
+    const options = parseCommandLine(['--includeCompletionsForModuleExports', '--help']);
+    expect(options.includeCompletionsForModuleExports).toEqual(true);
+  });
+
+  it('should parse with "--includeCompletionsForModuleExports true --help"', () => {
+    const options = parseCommandLine(['--includeCompletionsForModuleExports', 'true', '--help']);
+    expect(options.includeCompletionsForModuleExports).toEqual(true);
+  });
+
+  it('should parse with "--includeCompletionsForModuleExports false --help"', () => {
+    const options = parseCommandLine(['--includeCompletionsForModuleExports', 'false', '--help']);
+    expect(options.includeCompletionsForModuleExports).toEqual(false);
+  });
 });