Reputation: 25604

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?

Upvotes: 540

Answers (30)

Rajat Kumar

Reputation: 1529

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.

Upvotes: 122

Vishal Munagekar

Reputation: 83

I resolved the same issue in the VS Code Version:1.76.0 and fixed it by following these steps.

Open any TS file > click on the TypeScript at the bottom line Select language mode
Then click on Configure 'TypeScript' language based settings...
it will open the settings.json file
add line number 3 if it is not there. and save it:

{
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "js/ts.implicitProjectConfig.experimentalDecorators":true, // Add this line
    "explorer.confirmDelete": false,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "window.zoomLevel": 1
}

Upvotes: 3

Bilal Ahmad

Reputation: 859

STEP 1: Press ctrl + , in VS code

STEP 2: Enter 'js/ts.implicitProjectConfig: Experimental Decorators' in search box

STEP 3: check the checkbox related to the search

Upvotes: 12

JanBrus

Reputation: 1520

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.

Upvotes: 2

Max Armando Sanchez

Reputation: 21

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.

Upvotes: 1

pakut2

Reputation: 682

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

Upvotes: 4

José Júnior

Reputation: 611

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

Upvotes: 1

Manoj Paul

Reputation: 5557

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

Upvotes: 515

mehdi Ichkarrane

Reputation: 426

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

Upvotes: 4

ashkufaraz

Reputation: 5307

You can run with this code

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

Upvotes: 2

Paul D

Reputation: 671

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.

Upvotes: 27

Chameleon

Reputation: 149

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

Upvotes: 6

Ken

Reputation: 536

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.

Upvotes: 21

tksilicon

Reputation: 4446

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

Upvotes: 3

Yirga

Reputation: 891

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

Upvotes: 0

Taqi Raza Khan

Reputation: 684

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.

Upvotes: 36

Neal Connolly

Reputation: 49

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

Upvotes: 0

Muzaffar Mahmood

Reputation: 1908

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

Upvotes: 18

HNL

Reputation: 103

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

Upvotes: 0

Dmitriy Botov

Reputation: 2651

File -> Preferences -> Settings

Upvotes: 210

linguamachina

Reputation: 5803

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.

Upvotes: 455

Pawel Gorczynski

Reputation: 1305

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.

Upvotes: 10

Dayán Ruiz

Reputation: 680

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.

Upvotes: 4

Koji D'infinte

Reputation: 1454

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

 tsc filename.ts --experimentalDecorators "true"

Upvotes: 10

petey m

Reputation: 365

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.

Upvotes: 9

Rajesh Pal

Reputation: 183

"javascript.implicitProjectConfig.experimentalDecorators": true

Will solve this problem.

Upvotes: 14

Geetesh

Reputation: 315

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

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

Upvotes: 12

user9157769

Reputation:

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

Upvotes: 0

Mostafa

Reputation: 81

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

Upvotes: 8

kumar chandraketu

Reputation: 2370

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
1. Reload the project in Visual studio.

see more details at this location.

Upvotes: 5

Experimental decorators warning in TypeScript compilation

Answers (30)

Related Questions