feat: add command to run ngcc manually

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,16 @@ 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 +420,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.