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

时间:2016-08-12 19:12:22

标签: angular visual-studio-2015 gulp webpack

我正在尝试在VS2015中为Angular 2应用程序提供基本的webpack驱动的构建。我正在使用Gulp来触发webpack进程(VS2015有一个与gulp配合良好的钩子 - webpack在我的情况下做了所有繁重的工作)

这就是问题 - 当我使用VS2015构建过程触发gulp时(通过'after build'钩子),angular2-template-loader不会运行。我希望看到templateUrl替换为内联标记,但它仍然引用我的模板文件。当我通过命令行运行gulp时,angular2-template-loader似乎运行并完成它的工作。

这是我尝试过的:

  • 直接从命令行运行webpack可以得到所需的结果 - 这让我相信我的webpack配置是正确的

  • 直接从命令行运行gulp为我提供了所需的结果

  • 我研究过是否有任何'隐藏'参数VS会导致不同的结果,以及VS是否与特定版本的gulp相关联。据我所知,没有隐藏的参数或版本依赖。

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

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

1 个答案:

答案 0 :(得分:0)

tldr:默认情况下,VS2015会自动编译TypeScript文件,这会导致Gulp打字稿构建产生不良后果。将以下内容添加到项目文件中的第一个<PropretyGroup>节点更正了问题:

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

<强>详情

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

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

<强>解决方案

  1. tldr中提到了第一个解决方案 - 添加了停止TypeScript编译的选项。
  2. 使用另一个与gulp和webpack打得更好的编辑器。
  3. (未经测试)设置TS配置中的输出以匹配gulp文件中的输出目标 - 不确定这是否可以解决angular2-template-loader无法正常工作的问题。