Gulp Angular 构建模板缓存问题答案

【问题标题】：Gulp Angular build templateCache issueGulp Angular 构建模板缓存问题
【发布时间】：2014-12-23 06:12:52
【问题描述】：

我的 build.js 正在使用 ngHtml2js 将指令中的部分转换为 js 文件。

gulp.task('partials', function () {
  return gulp.src('src/{components,app}/**/*.html')
    .pipe($.ngHtml2js({
      moduleName: 'testApp'
    }))
    .pipe(gulp.dest('.tmp'))
    .pipe($.size());
});

我的指令位于 components->directives 的 components 文件夹中。

问题是当我尝试部署 dist 文件夹时，来自路由 JS 文件的静态部分调用被触发，我得到 404。

angular.module(ModuleName)
        .directive('collapseWindow', ['$parse', function (parse) {

            return {
                templateUrl:'/components/directives/collapse.html',
                transclude:true,
                restrict: 'A'

据我了解，ngHtml2js 将部分转换为 module.run 块

module.run(['$templateCache', function($templateCache) {
  $templateCache.put('components/directives/collapse.html',
    '<div class="collapsible">\n' ...

但是，为什么会出现 404 错误，例如

 GET http://localhost:3000/components/directives/collapse.html 404 (Not Found)

【问题讨论】：

标签： javascript angularjs gulp

【解决方案1】：

解决了。原因是 templateUrl 被赋予了绝对路径（以 '/' 开头），但 templateCache 使用相对路径。因此从 templateUrls 中删除 '/' 解决了这个问题

【讨论】：

你是如何从开头删除 / 的？
刚刚从templateUrl设置的开头删除'/'，即通过设置：templateUrl:'components/directives/collapse.html'，没有开始/

【解决方案2】：

您需要在 Angular 应用程序模块中添加模板模块作为依赖项。还要确保您的模板缓存 js 文件已在您的应用程序代码之前加载到浏览器中。

【讨论】：

抱歉没能找到你。如何将模板模块添加为依赖项？此外，代码在 gulp serve 中正常工作，但仅在 gulp serve:dist 中中断

【解决方案3】：

我为主应用添加了这个配置。它覆盖了 ngnewroute 的模板映射

.config (function ($componentLoaderProvider) {
  $componentLoaderProvider.setTemplateMapping(function (name) {
    return 'components/' + name + '/' + name + '.html';
  });
})

【讨论】：