AngularJS + Karma + Ng-html2js => Failed to instantiate module ...html - templates

Question

I can't make Karma working for directives that have external templates.
Here is my karma configuration file :
preprocessors: {
'directives/loading/templates/loading.html': 'ng-html2js'
},
files: [
...
'directives/loading/templates/loading.html',
]
ngHtml2JsPreprocessor: {
prependPrefix: '/app/'
},
In the directive file :
...
templateUrl: '/app/directives/loading/templates/loading.html'
...
In the spec file :
describe('Loading directive', function() {
...
beforeEach(module('/app/directives/loading/templates/loading.html'));
...
});
I get the following error :
Failed to instantiate module /app/directives/loading/templates/loading.html due to:
Error: No module: /app/directives/loading/templates/loading.html
If I modify the source code of the karma-ng-html2js-preprocessor to print the result of the
generated file, I get :
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>');
});
So it seems that the generated JS file is correct but not loaded by karma...
Also, if I use --log-level debug, here are the lines related to the template :
DEBUG [preprocessor.html2js]: Processing "/home/rightink/public_html/bo2/master/web/app/directives/loading/templates/loading.html"
DEBUG [watcher]: Resolved files:
/correct/path/to/the/app/directives/loading/templates/loading.html.js
Am I missing something ?
Thanks,

Answer 1

The problem may be that relative paths specified in file section get expanded to full ones.
Something like directives/loading/templates/loading.html => /home/joe/project/angular-app/directives/loading/templates/loading.html
... and then, templates get registered with theirs full paths.
The solution is to configure the ng-html2js preprocessor to remove the absolute part of the template paths. For instance, in the karma.conf.js file add the stripPrefix directive like this :
ngHtml2JsPreprocessor: {
// strip this from the file path
stripPrefix: '.*/project/angular-app/'
prependPrefix: '/app/'
}
Note that stripPrefix is a regexp.

Answer 2

You can have the pre-processor cache your templates to a module, which can then be included prior to your tests:
karma.conf.js
files: [
...
'app/**/*.html'
],
preprocessors: {
'app/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
moduleName: 'templates'
},
directive file
...
templateUrl: 'app/path-to-your/template.html',
...
spec file
describe('My directive', function() {
beforeEach(module('templates'));
...
});

Answer 3

This may not be your exact issue, but in our application we needed to add the following to karma.conf.js:
ngHtml2JsPreprocessor: {
cacheIdFromPath: function(filepath) {
return '/vision/assets/' + filepath;
}
}
The corresponding preprocessors setting looks like:
preprocessors: {
'views/**/*.html': 'html2js'
},
My understanding was that this was due to using absolute URLs in AngularJS when specifying templates - which karma was rewriting when running tests?
Anyway hope this helps.

Answer 4

I'm in the process of learning AngularJS and ran into the same problem. I have no idea why but changing the port in karma.conf.js fixed it for me.
module.exports = function(config){
config.set({
...
port: 9877,
...
});
};
Edit:
After a bit more testing I found that the problem was only happening on Chrome, and was resolved by explicitly clearing all of the browser history (Ctrl + F5 didn't work).