Search code examples
angulartypescriptvisual-studio-codeintellisensetsconfig

Missing tsconfig.json file and Experimental Decorators warning in vsCode


In Angular 6.0.3 (global Angular CLI v6.0.8, local Angular CLI v6.0.7) I'm suddenly getting intellisense errors on every component that I open: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

I've tried the instructions from the accepted answer here: Experimental decorators warning in TypeScript compilation

But my tsconfig.json file already had "experimentalDecorators": true.

I've also tried closing and re-opening visual studio code, clicking the refresh button on the file tree, Reload Window command etc etc ad nauseum. I think my issue may lie in the fact that I can't see tsconfig.json anywhere in my file structure (so perhaps neither can Angular). I believe it does exist because I do see tsconfig.app.json and this file has a link to tsconfig.json which I can ctrl + click to follow to the tsconfig.json file.

How can I find the location of tsconfig.json and/or make it appear at the same file level as tsconfig.app.json like the rest of my dev team has?

My tsconfig.app.json file:

{
  "extends": "../tsconfig.json",  //I can ctrl + click here to go to tsconfig.json
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}  

My (missing/invisible) tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Solution

  • Ah - got it. I realized I couldn't see the node_modules folder at the highest level of my file tree, nor tsconfig.json. I had accidentally directed vsCode to open only the src folder, rather than the parent folder of src and node_modules.

    I opened a new vscode window, closed the old and made sure when I clicked file --> open folder, I pointed to the parent folder containing both src and node_modules. This is also the level where tsconfig.json exists, which is why I couldn't see it prior.

    The intellisense errors went away, I assume because Angular can now actually see tsconfig.json (which already had "experimentalDecorators": true).