feat: add command to run ngcc manually

Adds a command to manually run ngcc for a given file. This commit also
refactors the `disableNgcc` option to indicate that it's disabling the
_automatic_ `ngcc` run but it can still be triggered manually with the
new command.

The `disableAutomaticNgcc` option and new command to manually run ngcc
are complementary. We have found that the extension can be overzealous
in automatically running ngcc, especially with solution-style project
configurations (common practice in Nx projects). If a dev server is not
active to rerun ngcc when needed, then the new command gives an easy way
to do that when the `disableAutomaticNgcc` option is set.

Fixes #991

Author: atscott

client/src/client.ts

@@ -12,7 +12,7 @@ import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient/node';
 
 import {OpenOutputChannel, ProjectLoadingFinish, ProjectLoadingStart, SuggestStrictMode, SuggestStrictModeParams} from '../common/notifications';
-import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject} from '../common/requests';
+import {GetComponentsWithTemplateFile, GetTcbRequest, GetTemplateLocationForComponent, IsInAngularProject, RunNgccRequest} from '../common/requests';
 import {resolve, Version} from '../common/resolver';
 
 import {isInsideComponentDecorator, isInsideInlineTemplateRegion, isInsideStringLiteral} from './embedded_support';
@@ -255,6 +255,15 @@ export class AngularLanguageClient implements vscode.Disposable {
     };
   }
 
+  runNgcc(textEditor: vscode.TextEditor): void {
+    if (this.client === null) {
+      return;
+    }
+    this.client.sendRequest(RunNgccRequest, {
+      textDocument: this.client.code2ProtocolConverter.asTextDocumentIdentifier(textEditor.document),
+    });
+  }
+
   get initializeResult(): lsp.InitializeResult|undefined {
     return this.client?.initializeResult;
   }
@@ -410,9 +419,9 @@ function constructArgs(ctx: vscode.ExtensionContext, viewEngine: boolean): strin
     args.push('--includeCompletionsWithSnippetText');
   }
 
-  const disableNgcc = config.get<boolean>('angular.disableNgcc');
-  if (disableNgcc) {
-    args.push('--disableNgcc');
+  const disableAutomaticNgcc = config.get<boolean>('angular.disableAutomaticNgcc');
+  if (disableAutomaticNgcc) {
+    args.push('--disableAutomaticNgcc');
   }
 
   const tsdk: string|null = config.get('typescript.tsdk', null);

client/src/commands.ts

@@ -115,6 +115,15 @@ function getTemplateTcb(
     }
   };
 }
+function runNgcc(ngClient: AngularLanguageClient): Command {
+  return {
+    id: 'angular.runNgcc',
+    isTextEditorCommand: true,
+    async execute(textEditor: vscode.TextEditor) {
+      ngClient.runNgcc(textEditor);
+    }
+  };
+}
 
 /**
  * Command goToComponentWithTemplateFile finds components which reference an external template in
@@ -180,6 +189,7 @@ export function registerCommands(
     restartNgServer(client),
     openLogFile(client),
     getTemplateTcb(client, context),
+    runNgcc(client),
     goToComponentWithTemplateFile(client),
     goToTemplateForComponent(client),
   ];

common/requests.ts

@@ -30,9 +30,16 @@ export interface GetTcbParams {
   position: lsp.Position;
 }
 
+export interface RunNgccParams {
+  textDocument: lsp.TextDocumentIdentifier;
+}
+
 export const GetTcbRequest =
     new lsp.RequestType<GetTcbParams, GetTcbResponse|null, /* error */ void>('angular/getTcb');
 
+export const RunNgccRequest =
+    new lsp.RequestType<RunNgccParams, void, /* error */ void>('angular/runNgcc');
+
 export interface GetTcbResponse {
   uri: lsp.DocumentUri;
   content: string;

package.json

@@ -48,6 +48,11 @@
         "command": "angular.goToTemplateForComponent",
         "title": "Go to template",
         "category": "Angular"
+      },
+      {
+        "command": "angular.runNgcc",
+        "title": "Run ngcc",
+        "category": "Angular"
       }
     ],
     "menus": {
@@ -124,10 +129,10 @@
           "default": true,
           "markdownDescription": "Enable/disable snippet completions from Angular language server. Requires using TypeScript 4.3+ in the workspace and the `legacy View Engine` option to be disabled."
         },
-        "angular.disableNgcc": {
+        "angular.disableAutomaticNgcc": {
           "type": "boolean",
           "default": false,
-          "markdownDescription": "Manually disable the step to run ngcc. [ngcc](https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md#high-level-proposal) is required to run and gather metadata from libraries not published with Ivy instructions. This can be run outside of VSCode instead (for example, as part of the build/rebuild in the CLI). Note that ngcc needs to run not only at startup, but also whenever the dependencies change. Failing to run ngcc when required can result in incomplete information and spurious errors reported by the language service."
+          "markdownDescription": "Disable the step to automatically run ngcc. [ngcc](https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md#high-level-proposal) is required to run and gather metadata from libraries not published with Ivy instructions. This can be run outside of VSCode instead (for example, as part of the build/rebuild in the CLI). Note that ngcc needs to run not only at startup, but also whenever the dependencies change. Failing to run ngcc when required can result in incomplete information and spurious errors reported by the language service."
         }
       }
     },

server/src/cmdline_utils.ts

