AngularJS + Karma + Ng-html2js => Failed to instan

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

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 2

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).

Answer 3

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 4

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