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

【问题标题】：Error building Angular2 app with Visual Studio使用 Visual Studio 构建 Angular2 应用程序时出错
【发布时间】：2016-12-28 05:15:41
【问题描述】：

我正在使用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:\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
  }
}

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

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

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

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

【问题讨论】：

请检查您是否安装了所有要求，（安装 Node.js，安装 Visual Studio 2015 Update 3，安装 Visual Studio 2015 的 TypeScript 2），根据要求和它的工作步骤，我也可以通过 npm 命令安装 TypeScript，并将名为 TypeScriptToolsVersion 的设置修改为 2.0，这里是示例（1drv.ms/u/s!AlvaNEnglADDfqpo40tZnw_yIuw），请与您的 csproj 文件进行比较。另外，请检查 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中是否有名为 2.1 的文件夹
在我运行 VS Typescript 安装程序之前，我确定 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中不存在 2.1。 npm install -g typescript@2.0 会这样做吗？
如trungk18所说，npm install -g typescript@2.0，会全局安装在'C:\Users\username\AppData\Roaming\npm，没有tsc.exe。它不会在 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中安装 typescript，这会导致问题。在构建项目时，msbuild 通过属性查找相关的 tsc.exe，该属性从 C:\Program Files (x86)\Microsoft SDKs\TypeScript 中找到 tsc.exe。

标签： angular visual-studio-2015 npm msbuild typescript2.0

【解决方案1】：

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

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

【讨论】：

我希望将这样的东西集成到外部 Web 工具中，但这是目前最好的答案。这是找到我想要的解决方案的最佳方法，即让 VS 在我想要的地方使用 tsc.exe。

【解决方案2】：

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

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

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

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

【讨论】：

是的，我的工具设置与他图片中的一样。我也确实为 typescript 运行了全局安装，但它也是我 pacakge.json 的一部分。 "devDependencies": { "typescript": "~2.0.10"
这很奇怪，你能把你的 tsconfig.json 更新成你的问题吗？
完成。我认为它甚至在使用之前就确定了 TS 版本，所以我认为它不相关。
你解决了吗？我使用了相同的配置，typescript 2.0 和 visual studio 2015，但没有收到您的错误:(
正如我在“附加信息”部分中链接的帖子中提到的，“这似乎是某些 VS2015 安装上的一个已知问题，由于最近发布的频繁更新可能已经“损坏””@ 987654323@。我有 VS2013，然后是 VS2015 Update1，然后是 VS2015 Update3。这些都不包括 typescript2。 MSBUILD 使用 .target 文件中提供的版本，您的 csproj 可以覆盖这些属性。因此，正如我所想的那样，通过 npm 安装 typescript 2.0 似乎不支持注入到那个 MSBUILD 进程中。

【解决方案3】：

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

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

在我的环境中的意思 $(path) 是倒数第二个

【讨论】：

您不必更改 VS 设置，只需按照我的文章。即使您不需要 node.js 服务器 @trungk18 也请检查 csproj 文件中的重复条目。
这是原始问题中所述的已知解决方法。需要的是让 VS 使用 npm 安装的 Typescript2，而不需要 VS 扩展。

【解决方案4】：

我相信 VS2015 的工作方式与其他编辑器有些不同。

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

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

希望能解决您的问题。

【讨论】：

再次，这是原始问题中所述的已知解决方法。需要的是让 VS 使用 npm 安装的 Typescript2，而 不需要 需要 VS 扩展。