fix: pass oldest Angular version in the workspace to the compiler (#2003)

Adds some logic to pass the oldest version of Angular that was detected in the workspace to the compiler so that it can produce the most compatible code possible.

Author: crisbeto

client/src/client.ts

@@ -307,16 +307,26 @@ export class AngularLanguageClient implements vscode.Disposable {
       args.push('--includeCompletionsWithSnippetText');
     }
 
-    const angularVersions = getAngularVersionsInWorkspace();
+    // Sort the versions from oldest to newest.
+    const angularVersions = getAngularVersionsInWorkspace().sort(
+        (a, b) => a.version.greaterThanOrEqual(b.version) ? 1 : -1);
+
     // Only disable block syntax if we find angular/core and every one we find does not support
     // block syntax
-    if (angularVersions.size > 0 && Array.from(angularVersions).every(v => v.version.major < 17)) {
+    if (angularVersions.length > 0 && angularVersions.every(v => v.version.major < 17)) {
       args.push('--disableBlockSyntax');
       this.outputChannel.appendLine(
           `All workspace roots are using versions of Angular that do not support control flow block syntax.` +
           ` Block syntax parsing in templates will be disabled.`);
     }
 
+    // Pass the earliest Angular version along to the compiler for maximum compatibility.
+    if (angularVersions.length > 0) {
+      args.push('--angularCoreVersion', angularVersions[0].version.toString());
+      this.outputChannel.appendLine(
+          `Using Angular version ${angularVersions[0].version.toString()}.`);
+    }
+
     const forceStrictTemplates = config.get<boolean>('angular.forceStrictTemplates');
     if (forceStrictTemplates) {
       args.push('--forceStrictTemplates');
@@ -515,7 +525,7 @@ function extensionVersionCompatibleWithAllProjects(serverModuleLocation: string)
 /**
  * Returns true if any project in the workspace supports block syntax (v17+).
  */
-function getAngularVersionsInWorkspace(): Set<NodeModule> {
+function getAngularVersionsInWorkspace(): NodeModule[] {
   const angularCoreModules = new Set<NodeModule>();
   const workspaceFolders = vscode.workspace.workspaceFolders || [];
   for (const workspaceFolder of workspaceFolders) {
@@ -525,5 +535,5 @@ function getAngularVersionsInWorkspace(): Set<NodeModule> {
     }
     angularCoreModules.add(angularCore);
   }
-  return angularCoreModules;
+  return Array.from(angularCoreModules);
 }

server/src/cmdline_utils.ts

@@ -38,6 +38,7 @@ interface CommandLineOptions {
   includeCompletionsWithSnippetText: boolean;
   forceStrictTemplates: boolean;
   disableBlockSyntax: boolean;
+  angularCoreVersion?: string;
 }
 
 export function parseCommandLine(argv: string[]): CommandLineOptions {
@@ -54,6 +55,7 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     includeCompletionsWithSnippetText: hasArgument(argv, '--includeCompletionsWithSnippetText'),
     forceStrictTemplates: hasArgument(argv, '--forceStrictTemplates'),
     disableBlockSyntax: hasArgument(argv, '--disableBlockSyntax'),
+    angularCoreVersion: findArgument(argv, '--angularCoreVersion'),
   };
 }
 

server/src/server.ts

@@ -49,6 +49,7 @@ function main() {
     includeCompletionsWithSnippetText: options.includeCompletionsWithSnippetText,
     forceStrictTemplates: isG3 || options.forceStrictTemplates,
     disableBlockSyntax: options.disableBlockSyntax,
+    angularCoreVersion: options.angularCoreVersion ?? null,
   });
 
   // Log initialization info

server/src/session.ts

@@ -34,6 +34,7 @@ export interface SessionOptions {
   includeCompletionsWithSnippetText: boolean;
   forceStrictTemplates: boolean;
   disableBlockSyntax: boolean;
+  angularCoreVersion: string|null;
 }
 
 enum LanguageId {
@@ -160,6 +161,10 @@ export class Session {
     if (options.disableBlockSyntax) {
       pluginConfig.enableBlockSyntax = false;
     }
+    if (options.angularCoreVersion !== null) {
+      // TODO(crisbeto): temporarily cast to `any` until 17.2 is released.
+      (pluginConfig as any).angularCoreVersion = options.angularCoreVersion;
+    }
     projSvc.configurePlugin({
       pluginName: options.ngPlugin,
       configuration: pluginConfig,