我无法使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'
...
在spec文件中:
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 debug,这里是与模板相关的行:
DEBUG [preprocessor.html2js]:处理“/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html”
DEBUG [观察者]:已解决的文件:
/correct/path/to/the/app/directives/loading/templates/loading.html.js
我错过了什么吗?
谢谢,
答案 0 :(得分:12)
问题可能是file
部分中指定的相对路径扩展为完整路径。
directives/loading/templates/loading.html
=&gt;之类的内容/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是一个正则表达式。
答案 1 :(得分:11)
您可以让预处理器将模板缓存到模块中,然后在测试之前将其包含在内:
<强> 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 :(得分:4)
这可能不是您的确切问题,但在我们的应用程序中,我们需要将以下内容添加到karma.conf.js中:
ngHtml2JsPreprocessor: {
cacheIdFromPath: function(filepath) {
return '/vision/assets/' + filepath;
}
}
相应的预处理器设置如下所示:
preprocessors: {
'views/**/*.html': 'html2js'
},
我的理解是,这是因为在指定模板时使用AngularJS中的绝对URL - 运行测试时业力是否被重写?
无论如何希望这有帮助。
答案 3 :(得分:2)
我正在学习AngularJS并遇到同样的问题。我不知道为什么但是改变karma.conf.js中的端口为我修复了它。
module.exports = function(config){
config.set({
...
port: 9877,
...
});
};
编辑:
经过一些测试后,我发现问题只发生在Chrome上,并通过明确清除所有浏览器历史记录(Ctrl + F5无效)解决了问题。