Question

我的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-＆gt;指令的组件文件夹中。

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

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

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

根据我的理解，ngHtml2js将partials转换为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)

Answer 1

解决了它。原因是templateUrl被赋予了绝对路径（开头有＆＃39; /＆＃39;），但templateCache使用相对路径。因此，删除＆＃39; /＆＃39;来自templateUrls解决了这个问题

Answer 2

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

Answer 3

我为主应用添加了此配置。它会覆盖ngnewroute

的模板映射

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

Gulp Angular构建templateCache问题

3 个答案: