Decorators error in VS code editor after upgrading to Angular 10

Question

Error: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

In Angular 9 with same project no such error was there.

Angular10 has now added tsconfig.base.json file.

tsconfig.json file updated as:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}

tsconfig.app.json:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.base.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
  }
}

I noticed that content of tsconfig.json in Angular 9 has been moved to tsconfig.base.json in Angular 10.

Answer 1

I was having the same issue in VSCode with Angular 10 freshly installed, I checked and experimental decorator was already added, but still, I was getting that annoying warning and the squiggly line, so what I did, I simply saw that vscode is using an old version of typescript so, I click on bottom-right of vscode where it was showing version 3.8.3, and I changed it to the latest version, which was installed with angular, and my problem gets solved.

let me know if it helps and resolved your issue as well.

Thank You

Answer 2

It generally happens if you open the vs code from wrong directory. (Eg opening VScode from app folder instead of root).

If directory issue isn't the case, Please restart the Vs code.

If still you are seeing the same issue, then do the following :

• Go to File => Preferences => Settings (or Control+comma) and it will open the User Settings file. Search "javascript.implicitProjectConfig.experimentalDecorators" and then check the checkbox for experimentalDecorators

or,

• Add the following in VScode settings.json

"javascript.implicitProjectConfig.experimentalDecorators": true

Answer 3

TLDR

Import your decorated class into some other file that is already included in TypeScript compilation context which starts from src/main.ts file.

Explanation

Angular 10 uses TypeScript 3.9 which uses "Solution style" for tsconfig.json files. This tsconfig.json file is used by editors and TypeScript’s language server. Now this file can include several references to other tsconfig files, e.g. tsconfig.app.json and tsconfig.spec.json.

Inside those configs we have files and include options defined like:

"files": [
  "src/main.ts",
  "src/polyfills.ts"
],
"include": [
  "src/**/*.d.ts"
]

These two options define TypeScript compilation context. Now TypeScript will compile those files and any files that are referenced from already include in compilation files. And your editor also follows that rule.

If you created some file and define some class with decorator but didn't import it in any included in compilation file then you will get error.

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

The reason for this is that for that specific file TypeScript doesn't see experimentalDecorators option.

Solution here is: you should import your class in some other class that is included to compilation context.

Prior to Angular 10 we had the following tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
  }
}

We don't see any files or include sections here which means that

If no 'files' or 'include' property is present in a tsconfig.json, the compiler defaults to including all files in the containing directory and subdirectories except those specified by 'exclude'.

And that's the reason you didn't see that error in Angular 9. A newly created file was immediately included in compilation context.