AngularJS + Karma + Ng-html2js => 无法实例化模块 ...html答案

【问题标题】：AngularJS + Karma + Ng-html2js => Failed to instantiate module ...htmlAngularJS + Karma + Ng-html2js => 无法实例化模块 ...html
【发布时间】：2013-10-22 00:13:51
【问题描述】：

我无法让 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 由于：错误：没有模块：/app/directives/loading/templates/loading.html

如果我修改 karma-ng-html2js-preprocessor 的源代码以打印结果生成的文件，我得到：

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文件是正确的，但是karma没有加载...

另外，如果我使用 --log-level 调试，这里是与模板相关的行：

调试[preprocessor.html2js]：处理“/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html”

DEBUG [watcher]：已解析的文件：
      /correct/path/to/the/app/directives/loading/templates/loading.html.js

我错过了什么吗？

谢谢，

【问题讨论】：

尝试通过查看github.com/vojtajina/ng-directive-testing 存储库来找出答案。
我学会了用这个 repo 测试 AngularJS 指令。所以我从一开始就受到了启发。
找到解决方案了吗？
您是否尝试过在浏览器中以调试模式运行它并查看 HTML 源代码？看到脚本标签中列出的 .html.js 文件了吗？

标签： templates angularjs testing directive karma-runner

【解决方案1】：

您可以让预处理器将您的模板缓存到一个模块中，然后可以在您的测试之前将其包含在内：

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'));
  ...
});

【讨论】：

【解决方案2】：

问题可能是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 是一个正则表达式。

【讨论】：

【解决方案3】：

我正在学习 AngularJS 并遇到了同样的问题。我不知道为什么，但更改 karma.conf.js 中的端口为我修复了它。

module.exports = function(config){
  config.set({

    ...

    port: 9877,

    ...

  });
};

编辑：

经过更多测试后，我发现问题仅发生在 Chrome 上，并通过明确清除所有浏览器历史记录（Ctrl + F5 不起作用）解决。

【讨论】：

【解决方案4】：

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

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

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

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

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

无论如何希望这会有所帮助。

【讨论】：