[typescript] Experimental decorators warning in TypeScript compilation

I receive the warning...

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

... even though my compilerOptions in tsconfig.json have the following settings:

"emitDecoratorMetadata": true,
"experimentalDecorators": true,

What is weird is that some random classes that use decorators do not show that warning but the rest in the same project do.

What could cause such behavior in the TypeScript compiler?

This question is related to typescript decorator visual-studio-code

The answer is


in my case I solved this issue by setting "include": [ "src/**/*"] in my tsconfig.json file and restarting vscode. I've got this solution from a github issue: https://github.com/microsoft/TypeScript/issues/9335


Open entire project's folder instead of project-name/src

tsconfig.json is out of src folder


Open settings.json file in the following location <project_folder>/.vscode/settings.json

or you can open the file from the menu as mentioned below

VSCode -> File -> Preferences -> Workspace Settings

experimentalDecorators settings

Then add the following lines in settings.json file

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "enable_typescript_language_service": false
}

That's all. You will see no warning/error regarding 'experimentalDecorators'


I faced the same issue while creating an Injectable Services in Angular 2. I have all the things at place in tsconfig.json .Still I was getting this error at ColorsImmutable line.

@Injectable()
export class ColorsImmutable {

And fix was to register the Service at module Level or Component Level using the providers array.

providers:[ColorsImmutable ],

So it turns out you can get around this by matching your module name to the file name. If you have the module name BankSpecialtyModule then the file name should be. bank-specialty.module.ts


I had this error with following statement

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.ts(1219)

It was there because my Component was not registered in AppModule or (app.module.ts) i simply gave the namespace like

import { abcComponent } from '../app/abc/abc.component';

and also registered it in declarations


I corrected the warning by removing "baseUrl": "", from the tsconfig.json file


I've to add the following in the settings.json file of vscode to remove the warning.

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Preferences -> Settings

enter image description here

UPDATE

As Clepsyd pointed out, this setting had been deprecated. You need to use now

"js/ts.implicitProjectConfig.experimentalDecorators":true

enter image description here


This answer is intended for people who are using a Javascript project and not a Typescript one. Instead of a tsconfig.json file you may use a jsconfig.json file.

In the particular case of having the decorators warning you wan write inside the file:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

Fort the buggy behaviors asked, it's always better to specify the "include" in the config file, and restart the editor. E.g.

{
    "compilerOptions": {
        "target": "ES6",
        "experimentalDecorators": true
    },
    "include": [
        "app/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

Please check you oppened in your VS Code the folder of the entire project and not only the src folder, because if you open only the src, then ts.config.json (located in the project folder) file will not be in scope, and VS will not recognize the experimental decorators parameters.

In my case this fixed all the problems related to this issue.


If you using Deno JavaScript and TypeScript runtime and you enable experimentalDecorators:true in tsconfig.json or the VSCode ide settings. It will not work. According to Deno requirement, you need to provide tsconfig as a flag when running a Deno file. See Custom TypeScript Compiler Options

In my particular case I was running a Deno test and used.

$ deno test -c tsconfig.json

If it is a file, you have something like

 $ deno run -c tsconfig.json mod.ts

my tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext"
  }
}

Not to belabor the point but be sure to add the following to