@@ -35,7 +35,7 @@ interface CommandLineOptions {
   /**
    * If true, skips the running ngcc when using Ivy LS.
    */
-  disableNgcc: boolean;
+  disableAutomaticNgcc: boolean;
   logFile?: string;
   logVerbosity?: string;
   logToConsole: boolean;
@@ -49,7 +49,7 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
   return {
     help: hasArgument(argv, '--help'),
     ivy: !hasArgument(argv, '--viewEngine'),
-    disableNgcc: hasArgument(argv, '--disableNgcc'),
+    disableAutomaticNgcc: hasArgument(argv, '--disableAutomaticNgcc'),
     logFile: findArgument(argv, '--logFile'),
     logVerbosity: findArgument(argv, '--logVerbosity'),
     logToConsole: hasArgument(argv, '--logToConsole'),

server/src/server.ts

@@ -43,7 +43,7 @@ function main() {
     ngPlugin: '@angular/language-service',
     resolvedNgLsPath: ng.resolvedPath,
     ivy: isG3 ? true : options.ivy,
-    disableNgcc: options.disableNgcc,
+    disableAutomaticNgcc: options.disableAutomaticNgcc,
     logToConsole: options.logToConsole,
     includeAutomaticOptionalChainCompletions: options.includeAutomaticOptionalChainCompletions,
     includeCompletionsWithSnippetText: options.includeCompletionsWithSnippetText,

server/src/session.ts

@@ -13,7 +13,7 @@ import * as lsp from 'vscode-languageserver/node';
 
 import {ServerOptions} from '../common/initialize';
 import {NgccProgressEnd, OpenOutputChannel, ProjectLanguageService, ProjectLoadingFinish, ProjectLoadingStart, SuggestStrictMode} from '../common/notifications';
-import {GetComponentsWithTemplateFile, GetTcbParams, GetTcbRequest, GetTcbResponse, GetTemplateLocationForComponent, GetTemplateLocationForComponentParams, IsInAngularProject, IsInAngularProjectParams} from '../common/requests';
+import {GetComponentsWithTemplateFile, GetTcbParams, GetTcbRequest, GetTcbResponse, GetTemplateLocationForComponent, GetTemplateLocationForComponentParams, IsInAngularProject, IsInAngularProjectParams, RunNgccParams, RunNgccRequest} from '../common/requests';
 
 import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './completion';
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
@@ -27,7 +27,7 @@ export interface SessionOptions {
   ngPlugin: string;
   resolvedNgLsPath: string;
   ivy: boolean;
-  disableNgcc: boolean;
+  disableAutomaticNgcc: boolean;
   logToConsole: boolean;
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
@@ -55,7 +55,7 @@ export class Session {
   private readonly projectService: ts.server.ProjectService;
   private readonly logger: ts.server.Logger;
   private readonly ivy: boolean;
-  private readonly disableNgcc: boolean;
+  private readonly disableAutomaticNgcc: boolean;
   private readonly configuredProjToExternalProj = new Map<string, string>();
   private readonly logToConsole: boolean;
   private readonly openFiles = new MruTracker();
@@ -82,7 +82,7 @@ export class Session {
     this.includeCompletionsWithSnippetText = options.includeCompletionsWithSnippetText;
     this.logger = options.logger;
     this.ivy = options.ivy;
-    this.disableNgcc = options.disableNgcc;
+    this.disableAutomaticNgcc = options.disableAutomaticNgcc;
     this.logToConsole = options.logToConsole;
     // Create a connection for the server. The connection uses Node's IPC as a transport.
     this.connection = lsp.createConnection({
@@ -187,6 +187,7 @@ export class Session {
     conn.onRequest(GetComponentsWithTemplateFile, p => this.onGetComponentsWithTemplateFile(p));
     conn.onRequest(GetTemplateLocationForComponent, p => this.onGetTemplateLocationForComponent(p));
     conn.onRequest(GetTcbRequest, p => this.onGetTcb(p));
+    conn.onRequest(RunNgccRequest, p => this.onRunNgcc(p));
     conn.onRequest(IsInAngularProject, p => this.isInAngularProject(p));
     conn.onCodeLens(p => this.onCodeLens(p));
     conn.onCodeLensResolve(p => this.onCodeLensResolve(p));
@@ -237,6 +238,18 @@ export class Session {
     };
   }
 
+  private onRunNgcc(params: RunNgccParams): void {
+    const lsInfo = this.getLSAndScriptInfo(params.textDocument);
+    if (lsInfo === null) {
+      return;
+    }
+    const project = this.getDefaultProjectForScriptInfo(lsInfo.scriptInfo);
+    if (!project) {
+      return;
+    }
+    this.runNgcc(project);
+  }
+
   private onGetTemplateLocationForComponent(params: GetTemplateLocationForComponentParams):
       lsp.Location|null {
     const lsInfo = this.getLSAndScriptInfo(params.textDocument);
@@ -460,7 +473,7 @@ export class Session {
         const {project} = event.data;
         const angularCore = this.findAngularCore(project);
         if (angularCore) {
-          if (this.ivy && isExternalAngularCore(angularCore) && !this.disableNgcc) {
+          if (this.ivy && isExternalAngularCore(angularCore) && !this.disableAutomaticNgcc) {
             // Do not wait on this promise otherwise we'll be blocking other requests
             this.runNgcc(project);
           } else {
@@ -1163,7 +1176,7 @@ export class Session {
    * Disable the language service, run ngcc, then re-enable language service.
    */
   private async runNgcc(project: ts.server.Project): Promise<void> {
-    if (!isConfiguredProject(project)) {
+    if (!isConfiguredProject(project) || this.projectNgccQueue.some(p => p.project === project)) {
       return;
     }
     // Disable language service until ngcc is completed.