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

Jeison Nisperuza · Answer 1 · 2021-02-25T16:57:46.000

22

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

edited Feb 25 '21 at 16:57

answered Feb 25 '21 at 16:51

Jeison Nisperuza

329
1
3

2

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) – Jeroen Feb 26 '21 at 15:18
2

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 – Jeison Nisperuza Feb 27 '21 at 23:01

Atanas Kovachev · Answer 2 · 2021-05-21T08:20:29.740

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

score 2 · Answer 3 · answered May 13 '21 at 20:29

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
  }
}

score 2 · Accepted Answer · edited Jun 25 '21 at 07:07

2

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:

edited Jun 25 '21 at 07:07

Jeroen

60,696
40
206
339

answered Jun 18 '21 at 14:24

seairth

1,966
15
22

score 1 · Answer 5 · answered Mar 10 '21 at 03:26

1

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.

answered Mar 10 '21 at 03:26

ehavener

71
4

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. – Jeroen Mar 10 '21 at 13:50
@Jeroen so due to the nature of how `.tsconfig`s manage paths, there's no concept of a project level `.tsconfig` -- and the extension can't get all the related `.tsconfig`s without effectively compiling the program. I'm going to make a PR to give the option to just silence the warning globally. – ehavener Mar 10 '21 at 19:17

score 1 · Answer 6 · answered May 04 '21 at 11:12

1

For Angular 10+ :

Just add these lines:

"angularCompilerOptions": {

   "fullTemplateTypeCheck": true,
   "preserveWhitespaces": true

}

For more, here's the documentation : Doc

answered May 04 '21 at 11:12

TheScripterX

248
3
14

score 0 · Answer 7 · answered Feb 24 '21 at 17:41

0

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

answered Feb 24 '21 at 17:41

FrankJ

65
2

1

Thx for your reply! Do you mean [this pack](https://marketplace.visualstudio.com/items?itemName=doggy8088.angular-extension-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. – Jeroen Mar 01 '21 at 10:17
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? – ShrawaniSilwal Mar 05 '21 at 21:54
As a workaround it helped, but it is still showing the notification, so maybe this is just a partial solution – Kevin Oswaldo May 14 '21 at 14:48

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

7 Answers7