refactor(client): Show warning message if a project uses a newer version than extension (#1942)

When the installed extension version is less than the major version of the
project, there is likely to be errors. Because new features are added in
major/minor releases, a the bundled compiler version in an old extension version
may completely fail to even parse a template if there are new syntax features.
This problem is very apparent with the new control flow syntax. If a project uses
v17 and uses the new control flow, a v16 language service will show all kinds of parse errors.

fixes #1941

Author: atscott

client/src/client.ts

@@ -13,6 +13,7 @@ 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 {resolve} from '../../common/resolver';
 
 import {isInsideComponentDecorator, isInsideInlineTemplateRegion, isInsideStringLiteral} from './embedded_support';
 
@@ -404,7 +405,7 @@ function getProbeLocations(bundled: string): string[] {
  * Construct the arguments that's used to spawn the server process.
  * @param ctx vscode extension context
  */
-function constructArgs(ctx: vscode.ExtensionContext, isTrustedWorkspace: boolean): string[] {
+function constructArgs(ctx: vscode.ExtensionContext): string[] {
   const config = vscode.workspace.getConfiguration();
   const args: string[] = ['--logToConsole'];
 
@@ -451,19 +452,20 @@ 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();
-
   // Node module for the language server
-  const args = constructArgs(ctx, vscode.workspace.isTrusted);
+  const args = constructArgs(ctx);
   const prodBundle = ctx.asAbsolutePath('server');
   const devBundle = ctx.asAbsolutePath(path.join('bazel-bin', 'server', 'src', '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;
 
+  if (!extensionVersionCompatibleWithAllProjects(latestServerModule)) {
+    vscode.window.showWarningMessage(
+        `A project in the workspace is using a newer version of Angular than the language service extension. ` +
+        `This may cause the extension to show incorrect diagnostics.`);
+  }
+
   // Argv options for Node.js
   const prodExecArgv: string[] = [];
   const devExecArgv: string[] = [
@@ -483,3 +485,23 @@ function getServerOptions(ctx: vscode.ExtensionContext, debug: boolean): lsp.Nod
     },
   };
 }
+
+function extensionVersionCompatibleWithAllProjects(serverModuleLocation: string): boolean {
+  const languageServiceVersion =
+      resolve('@angular/language-service', serverModuleLocation)?.version;
+  if (languageServiceVersion === undefined) {
+    return true;
+  }
+
+  const workspaceFolders = vscode.workspace.workspaceFolders || [];
+  for (const workspaceFolder of workspaceFolders) {
+    const angularCore = resolve('@angular/core', workspaceFolder.uri.fsPath);
+    if (angularCore === undefined) {
+      continue;
+    }
+    if (!languageServiceVersion.greaterThanOrEqual(angularCore.version, 'minor')) {
+      return false;
+    }
+  }
+  return true;
+}

common/resolver.ts

@@ -51,17 +51,17 @@ export class Version {
     this.patch = patch;
   }
 
-  greaterThanOrEqual(other: Version): boolean {
+  greaterThanOrEqual(other: Version, compare: 'patch'|'minor'|'major' = 'patch'): boolean {
     if (this.major < other.major) {
       return false;
     }
-    if (this.major > other.major) {
+    if (this.major > other.major || (this.major === other.major && compare === 'major')) {
       return true;
     }
     if (this.minor < other.minor) {
       return false;
     }
-    if (this.minor > other.minor) {
+    if (this.minor > other.minor || (this.minor === other.minor && compare === 'minor')) {
       return true;
     }
     return this.patch >= other.patch;