refactor(client): Support VE by using the v12 version of the language server/service (#1527)

Support for View Engine is dropped in the compiler in the v13 release.
We still want to support VE for the language service while people
upgrade projects. To do this, we launch the v12 server and use the v12
language service with the VE flag flipped on.

Author: atscott

.circleci/config.yml

@@ -4,7 +4,7 @@ orbs:
 jobs:
   build-and-test:
     docker:
-      - image: cimg/node:16.10.0-browsers@sha256:83ff2dcad3043c4b3f7f58513805a0c8757ba5541a1f3c213f80bd242a3c77ac
+      - image: cimg/node:14.17.6@sha256:589b5e494173bfb48923fa8d29b010b4d17079ac98d08de95dd4a78e57f5aa0b
     steps:
       - checkout
       - node/install-packages:

client/src/client.ts

@@ -405,12 +405,8 @@ function registerProgressHandlers(client: lsp.LanguageClient) {
  * @param configName
  * @param bundled
  */
-function getProbeLocations(configValue: string|null, bundled: string): string[] {
+function getProbeLocations(bundled: string): string[] {
   const locations = [];
-  // Always use config value if it's specified
-  if (configValue) {
-    locations.push(configValue);
-  }
   // Prioritize the bundled version
   locations.push(bundled);
   // Look in workspaces currently open
@@ -425,7 +421,7 @@ function getProbeLocations(configValue: string|null, bundled: string): string[]
  * Construct the arguments that's used to spawn the server process.
  * @param ctx vscode extension context
  */
-function constructArgs(ctx: vscode.ExtensionContext): string[] {
+function constructArgs(ctx: vscode.ExtensionContext, viewEngine: boolean): string[] {
   const config = vscode.workspace.getConfiguration();
   const args: string[] = ['--logToConsole'];
 
@@ -437,15 +433,15 @@ function constructArgs(ctx: vscode.ExtensionContext): string[] {
     args.push('--logVerbosity', ngLog);
   }
 
-  const ngProbeLocations = getProbeLocations(null, ctx.extensionPath);
-  args.push('--ngProbeLocations', ngProbeLocations.join(','));
-
-  // Because the configuration is typed as "boolean" in package.json, vscode
-  // will return false even when the value is not set. If value is false, then
-  // we need to check if all projects support Ivy language service.
-  const viewEngine: boolean = config.get('angular.view-engine') || !allProjectsSupportIvy();
+  const ngProbeLocations = getProbeLocations(ctx.extensionPath);
   if (viewEngine) {
     args.push('--viewEngine');
+    args.push('--ngProbeLocations', [
+      path.join(ctx.extensionPath, 'v12_language_service'),
+      ...ngProbeLocations,
+    ].join(','));
+  } else {
+    args.push('--ngProbeLocations', ngProbeLocations.join(','));
   }
 
   const includeAutomaticOptionalChainCompletions =
@@ -461,7 +457,7 @@ function constructArgs(ctx: vscode.ExtensionContext): string[] {
   }
 
   const tsdk: string|null = config.get('typescript.tsdk', null);
-  const tsProbeLocations = getProbeLocations(tsdk, ctx.extensionPath);
+  const tsProbeLocations = [tsdk, ...getProbeLocations(ctx.extensionPath)];
   args.push('--tsProbeLocations', tsProbeLocations.join(','));
 
   return args;
@@ -475,9 +471,22 @@ function getServerOptions(ctx: vscode.ExtensionContext, debug: boolean): lsp.Nod
     NG_DEBUG: true,
   };
 
+  // Because the configuration is typed as "boolean" in package.json, vscode
+  // will return false even when the value is not set. If value is false, then
+  // we need to check if all projects support Ivy language service.
+  const config = vscode.workspace.getConfiguration();
+  const viewEngine: boolean = config.get('angular.view-engine') || !allProjectsSupportIvy();
+
   // Node module for the language server
+  const args = constructArgs(ctx, viewEngine);
   const prodBundle = ctx.asAbsolutePath('server');
   const devBundle = ctx.asAbsolutePath(path.join('dist', 'server', 'server.js'));
+  // VS Code Insider launches extensions in debug mode by default but users
+  // install prod bundle so we have to check whether dev bundle exists.
+  const latestServerModule = debug && fs.existsSync(devBundle) ? devBundle : prodBundle;
+  const v12ServerModule = ctx.asAbsolutePath(
+      path.join('v12_language_service', 'node_modules', '@angular', 'language-server'));
+  const module = viewEngine ? v12ServerModule : latestServerModule;
 
   // Argv options for Node.js
   const prodExecArgv: string[] = [];
@@ -489,11 +498,9 @@ function getServerOptions(ctx: vscode.ExtensionContext, debug: boolean): lsp.Nod
   ];
 
   return {
-    // VS Code Insider launches extensions in debug mode by default but users
-    // install prod bundle so we have to check whether dev bundle exists.
-    module: debug && fs.existsSync(devBundle) ? devBundle : prodBundle,
+    module,
     transport: lsp.TransportKind.ipc,
-    args: constructArgs(ctx),
+    args,
     options: {
       env: debug ? devEnv : prodEnv,
       execArgv: debug ? devExecArgv : prodExecArgv,
@@ -514,4 +521,4 @@ function allProjectsSupportIvy() {
     }
   }
   return true;
-}
+}

package.json

@@ -216,4 +216,4 @@
     "type": "git",
     "url": "https://github.com/angular/vscode-ng-language-service"
   }
-}
+}

