Visual Studio 2017: TypeScript compile errors in node_modules

Question

Trying to build an Angular app I am getting complie errors for typescript files in the node_modules folder.

For example:

TS2420: Class 'CdkTable' incorrectly implements interface 'CollectionViewer'.

CdkTable is in @angular/cdk/typings/table/table.d.ts

Version of my tools:

npm -v: 5.0.3

node -v: v8.1.4

tsc -v: Version 2.2.3

My tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

Note that the project is compileable on other computers.

Answer 1

I'm assuming your tsc executable is the one installed via npm, and it is installed globally.

Check the version of the TypeScript SDK for Visual Studio that you have installed. It should be in a folder that is roughly: C:\Program Files (x86)\Microsoft SDKs\TypeScript. Make sure this version is update-to-date (or at least at the same version as your globally installed TypeScript).

Also check your environment variables to see if there is a different version in your path. Visual Studio's MSBuild process uses the MSBuild TypeScript tasks, which is going to grab TypeScript from the SDK install. This explains the difference in output from the command line (using the globally installed tsc) and the output from Visual Studio.

Additionally, there have been known issues with using a tsconfig with a Visual Studio project. I know that it's supposed to be fully supported, but there are a lot of people that still report problems from what I've researched. It could be that you might want to drop the tsconfig in favor of using the TypeScript tab available when you right click on a project and select properties.

Alternately, you could try setting the rootDir compiler option in an attempt to single out the directory of the TypeScript files you actually need compiled. I know excludes should have prevented this, but again, Visual Studio might be hiccuping on the tsconfig in some way.

Answer 2

I had to make sure my version of Microsoft.TypeScript.MsBuild matched the version of the 'typescript' devDependency in packages.json file ( in my case 4.6.3 ). After I downgraded the Microsoft.TypeScript.MsBuild assembly to the matching version, I right-clicked the "node_modules" folder it added and hit 'exclude from project'. Finally getting a reasonable amount of errors from TypeScript related to the source code I'm actually working on. Using react instead of angular, not sure if that makes a difference here