fix(language-service): Add plugin option to force strictTemplates (#41062)

This commit adds a new configuration option, `forceStrictTemplates` to the
language service plugin to allow users to force enable `strictTemplates`.

This is needed so that the Angular extension can be used inside Google without
changing the underlying compiler options in the `ng_module` build rule.

PR Close #41062

Author: kyliau

packages/language-service/api.ts

@@ -14,7 +14,7 @@
 
 import * as ts from 'typescript';
 
-export interface NgLanguageServiceConfig {
+export interface PluginConfig {
   /**
    * If true, return only Angular results. Otherwise, return Angular + TypeScript
    * results.
@@ -25,6 +25,11 @@ export interface NgLanguageServiceConfig {
    * Otherwise return factory function for View Engine LS.
    */
   ivy: boolean;
+  /**
+   * If true, enable `strictTemplates` in Angular compiler options regardless
+   * of its value in tsconfig.json.
+   */
+  forceStrictTemplates?: true;
 }
 
 export type GetTcbResponse = {

packages/language-service/index.ts

@@ -7,29 +7,29 @@
  */
 
 import * as ts from 'typescript/lib/tsserverlibrary';
-import {NgLanguageService, NgLanguageServiceConfig} from './api';
+import {NgLanguageService, PluginConfig} from './api';
 
 export * from './api';
 
 interface PluginModule extends ts.server.PluginModule {
   create(createInfo: ts.server.PluginCreateInfo): NgLanguageService;
-  onConfigurationChanged?(config: NgLanguageServiceConfig): void;
+  onConfigurationChanged?(config: PluginConfig): void;
 }
 
 const factory: ts.server.PluginModuleFactory = (tsModule): PluginModule => {
   let plugin: PluginModule;
 
   return {
     create(info: ts.server.PluginCreateInfo): NgLanguageService {
-      const config: NgLanguageServiceConfig = info.config;
+      const config: PluginConfig = info.config;
       const bundleName = config.ivy ? 'ivy.js' : 'language-service.js';
       plugin = require(`./bundles/${bundleName}`)(tsModule);
       return plugin.create(info);
     },
     getExternalFiles(project: ts.server.Project): string[] {
       return plugin?.getExternalFiles?.(project) ?? [];
     },
-    onConfigurationChanged(config: NgLanguageServiceConfig): void {
+    onConfigurationChanged(config: PluginConfig): void {
       plugin?.onConfigurationChanged?.(config);
     },
   };

packages/language-service/ivy/language_service.ts

@@ -29,6 +29,14 @@ import {getTargetAtPosition, TargetContext, TargetNodeKind} from './template_tar
 import {findTightestNode, getClassDeclFromDecoratorProp, getPropertyAssignmentFromValue} from './ts_utils';
 import {getTemplateInfoAtPosition, isTypeScriptFile} from './utils';
 
+interface LanguageServiceConfig {
+  /**
+   * If true, enable `strictTemplates` in Angular compiler options regardless
+   * of its value in tsconfig.json.
+   */
+  forceStrictTemplates?: true;
+}
+
 export class LanguageService {
   private options: CompilerOptions;
   readonly compilerFactory: CompilerFactory;
@@ -37,9 +45,12 @@ export class LanguageService {
   private readonly parseConfigHost: LSParseConfigHost;
 
   constructor(
-      private readonly project: ts.server.Project, private readonly tsLS: ts.LanguageService) {
+      private readonly project: ts.server.Project,
+      private readonly tsLS: ts.LanguageService,
+      private readonly config: LanguageServiceConfig,
+  ) {
     this.parseConfigHost = new LSParseConfigHost(project.projectService.host);
-    this.options = parseNgCompilerOptions(project, this.parseConfigHost);
+    this.options = parseNgCompilerOptions(project, this.parseConfigHost, config);
     logCompilerOptions(project, this.options);
     this.strategy = createTypeCheckingProgramStrategy(project);
     this.adapter = new LanguageServiceAdapter(project);
@@ -340,7 +351,7 @@ export class LanguageService {
         project.getConfigFilePath(), (fileName: string, eventKind: ts.FileWatcherEventKind) => {
           project.log(`Config file changed: ${fileName}`);
           if (eventKind === ts.FileWatcherEventKind.Changed) {
-            this.options = parseNgCompilerOptions(project, this.parseConfigHost);
+            this.options = parseNgCompilerOptions(project, this.parseConfigHost, this.config);
             logCompilerOptions(project, this.options);
           }
         });
@@ -354,7 +365,8 @@ function logCompilerOptions(project: ts.server.Project, options: CompilerOptions
 }
 
 function parseNgCompilerOptions(
-    project: ts.server.Project, host: ConfigurationHost): CompilerOptions {
+    project: ts.server.Project, host: ConfigurationHost,
+    config: LanguageServiceConfig): CompilerOptions {
   if (!(project instanceof ts.server.ConfiguredProject)) {
     return {};
   }
@@ -375,6 +387,12 @@ function parseNgCompilerOptions(
   // and only the real component declaration is used.
   options.compileNonExportedClasses = false;
 
+  // If `forceStrictTemplates` is true, always enable `strictTemplates`
+  // regardless of its value in tsconfig.json.
+  if (config.forceStrictTemplates === true) {
+    options.strictTemplates = true;
+  }
+
   return options;
 }
 

packages/language-service/ivy/test/legacy/definitions_spec.ts

@@ -18,7 +18,7 @@ describe('definitions', () => {
   beforeAll(() => {
     const {project, service: _service, tsLS} = setup();
     service = _service;
-    ngLS = new LanguageService(project, tsLS);
+    ngLS = new LanguageService(project, tsLS, {});
   });
 
   beforeEach(() => {

packages/language-service/ivy/test/legacy/daignostic_spec.ts renamed to packages/language-service/ivy/test/legacy/diagnostic_spec.ts

@@ -17,7 +17,7 @@ describe('getSemanticDiagnostics', () => {
   beforeAll(() => {
     const {project, service: _service, tsLS} = setup();
     service = _service;
-    ngLS = new LanguageService(project, tsLS);
+    ngLS = new LanguageService(project, tsLS, {});
   });
 
   beforeEach(() => {

packages/language-service/ivy/test/legacy/language_service_spec.ts

@@ -23,7 +23,7 @@ describe('language service adapter', () => {
     const {project: _project, tsLS, service: _service, configFileFs: _configFileFs} = setup();
     project = _project;
     service = _service;
-    ngLS = new LanguageService(project, tsLS);
+    ngLS = new LanguageService(project, tsLS, {});
     configFileFs = _configFileFs;
   });
 
@@ -57,6 +57,33 @@ describe('language service adapter', () => {
         strictTemplates: false,
       }));
     });
+
+    it('should always enable strictTemplates if forceStrictTemplates is true', () => {
+      const {project, tsLS, configFileFs} = setup();
+      const ngLS = new LanguageService(project, tsLS, {
+        forceStrictTemplates: true,
+      });
+
+      // First make sure the default for strictTemplates is true
+      expect(ngLS.getCompilerOptions()).toEqual(jasmine.objectContaining({
+        enableIvy: true,  // default for ivy is true
+        strictTemplates: true,
+        strictInjectionParameters: true,
+      }));
+
+      // Change strictTemplates to false
+      configFileFs.overwriteConfigFile(TSCONFIG, {
+        angularCompilerOptions: {
+          strictTemplates: false,
+        }
+      });
+
+      // Make sure strictTemplates is still true because forceStrictTemplates
+      // is enabled.
+      expect(ngLS.getCompilerOptions()).toEqual(jasmine.objectContaining({
+        strictTemplates: true,
+      }));
+    });
   });
 
   describe('compiler options diagnostics', () => {

packages/language-service/ivy/test/legacy/ts_plugin_spec.ts

@@ -19,7 +19,7 @@ describe('getExternalFiles()', () => {
     // a global analysis
     expect(externalFiles).toEqual([]);
     // Trigger global analysis
-    const ngLS = new LanguageService(project, tsLS);
+    const ngLS = new LanguageService(project, tsLS, {});
     ngLS.getSemanticDiagnostics(APP_COMPONENT);
     // Now that global analysis is run, we should have all the typecheck files
     externalFiles = getExternalFiles(project);

packages/language-service/ivy/test/legacy/type_definitions_spec.ts

@@ -18,7 +18,7 @@ describe('type definitions', () => {
   beforeAll(() => {
     const {project, service: _service, tsLS} = setup();
     service = _service;
-    ngLS = new LanguageService(project, tsLS);
+    ngLS = new LanguageService(project, tsLS, {});
   });
 
   const possibleArrayDefFiles = new Set([

packages/language-service/ivy/testing/src/project.ts

@@ -92,7 +92,7 @@ export class Project {
 
     // The following operation forces a ts.Program to be created.
     this.tsLS = tsProject.getLanguageService();
-    this.ngLS = new LanguageService(tsProject, this.tsLS);
+    this.ngLS = new LanguageService(tsProject, this.tsLS, {});
   }
 
   openFile(projectFileName: string): OpenBuffer {
@@ -188,4 +188,4 @@ function getClassOrError(sf: ts.SourceFile, name: string): ts.ClassDeclaration {
     }
   }
   throw new Error(`Class ${name} not found in file: ${sf.fileName}: ${sf.text}`);
-}
+}

packages/language-service/ivy/ts_plugin.ts

@@ -16,7 +16,7 @@ export function create(info: ts.server.PluginCreateInfo): NgLanguageService {
   const {project, languageService: tsLS, config} = info;
   const angularOnly = config?.angularOnly === true;
 
-  const ngLS = new LanguageService(project, tsLS);
+  const ngLS = new LanguageService(project, tsLS, config);
 
   function getSemanticDiagnostics(fileName: string): ts.Diagnostic[] {
     const diagnostics: ts.Diagnostic[] = [];