scripts/build.sh

@@ -12,10 +12,16 @@ rm -rf **/*.tsbuildinfo
 # Build the client and server
 yarn run compile
 
+# install npm packages in the pinned v12
+pushd v12_language_service
+yarn install
+popd
+
 # Copy files to package root
 cp package.json angular.png CHANGELOG.md README.md dist/npm
 # Copy files to server directory
 cp -r server/package.json server/README.md server/bin dist/npm/server
+cp -r v12_language_service dist/npm/v12_language_service
 # Build and copy files to syntaxes directory
 yarn run build:syntaxes
 mkdir dist/npm/syntaxes

server/src/session.ts

@@ -149,8 +149,6 @@ export class Session {
       }
     });
 
-    // TODO(atscott): The Ivy flag was removed in v13. We need to include a legacy version (some
-    // v12) of the language service in order to continue supporting view engine.
     const pluginConfig: PluginConfig = {
       angularOnly: true,
     };

v12_language_service/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@angular/language-service": "12.2.9",
+    "@angular/language-server": "12.2.1"
+  }
+}

v12_language_service/yarn.lock

@@ -0,0 +1,48 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@angular/[email protected]":
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/@angular/language-server/-/language-server-12.2.1.tgz#9e0d3cf87da975ea05c1950a55d9159a7eac1ec1"
+  integrity sha512-xra6ep0I4500NzE2kL435J757hTFwpretUzSUgKa2pSGOZXDoBU78Equb6qnmEgM4O/CJHFlmeBZFxmoxhzREQ==
+  dependencies:
+    "@angular/language-service" "12.2.9"
+    vscode-jsonrpc "6.0.0"
+    vscode-languageserver "7.0.0"
+    vscode-uri "3.0.2"
+
+"@angular/[email protected]":
+  version "12.2.9"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.2.9.tgz#6732c2dae7c25760cfe22f65c714096aa4f0a387"
+  integrity sha512-q6WH8CxS4nXKnIR/imQbRYTdP0PW63tDogzlol6gnB/jEmGgmQJphYRVeDqr5owIxuzCB06JkWXPVsyHY3yHvA==
+
+[email protected]:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz#108bdb09b4400705176b957ceca9e0880e9b6d4e"
+  integrity sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==
+
+[email protected]:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz#34135b61a9091db972188a07d337406a3cdbe821"
+  integrity sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==
+  dependencies:
+    vscode-jsonrpc "6.0.0"
+    vscode-languageserver-types "3.16.0"
+
+[email protected]:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
+  integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
+
+[email protected]:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-7.0.0.tgz#49b068c87cfcca93a356969d20f5d9bdd501c6b0"
+  integrity sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==
+  dependencies:
+    vscode-languageserver-protocol "3.16.0"
+
+[email protected]:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.2.tgz#ecfd1d066cb8ef4c3a208decdbab9a8c23d055d0"
+  integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==