  • Workspace Settings not User Settings

under File >> Preferences >> Settings

"javascript.implicitProjectConfig.experimentalDecorators": true

this fixed the issue for me, and i tried quite a few suggestions i found here and other places.


"javascript.implicitProjectConfig.experimentalDecorators": true

Will solve this problem.


This error also occurs when you choose "src" folder for your workspace folder.

When the root folder, folder where the "src", "node_modules" are located is chosen, the error disappears


You can also try with ng build. I've just rebuilt the app and now it's not complying.


I experienced this error when I created a new module and move my *.module.ts and *-routing.module.ts file to another folder. After I deleted the two files and created the module on the new folder it works perfectly. Environment Angular Version 9 and Angular CLI version 9.1.0


In VSCode, Go to File => Preferences => Settings (or Control+comma) and it will open the User Settings file. Search "javascript.implicitProjectConfig.experimentalDecorators": true and then check the checkbox for experimentalDecorators to the file and it should fix it. It did for me.

enter image description here


For me, this error "Experimental support for decorators is a feature that is subject to change in a future release. (etc)" only happened in VS Code in an Angular project and only when creating a new Service.

The solution above: "In Visual Code Studio Go to File >> Preferences >> Settings, Search "decorator" in search field and Checking the option JavaScript › Implicit Project Config: Experimental Decorators" solved the problem.

Also, stopping the ng serve in the terminal window and restarting it made the error disappear after recompile.


File -> Preferences -> Settings


I get this warning displayed in vscode when creating a new Angular service with the

@Injectable({
  providedIn: 'root'
})

syntax (rather than providing the service in app.module.ts).

The warning persists until I reference the new service somewhere in the project. Once the service gets used the warning goes away. No typescript configuration or vscode settings changes necessary.


For the sake of clarity and stupidity.

1) Open .vscode/settings.json.

2) Add "typescript.tsdk": "node_modules/typescript/lib" on it.

3) Save it.

4) Restart Visual Studio Code.


In Visual Code Studio Go to File >> Preferences >> Settings, Search "decorator" in search field and Check the option as in image. enter image description here


I added this option to tsconfig.json, "baseUrl": "front-end" Replace front-end with the name of your angular-cli project.


Please follow the below step to remove this warning message. enter image description here

Step 1: Go to setting in your IDE then find or search the experimentalDecorators.enter image description here

Step 2: then click on checkbox and warning has been remove in your page.

enter image description here

Thank you Happy Coding ..........


  1. Open VScode.
  2. Press ctrl+comma
  3. Follow the directions in the screen shot
    1. Search about experimentalDecorators
    2. Edit it

have to add typescript.tsdk to my .vscode/settings.json:

"typescript.tsdk": "node_modules/typescript/lib"

If you are using cli to compile *.ts files, you can set experimentalDecorators using the following command:

 tsc filename.ts --experimentalDecorators "true"

Add following lines in tsconfig.json and restart VS Code.

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "target": "es5",
        "allowJs": true
    }
}

If you are working in Visual studio. You can try this fix

  1. Unload your project from visual studio
  2. Go to your project home directory and Open "csproj" file.
  3. Add TypeScriptExperimentalDecorators to this section as shown in image

    enter image description here

    1. Reload the project in Visual studio.

see more details at this location.


I had this problem recently under Visual Studio 2017 - turned out it was caused by a "feature" of VS - ignoring tsconfig.json when Build action is not set to Content.

So changing the Build action to Content and reloading the solution solved the problem.


You can run with this code

 tsc .\src\index.ts --experimentalDecorators "true" --emitDecoratorMetadata "true"

inside your project create file tsconfig.json , then add this lines

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

You might run into this issue if you open a TS file that exists outside of the project. For instance, I'm using lerna and had a file open from another package. Although that other package had it's own tsconfig with experimental decorators, VsCode doesn't honor it.


Examples related to typescript

TS1086: An accessor cannot be declared in ambient context Element implicitly has an 'any' type because expression of type 'string' can't be used to index Angular @ViewChild() error: Expected 2 arguments, but got 1 Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Understanding esModuleInterop in tsconfig file How can I solve the error 'TS2532: Object is possibly 'undefined'? Typescript: Type 'string | undefined' is not assignable to type 'string' Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] Can't perform a React state update on an unmounted component TypeScript and React - children type?

Examples related to decorator

Experimental decorators warning in TypeScript compilation How does the @property decorator work in Python? Calling class staticmethod within the class body? Creating a singleton in Python Decorators with parameters? Python decorators in classes Is there a decorator to simply cache function return values? How to make function decorators and chain them together? How to decorate a class? What does functools.wraps do?

Examples related to visual-studio-code

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error Cannot edit in read-only editor VS Code How to setup virtual environment for Python in VS Code? Pylint "unresolved import" error in Visual Studio Code Why do I keep getting Delete 'cr' [prettier/prettier]? How to set up devices for VS Code for a Flutter emulator VSCode single to double quote automatic replace js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check How can I clear the terminal in Visual Studio Code?