使用 Visual Studio 构建 Angular2 应用程序时出错

Question

我正在使用 this 构建入门 angular2 应用程序的指南。

当我尝试构建它时抱怨错误的选项，我注意到它使用 typescript 1.8 而不是 typescript 2.x 构建。我已经通过 npm 安装了 Typescript@2.0。 npm install -g typescript@2.0。我已将 VS 选项设置为首先在外部 Web 工具中加载 .\node_modules\.bin。我有一个 tsconfig.json 文件。我可以看到它仍在尝试使用 typescript 1.8 进行编译。有什么想法可以解决这个问题吗？我已经按照指南进行了两次。

1>Target "PreComputeCompileTypeScriptWithTSConfig" in file "C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets" from project "C:\Users1111\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.8\tsc.exe --project "C:\Users1111\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:\Users1111\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.8\tsc.exe --project "C:\Users1111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\tsconfig.json" --listEmittedFiles
1>  C:\Users1111\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
  }
}

我在 .csproj 中没有做任何特别的事情。我尝试设置 <TypeScriptToolsVersion>2.0</TypeScriptToolsVersion> 但这没有任何作用。

如何确保 VsTsc 任务使用的是 typescript 2？同样在外部网络工具中，我也很想知道 .\node_modules\.bin 指的是哪里？好像不是C:\Users1111\Documents\Visual Studio 2015\Projects\TestAngular\TestAngular\node_modules\.bin。 Npm 将 typescript 安装到 C:\Users1111\AppData\Roaming\npm。

附加信息：我确实找到了这个答案。 Build:Unknown compiler option 'listemittedfiles'

它解释了解决方法（不要通过 npm 安装，通过 VS 安装）。但我仍然有疑问，为什么外部 Web 工具列表可能什么都不做？或者它甚至如何修改哪个版本的 Typescript。

Answer 1

为了仔细检查，您是否将 $(PATH) 条目 移动到 上面的 $(DevEnvDir) 条目，如下图所示？

.\node_modules\.bin 是指您的 node_module 文件夹与您项目中的 package.json 处于同一级别。这意味着该软件包将仅在本地安装到此文件夹中。

因为你运行 npm install -g typescript@2.0，它将全局安装在 'C:\Users\username\AppData\Roaming\npm 中，而不是安装到你的项目文件夹中。

在这里查看不同之处：Locally installed versus globally installed NPM modules

Answer 2

请查看如何在 VS2015 社区（更新 3）中设置 angular2 + typescript

https://github.com/MohtishamZubair/AgentDistribution/wiki/Setting-up-AngularJS2-in-VS2015-in-MVC5

平均在我的设置中 $(path) 倒数第二

Answer 3

我认为 VS2015 的工作方式与其他编辑器略有不同。

可选：在“程序和功能”下卸载以前的版本 "Typescript Tools for Microsoft Visual Studio 2015"。

在 https://www.typescriptlang.org/#download-links 下载并安装最新的 "Typescript Tools for Microsoft Visual Studio 2015"。

希望能解决您的问题。

Answer 4

将以下内容添加到 TestAngular.csproj：

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

使用 Visual Studio 构建 Angular2 应用程序时出错

Error building Angular2 app with Visual Studio

msbuild

npm

visual-studio-2015

typescript2.0

angular