Visual Studio 2015 中的 Gulp 不运行 angular2-template-loader答案

【问题标题】：Gulp within Visual Studio 2015 does not run angular2-template-loaderVisual Studio 2015 中的 Gulp 不运行 angular2-template-loader
【发布时间】：2016-08-12 19:12:22
【问题描述】：

我正在尝试在 VS2015 中为 Angular 2 应用程序构建一个基本的 webpack 驱动的构建。我正在使用 Gulp 来触发 webpack 进程（VS2015 的钩子可以很好地与 gulp 配合使用——在我的情况下，webpack 完成了所有繁重的工作）

这就是问题所在 - 当我使用 VS2015 构建过程触发 gulp（通过“构建后”挂钩）时，angular2-template-loader 不运行。我希望看到 templateUrl 被内联标记替换，但它仍然引用我的模板文件。当我通过命令行运行 gulp 时，angular2-template-loader 似乎运行并完成了它的工作。

这是我尝试过的：

直接从命令行运行 webpack 给了我想要的结果 - 这让我相信我的 webpack 配置是正确的
直接从命令行运行 gulp 可以得到想要的结果
我已经研究过是否存在 VS 使用的任何“隐藏”参数会导致不同的结果，以及 VS 是否与特定版本的 gulp 相关联。据我所知，没有隐藏的参数或版本依赖。

作为参考，这里是我的 gulp 和 webpack 配置以及错误输出和预期输出： https://gist.github.com/scotmeiste/b9b91dcda13a896e771be0da5d89255c

在输出文件中，查看底部的 templateUrl/template 属性。

【问题讨论】：

标签： angular visual-studio-2015 gulp webpack

【解决方案1】：

tldr: 默认情况下，VS2015 会自动编译 TypeScript 文件，这会导致 Gulp typescript 构建时出现不希望的结果。将以下内容添加到项目文件中的第一个 <PropretyGroup> 节点更正了该问题：

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

详情

默认情况下，Visual Studio 将编译您的 TypeScript 文件，但仅在您进行完全重建时。这解释了为什么我的 TS 文件中的一些更改没有被传播。这样做的结果是我的app 目录将被 Visual Studio TS 构建的输出填充，但不是每次我都会进行更改。

当 gulp 触发第二次 TypeScript 构建时，我相信它会从 VS 触发的构建中看到 [bad] 输出并使用这些文件，即使它们可能已过时。他们也没有angular2-template-loader 进程的好处，因为 VS 只关心运行 TypeScript 构建。

解决方案

tldr 中提到了第一个解决方案 - 添加停止 TypeScript 编译的选项。
使用另一个可以更好地与 gulp 和 webpack 配合使用的编辑器。
（未经测试）在 TS 配置中设置输出以匹配 gulp 文件中的输出目标 - 不确定这是否能解决 angular2-template-loader 不起作用的问题。

【讨论】：