feat(extension): Add option to force strict templates (#1646)

This feature request is to provide an extension option to override the project's
`angularCompilerOptions`. This would allow the language service to enable `strictTemplates`.

With the release of v12, the Ivy-based Language Service became the default.
With that, the information provided by the extension follows what the application
has configured the compiler to interpret (see Alex's
[blog post](https://blog.angular.io/under-the-hood-of-the-language-service-ab763c26f522)
for more information on why this was done). As a result, developers upgrading from
previous versions that have apps which do not have strict templates enabled often
experience a loss of information from the extension. It also may not be feasible
for large projects to enable `strictTemplates` immediately due to an abundance of new errors that would need to be fixed.

Importantly, this would likely result in the language service producing diagnostics
that are not produced when running/compiling the application. However, this may
still be a more ideal state than the current experience (which would be simply
not getting _any_ useful information for lots of locations in the template which
require stricter type checking options).

resolves #1418

Author: atscott

client/src/client.ts

@@ -331,7 +331,8 @@ function registerNotificationHandlers(client: lsp.LanguageClient): vscode.Dispos
 
   disposables.push(client.onNotification(SuggestStrictMode, async (params: SuggestStrictModeParams) => {
     const config = vscode.workspace.getConfiguration();
-    if (config.get('angular.enable-strict-mode-prompt') === false) {
+    if (config.get('angular.enable-strict-mode-prompt') === false ||
+        config.get('angular.forceStrictTemplates')) {
       return;
     }
 
@@ -425,6 +426,11 @@ function constructArgs(ctx: vscode.ExtensionContext, viewEngine: boolean): strin
     args.push('--disableAutomaticNgcc');
   }
 
+  const forceStrictTemplates = config.get<boolean>('angular.forceStrictTemplates');
+  if (forceStrictTemplates) {
+    args.push('--forceStrictTemplates');
+  }
+
   const tsdk: string|null = config.get('typescript.tsdk', null);
   const tsProbeLocations = [tsdk, ...getProbeLocations(ctx.extensionPath)];
   args.push('--tsProbeLocations', tsProbeLocations.join(','));

package.json

@@ -133,6 +133,11 @@
           "type": "boolean",
           "default": false,
           "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."
+        },
+        "angular.forceStrictTemplates": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Enabling this option will force the language service to use [strictTemplates](https://angular.io/guide/angular-compiler-options#stricttemplates) and ignore the user settings in the `tsconfig.json`."
         }
       }
     },

server/src/cmdline_utils.ts

@@ -43,6 +43,7 @@ interface CommandLineOptions {
   tsProbeLocations: string[];
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
+  forceStrictTemplates: boolean;
 }
 
 export function parseCommandLine(argv: string[]): CommandLineOptions {
@@ -58,6 +59,7 @@ export function parseCommandLine(argv: string[]): CommandLineOptions {
     includeAutomaticOptionalChainCompletions:
         hasArgument(argv, '--includeAutomaticOptionalChainCompletions'),
     includeCompletionsWithSnippetText: hasArgument(argv, '--includeCompletionsWithSnippetText'),
+    forceStrictTemplates: hasArgument(argv, '--forceStrictTemplates'),
   };
 }
 

server/src/server.ts

@@ -47,6 +47,7 @@ function main() {
     logToConsole: options.logToConsole,
     includeAutomaticOptionalChainCompletions: options.includeAutomaticOptionalChainCompletions,
     includeCompletionsWithSnippetText: options.includeCompletionsWithSnippetText,
+    forceStrictTemplates: isG3 || options.forceStrictTemplates,
   });
 
   // Log initialization info

server/src/session.ts

@@ -31,6 +31,7 @@ export interface SessionOptions {
   logToConsole: boolean;
   includeAutomaticOptionalChainCompletions: boolean;
   includeCompletionsWithSnippetText: boolean;
+  forceStrictTemplates: boolean;
 }
 
 enum LanguageId {
@@ -158,9 +159,11 @@ export class Session {
     const pluginConfig: PluginConfig = {
       angularOnly: true,
     };
+    if (options.forceStrictTemplates) {
+      pluginConfig.forceStrictTemplates = true;
+    }
     if (options.host.isG3) {
       options.ivy = true;
-      pluginConfig.forceStrictTemplates = true;
     }
     projSvc.configurePlugin({
       pluginName: options.ngPlugin,