Error building Angular2 app with Visual Studio

Question

I am using this guide to build a starter angular2 app.

When I try to build it complains about bad options and I noticed it building with typescript 1.8 instead of typescript 2.x. I have installed [email protected] via npm. npm install -g [email protected]. I have set the VS Options to load .\node_modules\.bin first in External Web Tools. I have a tsconfig.json file. I can see it still trying to compile with typescript 1.8. Any ideas what to do to fix this? I have followed the guide twice.

1>Target "PreComputeCompileTypeScriptWithTSConfig" in file "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\TestAngular.csproj" (target "CompileTypeScriptWithTSConfig" depends on it):
1>Using "VsTsc" task from assembly "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\TypeScript.tasks.dll".
1>Task "VsTsc"
1>  C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe --project "C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\tsconfig.json" --listEmittedFiles
1>Done executing task "VsTsc".
1>Done building target "PreComputeCompileTypeScriptWithTSConfig" in project "TestAngular.csproj".
1>Target "CompileTypeScriptWithTSConfig" in file "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\TestAngular.csproj" (target "Compile" depends on it):
1>Task "VsTsc"
1>  C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe --project "C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\tsconfig.json" --listEmittedFiles
1>  C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\error TS5023:Build:Unknown compiler option 'listemittedfiles'.
1>C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets(214,5): error MSB6006: "tsc.exe" exited with code 1.
1>Done executing task "VsTsc" -- FAILED.
1>Done building target "CompileTypeScriptWithTSConfig" in project "TestAngular.csproj" -- FAILED.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

I have done nothing special in my .csproj. I tried setting <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion> but that does nothing.

How do I ensure that the VsTsc task is using typescript 2? Also in External Web Tools I would love to know where .\node_modules\.bin refers too? It doesn't seem to be C:\Users\111111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\node_modules\.bin. Npm installed typescript to C:\Users\111111\AppData\Roaming\npm.

Additional info: I did find this answer. Build:Unknown compiler option 'listemittedfiles'

It explains the workaround (don't install via npm, install via the VS installation). But my still question is why the External Web Tools listing possibly does nothing? Or how it even modifies which version of Typescript.

Answer 1

Add the following to TestAngular.csproj:

<PropertyGroup>
    <TscToolPath>PATH TO DESIRED tsc.exe, NOT INCLUDING THE tsc.exe</TscToolPath>
</PropertyGroup>

Answer 2

For double check, did you move the $(PATH) entry above the $(DevEnvDir) entries as my image below?

---

.\node_modules\.bin is refer to your node_module folder in the same level with package.json in your project. It means the package will be installed locally into this folder only.

Because you run npm install -g [email protected], it will be installed globally in 'C:\Users\username\AppData\Roaming\npm, not into your project folder.

See the different here: Locally installed versus globally installed NPM modules