AngularJS + Karma + Ng-html2js =>未能实例化模块...html

Question

我不能让Karma为有外部模板的指令工作。

这是我的业力配置文件：

preprocessors: {
    'directives/loading/templates/loading.html': 'ng-html2js'
},

files: [
    ...
    'directives/loading/templates/loading.html',
]

ngHtml2JsPreprocessor: {
    prependPrefix: '/app/'
},

在指令文件中：

...
templateUrl: '/app/directives/loading/templates/loading.html'
...

在规范文件中：

describe('Loading directive', function() {
    ...
    beforeEach(module('/app/directives/loading/templates/loading.html'));
    ...
});

我得到以下错误：

未能实例化模块/app/directives/loading/templates/loading.html，原因是: Error: No模块: /app/directives/loading/templates/loading.html

如果我修改业力-ng-html2js-预处理程序的源代码以打印生成文件的结果，我将得到：

angular.module('/app/directives/loading/templates/loading.html', []).run(function($templateCache) {
    $templateCache.put('/app/directives/loading/templates/loading.html',
        '<div ng-hide="hideLoading" class="loading_panel">\n' +
        '   <div class="center">\n' +
        '       <div class="content">\n' +
        '           <span ng-transclude></span>\n' +
        '           <canvas width="32" height="32"></canvas>\n' +
        '       </div>\n' +
        '   </div>\n' +
    '</div>');
});

因此，似乎生成的JS文件是正确的，但没有加载业力。

另外，如果我使用-日志级别的调试，下面是与模板相关的行：

调试"/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html“：处理preprocessor.html2js 调试监视程序:解析文件： /correct/path/to/the/app/directives/loading/templates/loading.html.js

我漏掉了什么吗？

谢谢,

Answer 1

问题可能是file部分中指定的相对路径被扩展到完整路径。

类似于directives/loading/templates/loading.html => /home/joe/project/angular-app/directives/loading/templates/loading.html

..。然后，模板被注册到他们的全部路径。

解决方案是配置ng-html2js预处理程序，以删除模板路径的绝对部分。例如，在karma.conf.js文件中添加如下stripPrefix指令：

ngHtml2JsPreprocessor: {
    // strip this from the file path
    stripPrefix: '.*/project/angular-app/'
    prependPrefix: '/app/'
}

注意，stripPrefix是一个regexp。

Answer 2

您可以让预处理程序将模板缓存到模块，然后在测试之前将模板包括在内：

karma.conf.js

files: [
  ...
  'app/**/*.html'
],

preprocessors: {
  'app/**/*.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
   moduleName: 'templates'
},

指令文件

...
templateUrl: 'app/path-to-your/template.html',
...

规范文件

describe('My directive', function() {

  beforeEach(module('templates'));
  ...
});

Answer 3

这可能不是您的确切问题，但在我们的应用程序中，我们需要向karma.conf.js添加以下内容：

ngHtml2JsPreprocessor: {
    cacheIdFromPath: function(filepath) {
        return '/vision/assets/' + filepath;
    }
}

相应的预处理器设置如下所示：

preprocessors: {
    'views/**/*.html': 'html2js'
},

我的理解是，这是由于在AngularJS中指定模板时使用了绝对URLs -在运行测试时重写了哪些业力？

希望这能帮上忙。