TypeScript Experimental Decorator Error in Visual Studio/Code
I ran into this issue in Visual Studio 2019 while working on a .NET Core/Angular 8 project. It seems like every new component I created displayed an error or a warning for experimental decorators. After doing a bunch of research this issue seems more prominent in Visual Studio Code so I thought I would share what I found online in hopes of helping others.
The Unresolvable Strange experimentalDecorator Error
Verify TypeScript Configuration
It’s important to make sure experimentalDecorator is enabled and set to true in the tsconfig.json settings file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "module": "esnext", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } } |
Visual Studio (2019) Solution
In order to fix this issue, you will need to add the code below to the .csproj file of the web app in Visual Studio. In Visual Studio 2019 you can edit the .csproj file by double-clicking on the project name. In older versions you will have to right-click the project and select “Unload” and then you can select “Edit csproj file”.
|
1 2 3 4 |
<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptModuleKind>commonjs</TypeScriptModuleKind> <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> </PropertyGroup> |
Visual Studio Code Solution
You will need to add a setting to the file located at .vscode\settings.json.
|
1 2 3 |
{ “javascript.implicitProjectConfig.experimentalDecorators”: true } |
