feat: Show prompt to enable strictTemplates

This commit adds a prompt to encourage users turn on `strictTemplates` so
that they can get the most out of Angular language service.

Author: kyliau

.vscode/launch.json

@@ -2,6 +2,16 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Integration test: Attach to server",
+      "port": 9330,
+      "request": "attach",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "outFiles": ["${workspaceRoot}/dist/integration/lsp/*.js"],
+      "type": "node"
+    },
     {
       "type": "extensionHost",
       "request": "launch",

client/src/client.ts

@@ -11,7 +11,7 @@ import * as path from 'path';
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient/node';
 
-import {ProjectLoadingFinish, ProjectLoadingStart} from '../common/notifications';
+import {ProjectLoadingFinish, ProjectLoadingStart, SuggestStrictMode, SuggestStrictModeParams} from '../common/notifications';
 import {NgccProgress, NgccProgressToken, NgccProgressType} from '../common/progress';
 
 import {ProgressReporter} from './progress-reporter';
@@ -76,7 +76,7 @@ export class AngularLanguageClient implements vscode.Disposable {
     await this.client.onReady();
     // Must wait for the client to be ready before registering notification
     // handlers.
-    registerNotificationHandlers(this.client);
+    registerNotificationHandlers(this.client, this.context);
     registerProgressHandlers(this.client, this.context);
   }
 
@@ -104,8 +104,9 @@ export class AngularLanguageClient implements vscode.Disposable {
   }
 }
 
-function registerNotificationHandlers(client: lsp.LanguageClient) {
-  client.onNotification(ProjectLoadingStart, () => {
+function registerNotificationHandlers(
+    client: lsp.LanguageClient, context: vscode.ExtensionContext) {
+  const disposable1 = client.onNotification(ProjectLoadingStart, () => {
     vscode.window.withProgress(
         {
           location: vscode.ProgressLocation.Window,
@@ -116,6 +117,26 @@ function registerNotificationHandlers(client: lsp.LanguageClient) {
         }),
     );
   });
+
+  const disposable2 =
+      client.onNotification(SuggestStrictMode, async (params: SuggestStrictModeParams) => {
+        const openTsConfig = 'Open tsconfig.json';
+        // Markdown is not generally supported in `showInformationMessage()`,
+        // but links are supported. See
+        // https://github.com/microsoft/vscode/issues/20595#issuecomment-281099832
+        const selection = await vscode.window.showInformationMessage(
+            'Some language features are not available. To access all features, enable ' +
+                '[strictTemplates](https://angular.io/guide/angular-compiler-options#stricttemplates) in ' +
+                '[angularCompilerOptions](https://angular.io/guide/angular-compiler-options).',
+            openTsConfig,
+        );
+        if (selection === openTsConfig) {
+          const document = await vscode.workspace.openTextDocument(params.configFilePath);
+          vscode.window.showTextDocument(document);
+        }
+      });
+
+  context.subscriptions.push(disposable1, disposable2);
 }
 
 function registerProgressHandlers(client: lsp.LanguageClient, context: vscode.ExtensionContext) {

common/notifications.ts

@@ -18,3 +18,11 @@ export interface ProjectLanguageServiceParams {
 
 export const ProjectLanguageService =
     new NotificationType<ProjectLanguageServiceParams>('angular/projectLanguageService');
+
+export interface SuggestStrictModeParams {
+  configFilePath: string;
+  message: string;
+}
+
+export const SuggestStrictMode =
+    new NotificationType<SuggestStrictModeParams>('angular/suggestStrictMode');

integration/lsp/ivy_spec.ts

@@ -6,13 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import * as fs from 'fs';
 import {MessageConnection} from 'vscode-jsonrpc';
 import * as lsp from 'vscode-languageserver-protocol';
 import {URI} from 'vscode-uri';
-import {ProjectLanguageService, ProjectLanguageServiceParams} from '../../common/notifications';
+
+import {ProjectLanguageService, ProjectLanguageServiceParams, SuggestStrictMode, SuggestStrictModeParams} from '../../common/notifications';
 import {NgccProgress, NgccProgressToken, NgccProgressType} from '../../common/progress';
 
-import {APP_COMPONENT, createConnection, FOO_COMPONENT, FOO_TEMPLATE, initializeServer, openTextDocument} from './test_utils';
+import {APP_COMPONENT, createConnection, createTracer, FOO_COMPONENT, FOO_TEMPLATE, initializeServer, openTextDocument, TSCONFIG} from './test_utils';
 
 describe('Angular Ivy language server', () => {
   jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000; /* 10 seconds */
@@ -23,6 +25,10 @@ describe('Angular Ivy language server', () => {
     client = createConnection({
       ivy: true,
     });
+    // If debugging, set to
+    // - lsp.Trace.Messages to inspect request/response/notification, or
+    // - lsp.Trace.Verbose to inspect payload
+    client.trace(lsp.Trace.Off, createTracer());
     client.listen();
     await initializeServer(client);
   });
@@ -259,6 +265,27 @@ describe('Angular Ivy language server', () => {
       });
     });
   });
+
+  describe('compiler options', () => {
+    const originalConfig = fs.readFileSync(TSCONFIG, 'utf-8');
+
+    afterEach(() => {
+      // TODO(kyliau): Use an in-memory FS harness for the server
+      fs.writeFileSync(TSCONFIG, originalConfig);
+    });
+
+    it('should suggest strict mode', async () => {
+      const config = JSON.parse(originalConfig);
+      config.angularCompilerOptions.strictTemplates = false;
+      fs.writeFileSync(TSCONFIG, JSON.stringify(config, null, 2));
+
+      openTextDocument(client, APP_COMPONENT);
+      const languageServiceEnabled = await waitForNgcc(client);
+      expect(languageServiceEnabled).toBeTrue();
+      const configFilePath = await onSuggestStrictMode(client);
+      expect(configFilePath.endsWith('integration/project/tsconfig.json')).toBeTrue();
+    });
+  });
 });
 
 function onNgccProgress(client: MessageConnection): Promise<string> {
@@ -271,6 +298,14 @@ function onNgccProgress(client: MessageConnection): Promise<string> {
   });
 }
 
