Suppress Angular Language Service VSCode extension's "strictTemplates in angularCompilerOptions" notification

Question

Since we upgraded our codebase to Angular 11 I get this message in VSCode:

Some language features are not available. To access all features, enable strictTemplates in angularCompilerOptions.

Source: Angular Language Service (Extension)

With a link to "Open tsconfig.json", like this:

I'm looking forward to enabling this and enjoying the new feature. But I want to set time apart to do and test this. For now, the popup in VSCode keeps coming up all the time, which is annoying and distracting.

How can I (for now) suppress this message, preferably for my current workspace?

---

• Angular Language Service (angular.ng-template) v11.2.3
• Visual Studio Code version 1.53.2 on Windows 10

Electrograph

Answer 1

If you create a .code-workspace file for your workspace, you can add the following to disable the prompt:

    "settings": {
        "angular.enable-strict-mode-prompt": false
    }

Note: if you open the workspace, the prompt shown above should have an additional button to add this setting for you:

Anatolic

Answer 2

Hi guys I had the same problem but I did this and that message stopped showing... I hope help us.

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "types": ["node", "jest"]
  },
  "include": [...],
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

Configuration

Praemunire

Thx for sharing! That turns on the feature for strictTemplates, right? Did you do it on a large project, and did it give any problems? - I don't want to do this just yet (my project is 10s of 1000s of LoC) – Electrograph

Hi @Jeroen, yes I activated it in a large project, the only thing that could give me some problems was the Formly library because it has custom objects for Angular's FormsControl – Praemunire

Answer 3

In Angular 12 the Ivy is the default engine. And when you have Version 11 installed locally and your Angular Language Service Extension is in version 12, You start to get that message the options are either to update your local copy of angular(and dependencies) to version 12 and configure the compiler, or Install a lower version of the Angular Language Services as shown in some of the answers above.

Or click that option in the Angular Language Service

Of course is discouraged to do that. As the future is Ivy :). But is a temporary option until everything is ready among the community and the different dependencies

Anteversion

Answer 4

Open tsconfig.json file from root location. Add "strictTemplates": true

This is how tsconfig.json looks :

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictTemplates": true
  }
}

Hon

How is this answer different from the answer on 25 February (a few months earlier)? – Munitions

Answer 5

Here's the PR that introduced this warning: https://github.com/angular/vscode-ng-language-service/pull/1097

Does your project use multiple .tsconfig files? I believe every time a new .tsconfig is found the Angular Language Service needs to restart, which triggers this error. I'm going to look into why there isn't an option to suppress the error permanently.

Bullyboy

We do have .tsconfig files indeed. A base one in the root, and one in each Angular (app) Project that extends the base one. Currently nowhere in strictTemplates is mentioned, haven't tried making it explicitly false yet. – Electrograph

@Electrograph so due to the nature of how .tsconfigs manage paths, there's no concept of a project level .tsconfig -- and the extension can't get all the related .tsconfigs without effectively compiling the program. I'm going to make a PR to give the option to just silence the warning globally. – Bullyboy

Answer 6

For Angular 10+ :

Just add these lines:

"angularCompilerOptions": {

   "fullTemplateTypeCheck": true,
   "preserveWhitespaces": true

}

For more, here's the documentation : Doc

Mullin

Answer 7

I had the same problem, and it seems it disappeared by installing Angular Extension Pack.

Anne

Thx for your reply! Do you mean this pack? There's a ton of extensions in there, would be curious to know which one actually suppresses the warning then, not keen on installing 20ish extensions to suppress a warning. – Electrograph

I am facing a similar issue after updating my Visual studio code today to Version: 1.54.1. Did this get resolved in any other way rather than installing the Angular extension Pack? – Chirp

As a workaround it helped, but it is still showing the notification, so maybe this is just a partial solution – Hattiehatton