Vscode: experimentalDecorators warning appearing even with tsconfig.json set

[MrSkinny]

• VSCode Version: 1.3.1
• OS Version: 10.11.5

Steps to Reproduce:

1. Downloaded Angular2-webpack-starter - https://github.com/AngularClass/angular2-webpack-starter
2. Opened project in VSC
3. Receive errors on all decorated classes (see screenshots)

[kpgarrod]

I am having a similar issue but not on all decorated classes. I have a number of @Components with no warnings but the service classes decorated with @Injectable are giving warnings.

[SteveVanOpstal]

It appears to be unrelated to the Typescript version, for me the issue occurred for both the 1.8.10 and 2.0.0-beta versions.

tsconfig (1.8.10):

{
  "allowJs": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "strictNullChecks": false
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "!./node_modules/**/*.ts",
    "src/custom-typings.d.ts",
    "typings/index.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "resolveGlobs": true,
    "forkChecker": true,
    "cacheDirectory": "node_modules/.atl-cache"
  },
  "compileOnSave": false,
  "buildOnSave": false
}

tsconfig (2.0.0-beta):

{
  "allowJs": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "strictNullChecks": false,
    "baseUrl": "./src"
  },
  "include": [
    "src/custom-typings.d.ts",
    "typings/index.d.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "forkChecker": true,
    "cacheDirectory": "node_modules/.atl-cache"
  },
  "compileOnSave": false,
  "buildOnSave": false
}

[neojack647]

Looks like it was closed as a VSCode issue. and blamed on TS.
https://github.com/Microsoft/TypeScript/issues/8751

[SteveVanOpstal]

I fixed it by removing:

    "noImplicitThis": true,
    "strictNullChecks": false,
    "baseUrl": "./src"

It doesn't seem like a coincidence that exactly the 'new' compilerOptions work incorrectly.
They blamed it on https://github.com/Microsoft/TypeScript/issues/8334, this should be fixed however.

[filipesilva]

Also having this issue myself, and traced it down to using TS2.0 options like baseUrl, typeRoots or libs. Whenever any of those is present it seems like the tsconfig stops being used.

[filipesilva]

Here is a gif showing the problem, and how removing the lib entry fixes it. The same happens to me with the baseUrl entry.

[dbaeumer]

Out of the box VSCode ships with the official latest TS build which is 1.8.10. Instead of removing the 2.0 settings from the tsconfig.json a better solution is to point VS Code to use TS from the node_modules folder of the angular2-webpack-starter. You can do this using the following setting:

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

This ensure that Angular and webpack are using the same version of TS as VS Code.

[adamduren]

:+1: Thanks!

[abnersouza]

Thanks @dbaeumer that fix also my issue. I've seen some places point to the folder in the global installation, but as you said it can be using different version, better point to the project itself.

[jcrben]

In my case, I needed to make sure that my include list included a subdirectory which wasn't being captured by accident.

[Venryx]

For me (similar to @jcrben's case) , the problem was that my tsconfig.json file had a error/warning, "error TS18003: Build:No inputs were found in config file [...]".

Once I resolved the error/warning, the "experimentalDecorators: true" setting worked as expected.

[VikalpP]

Super easy ,..///

All you have to do is open up your editor or IDE or whatever use ..// with root directory ....

dont open your project as sub parts to edit and access only needed part ...

problem was occurring because editor wasn't able to reach to that tsconfig.json file

If tsconfig.json file isnt in your side navigation panel listed in project then it wan't be access it

[naorye]

What is the solution if I am not using typescript? Those red underlines are very annoying.