+function onSuggestStrictMode(client: MessageConnection): Promise<string> {
+  return new Promise(resolve => {
+    client.onNotification(SuggestStrictMode, (params: SuggestStrictModeParams) => {
+      resolve(params.configFilePath);
+    });
+  });
+}
+
 function onLanguageServiceStateNotification(client: MessageConnection): Promise<boolean> {
   return new Promise(resolve => {
     client.onNotification(ProjectLanguageService, (params: ProjectLanguageServiceParams) => {

integration/lsp/test_utils.ts

@@ -18,6 +18,7 @@ const PROJECT_PATH = `${PACKAGE_ROOT}/integration/project`;
 export const APP_COMPONENT = `${PROJECT_PATH}/app/app.component.ts`;
 export const FOO_TEMPLATE = `${PROJECT_PATH}/app/foo.component.html`;
 export const FOO_COMPONENT = `${PROJECT_PATH}/app/foo.component.ts`;
+export const TSCONFIG = `${PROJECT_PATH}/tsconfig.json`;
 
 export interface ServerOptions {
   ivy: boolean;
@@ -40,7 +41,7 @@ export function createConnection(serverOptions: ServerOptions): MessageConnectio
       TSC_NONPOLLING_WATCHER: 'true',
     },
     // uncomment to debug server process
-    // execArgv: ['--inspect-brk=9229']
+    // execArgv: ['--inspect-brk=9330']
   });
 
   const connection = createMessageConnection(
@@ -87,3 +88,22 @@ export function openTextDocument(client: MessageConnection, filePath: string) {
     },
   });
 }
+
+export function createTracer(): lsp.Tracer {
+  return {
+    log(messageOrDataObject: string|any, data?: string) {
+      if (typeof messageOrDataObject === 'string') {
+        const message = messageOrDataObject;
+        console.log(`[Trace - ${(new Date().toLocaleTimeString())}] ${message}`);
+        if (data) {
+          console.log(data);
+        }
+      } else {
+        const dataObject = messageOrDataObject;
+        console.log(
+            `[Trace - ${(new Date().toLocaleTimeString())}] ` +
+            JSON.stringify(dataObject, null, 2));
+      }
+    },
+  };
+}

server/src/session.ts

@@ -10,7 +10,7 @@ import * as ts from 'typescript/lib/tsserverlibrary';
 import * as lsp from 'vscode-languageserver/node';
 
 import {ServerOptions} from '../common/initialize';
-import {ProjectLanguageService, ProjectLoadingFinish, ProjectLoadingStart} from '../common/notifications';
+import {ProjectLanguageService, ProjectLoadingFinish, ProjectLoadingStart, SuggestStrictMode} from '../common/notifications';
 import {NgccProgressToken, NgccProgressType} from '../common/progress';
 
 import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './completion';
@@ -182,7 +182,7 @@ export class Session {
     // project as dirty to force update the graph.
     project.markAsDirty();
     this.info(`Enabling Ivy language service for ${project.projectName}.`);
-
+    this.handleCompilerOptionsDiagnostics(project);
     // Send diagnostics since we skipped this step when opening the file
     // (because language service was disabled while waiting for ngcc).
     // First, make sure the Angular project is complete.
@@ -203,6 +203,23 @@ export class Session {
     project.getLanguageService().getSemanticDiagnostics(fileName);
   }
 
+  private handleCompilerOptionsDiagnostics(project: ts.server.Project) {
+    if (!isConfiguredProject(project)) {
+      return;
+    }
+
+    const diags = project.getLanguageService().getCompilerOptionsDiagnostics();
+    const suggestStrictModeDiag = diags.find(d => d.code === -9910001);
+
+    if (suggestStrictModeDiag) {
+      const configFilePath: string = project.getConfigFilePath();
+      this.connection.sendNotification(SuggestStrictMode, {
+        configFilePath,
+        message: suggestStrictModeDiag.messageText,
+      });
+    }
+  }
+
   /**
    * An event handler that gets invoked whenever the program changes and
    * TS ProjectService sends `ProjectUpdatedInBackgroundEvent`. This particular