Experimental decorators warning in TypeScript compilation

Typescript Problem Overview

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?

Typescript Solutions

Solution 1 - Typescript

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

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Preferences -> Settings

UPDATE

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

"js/ts.implicitProjectConfig.experimentalDecorators":true

Solution 2 - Typescript

Although VS Code is a great editor for TypeScript projects, it needs a kick every now and again. Often, without warning, certain files cause it to freak out and complain. Mostly the fix seems to be to save and close all open files, then open tsconfig.json. After that you should be able to re-open the offending file without error. If it doesn't work, lather, rinse, and repeat.

If your tsconfig.json specifies its source files using the files array, IntelliSense will only function correctly if the file in question is referenced such that VS Code can find it by traversing the input file tree.

Edit: The 'reload window' command (added ages ago now) should solve this problem once and for all.

Solution 3 - Typescript

File -> Preferences -> Settings

Solution 4 - Typescript

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

Solution 5 - Typescript

Please follow the below step to remove this warning message.

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

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

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

Solution 6 - Typescript

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

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

Solution 7 - Typescript

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.

Solution 8 - Typescript

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

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

Solution 9 - Typescript

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.

Solution 10 - Typescript

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.

Solution 11 - Typescript

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

Solution 12 - Typescript

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

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'

Solution 13 - Typescript

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

Solution 14 - Typescript

"javascript.implicitProjectConfig.experimentalDecorators": true

Will solve this problem.

Solution 15 - Typescript

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

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

Solution 16 - Typescript

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.

Solution 17 - Typescript

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.

Solution 18 - Typescript

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

 tsc filename.ts --experimentalDecorators "true"

Solution 19 - Typescript

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

Solution 20 - Typescript

For the sake of clarity and stupidity.

Open .vscode/settings.json.
Add "typescript.tsdk": "node_modules/typescript/lib" on it.
Save it.
Restart Visual Studio Code.

Solution 21 - Typescript

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

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

Reload the project in Visual studio.

see more details at this location.

Solution 22 - Typescript

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

Solution 23 - Typescript

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.

Solution 24 - Typescript

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

Solution 25 - Typescript

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

> tsconfig.json is out of src folder

Solution 26 - Typescript

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 ],

Solution 27 - Typescript

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

Solution 28 - Typescript

You can run with this code

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

Solution 29 - Typescript

I used React and Nest for my project. Had this error displayed in the backend, but adding those two lines to react's tsconfig.json fixed the issue for some reason. Furthermore, everything above did not work for me

"compilerOptions": {
    ...
    "experimentalDecorators": true,
    "strictPropertyInitialization": false
},

Solution 30 - Typescript

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

Solution 31 - Typescript

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.

Solution 32 - Typescript

I had the same issues. It was fixed by importing the class with 'decorator warning' by other class.

Solution 33 - Typescript

In my case, I just needed to import the component or module I created into another module(for example the shared module). Somehow this way VS Code realizes the file exists.

Solution 34 - Typescript

This error can also mean that you have an error in tsconfig.json In my case I was moving around a library and didnt fix path

"extends": "../../tsconfig.base.json",

After fixing it, error went away imidiately, no need to restart VS Code.

Solution 35 - Typescript

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

Solution 36 - Typescript

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

Solution 37 - Typescript

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

Solution 38 - Typescript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	bensiu	View Question on Stackoverflow
Solution 1 - Typescript	Manoj Paul	View Answer on Stackoverflow
Solution 2 - Typescript	linguamachina	View Answer on Stackoverflow
Solution 3 - Typescript	Dmitriy Botov	View Answer on Stackoverflow
Solution 4 - Typescript	Developer Thing	View Answer on Stackoverflow
Solution 5 - Typescript	Rajat Kumar	View Answer on Stackoverflow
Solution 6 - Typescript	Muhammed Moussa	View Answer on Stackoverflow
Solution 7 - Typescript	Taqi Raza Khan	View Answer on Stackoverflow
Solution 8 - Typescript	beewest	View Answer on Stackoverflow
Solution 9 - Typescript	Ken	View Answer on Stackoverflow
Solution 10 - Typescript	Paul D	View Answer on Stackoverflow
Solution 11 - Typescript	Muzaffar Mahmood	View Answer on Stackoverflow
Solution 12 - Typescript	Vinothkumar Arputharaj	View Answer on Stackoverflow
Solution 13 - Typescript	pearpages	View Answer on Stackoverflow
Solution 14 - Typescript	Rajesh Pal	View Answer on Stackoverflow
Solution 15 - Typescript	Geetesh	View Answer on Stackoverflow
Solution 16 - Typescript	Pawel Gorczynski	View Answer on Stackoverflow
Solution 17 - Typescript	petey m	View Answer on Stackoverflow
Solution 18 - Typescript	Koji D'infinte	View Answer on Stackoverflow
Solution 19 - Typescript	Mostafa	View Answer on Stackoverflow
Solution 20 - Typescript	LEMUEL ADANE	View Answer on Stackoverflow
Solution 21 - Typescript	kumar chandraketu	View Answer on Stackoverflow
Solution 22 - Typescript	Chameleon	View Answer on Stackoverflow
Solution 23 - Typescript	Dayán Ruiz	View Answer on Stackoverflow
Solution 24 - Typescript	mehdi Ichkarrane	View Answer on Stackoverflow
Solution 25 - Typescript	Andrew Yavorsky	View Answer on Stackoverflow
Solution 26 - Typescript	Mohammad Javed	View Answer on Stackoverflow
Solution 27 - Typescript	tksilicon	View Answer on Stackoverflow
Solution 28 - Typescript	ashkufaraz	View Answer on Stackoverflow
Solution 29 - Typescript	pakut2	View Answer on Stackoverflow
Solution 30 - Typescript	D. Greene	View Answer on Stackoverflow
Solution 31 - Typescript	sparebytes	View Answer on Stackoverflow
Solution 32 - Typescript	Junior Vieira	View Answer on Stackoverflow
Solution 33 - Typescript	Max Armando Sanchez	View Answer on Stackoverflow
Solution 34 - Typescript	JanBrus	View Answer on Stackoverflow
Solution 35 - Typescript	user9157769	View Answer on Stackoverflow
Solution 36 - Typescript	HNL	View Answer on Stackoverflow
Solution 37 - Typescript	Neal Connolly	View Answer on Stackoverflow
Solution 38 - Typescript	Yirga	View Answer on Stackoverflow