Experimental decorators warning in TypeScript compilation

Question

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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

in my case I solved this issue by setting  quot include quot      quot src      quot   in my tsconfig json file and restarting vscode  I ve got this solution from a github issue  https   github com microsoft TypeScript issues 9335

User · Answer

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

User · Answer

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

User · Answer

File -  Preferences -  Settings

User · Answer

Add following lines in tsconfig json and restart VS Code          compilerOptions              experimentalDecorators   true           target    es5            allowJs   true

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If you are using cli to compile   ts files  you can set experimentalDecorators using the following command    tsc filename ts --experimentalDecorators  true

User · Answer

I ve to add the following in the settings json file of vscode to remove the warning   quot javascript implicitProjectConfig experimentalDecorators quot   true  VSCode - gt  Preferences - gt  Settings  UPDATE As Clepsyd pointed out  this setting had been deprecated  You need to use now  quot js ts implicitProjectConfig experimentalDecorators quot  true

User · Answer

I corrected the warning by removing  baseUrl       from the tsconfig json file

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

javascript implicitProjectConfig experimentalDecorators   true   Will solve this problem

User · Answer

For me  this error  quot Experimental support for decorators is a feature that is subject to change in a future release   etc  quot  only happened in VS Code in an Angular project and only when creating a new Service  The solution above   quot In Visual Code Studio Go to File  gt  gt  Preferences  gt  gt  Settings  Search  quot decorator quot  in search field and Checking the option JavaScript     Implicit Project Config  Experimental Decorators quot  solved the problem  Also  stopping the ng serve in the terminal window and restarting it made the error disappear after recompile

User · Answer

You can run with this code  tsc   src index ts --experimentalDecorators  quot true quot  --emitDecoratorMetadata  quot true quot

User · Answer

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

User · Answer

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

User · Answer

Open entire project s folder instead of project-name src     tsconfig json is out of src folder

User · Answer

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

User · Answer

Open settings json file in the following location  lt project folder gt   vscode settings json  or you can open the file from the menu as mentioned below  VSCode - gt  File - gt  Preferences - gt  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

User · Answer

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

User · Answer

inside your project create file tsconfig json   then add this lines         compilerOptions              experimentalDecorators   true           allowJs   true

User · Answer

have to add typescript tsdk to my  vscode settings json     typescript tsdk    node modules typescript lib

[typescript] Experimental decorators warning in TypeScript compilation

Examples related to typescript

Examples related to decorator

Examples related to visual-studio-code