Visual Studio 2015 RC Typescript experimental decorators error

Question

How do I disable the following error in VS2015?

TS1219 Experimental support for decorators is a feature that is subject to change in a future release. Specify '--experimentalDecorators' to remove this warning.

I'm trying to use Angular2 annotations. I tried adding the following manually to the project file with no luck:

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>

I've also install the TypeScript 1.5.0 beta extension.

Answer 1

By simply using Nuget Package Manager, I was able to UPGRADE my TypeScript to the lastest version and this fixed the issue.

This is related to Typescript version conflicts from what I can see.

Verify your Typescript version and make appropriate upgrades or downgrades should fix the issue.

Answer 2

Visual Studio 2015 supports tsconfig files starting with Typescript version 1.8. Create tsconfig.json file at the root of your project and add experimentalDecorators compiler option.

Example:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,

    "experimentalDecorators": true
  }
}

For older versions:

https://github.com/Microsoft/TypeScript/issues/3934

If you have a project file, tsconfig will not be honored. the project file takes precedence. We are still flushing the integration story between a VS project and a tsconfig as you can specify compiler options in both.

so to disable the error message, right-click on project file, unload project, then right-click edit the project file, At the end of the file there should be a config section, add:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  ....
  <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
</PropertyGroup>

save and reload.

You may also need TypeScriptEmitDecoratorMetadata to map --emitDecroatorMetadata

Answer 3

http://www.cmichaelgraham.io/aurelia-typescript-samples/vs2015-samples/vs2015-samples.html

<TypeScriptToolsVersion>1.7</TypeScriptToolsVersion>
...........
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata --experimentalDecorators </TypeScriptAdditionalFlags>

Answer 4

This error came up for me because I tried mistakenly made a new file with extension ".js" instead of ".ts". It went away after changing the file extension to ".ts".

Answer 5

I had similar problem. I have quite some to share with my findings. I'm working on Angular 2 too (ng-book-2).

What am I using?

IDE: WebStorm

Typescript: 1.6.2

When: 10 Oct 2015

What am I doing?

I tried compiling my app.ts to app.js; however, I encounter this error:

error TS5052: Option 'emitDecoratorMetadata' cannot be specified without specifying option 'experimentalDecorators'.

This was my tsconfig.json BEFORE

{
    "version": "1.5.0",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        "./app.ts",
        "./typings/angular2/angular2.d.ts",
        "./typings/es6-promise/es6-promise.d.ts",
        "./typings/rx/rx-lite.d.ts",
        "./typings/rx/rx.d.ts",
        "./typings/tsd.d.ts"
    ]
}

This is my tsconfig.json AFTER

{
    "version": "1.6.2",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "files": [
        "./app.ts",
        "./typings/angular2/angular2.d.ts"
    ]
}

Changing the tsconfig.json from before to after effectively solves two problems of mine. One is the above and the other is the below problem. The latter problem is discussed here angular2 with ES6 should not reference es6-promise

typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'. typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'. typings/es6-shim/es6-shim.d.ts(475,11): error TS2300: Duplicate identifier 'Promise'. typings/es6-shim/es6-shim.d.ts(552,13): error TS2300: Duplicate identifier 'Promise'.

Answer 6

Upgrade your IDE to the latest version. Then create tsconfig.json file at the root of your project if you don't already have one. Then add experimentalDecorators as a compiler option.

Example:

{
  "version": "1.5.0",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "listFiles": true,
    "outDir": "dist",
    "experimentalDecorators": true
  }
}

Answer 7

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

"javascript.implicitProjectConfig.experimentalDecorators": true

VSCode -> Preferences -> Settings

Answer 8

I encountered this problem also.

Encountered while:

• Starting out with Angular2 - 2.0.0-beta.17

My environment is:

• Visual Studio 2015 Update 3
• Typescript for Microsoft Visual Studio Extension 1.8.34.0
• Node version v6.2.2 (cmdline ">node --version" to find yours)
• ASP.NET Core Project

My solution was:

• Unload Project
• Add the following line to the project configuration file

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>

If you cannot find the correct property group in the csproj file or you want the VS environment to add the correct property group automatically then simply toggle the "Produce outputs on build" under project properties > Build then do the project unload.

• Save the file and reload the project.
• Close Visual Studio then launch and reopen the solution and project.

To note here I do not at this point have a tsconfig.json file. Adding a tsconfig.json file causes the problem to come back.

To further resolve the issue after adding a tsconfig.json file I followed the instructions on setting up typescript with .NET Core located here under "Install typings for dependencies" and "Update tsconfig.json".

To summarize (but please read for yourself):

• Open cmd and navigate to src folder of your project
• Run "npm install -g typings" (I don't like this. Other options welcome)
• Add "experimentalDecorators": true to compilerOptions in the tsconfig.json
• Check your solution again. The issue described above should now be gone.

For context. In addition to this error I was also experiencing the following:

• Property 'map' does not exist on type 'Observable'. (Resolution mhegazy solution to change typescriptservices.js)

The steps above resolved the specific error above for me. I hope this helps.

Answer 9

In Visual Studio 2015 you have to enable TypeScriptExperimentalDecorators in your TypeScript project file.

Unload the project file and then add this line:

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>

I copied in the complete PropertyGroup so you can find where to add it:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
  <TypeScriptSourceMap>true</TypeScriptSourceMap>
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>System</TypeScriptModuleKind>
  <TypeScriptOutFile />
  <TypeScriptOutDir />
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />
  <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>

Answer 10

Found I had to add a tag for the metadata as well

<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
    <!--other -->
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
</PropertyGroup>

Answer 11

I resolved this by changing TypeScriptToolsVersion in my csproj file to match the version of TypeScript defined in packages.json (currently 2.0.2).

<TypeScriptToolsVersion>2.0.2</TypeScriptToolsVersion>