Karma-ng-html2js-preprocessor does not work gulp + angular + karma + ng-html2js

Question

I cannot get the karma-ng-html2js preprocessor to work for an external template.

Json file package:

..... "gulp-karma": "*", "karma-coverage": "*", "karma-jasmine": "*", "karma-ng-html2js-preprocessor": "*", "karma-phantomjs-launcher": "*", ..... 

Karma configuration file:

  config.set({ browsers: [ .... ], frameworks: [ 'jasmine' ], plugins: [ 'karma-jasmine', 'karma-phantomjs-launcher', 'karma-ng-html2js-preprocessor' ], preprocessors: { 'app/**/*.html': 'ng-html2js' }, ngHtml2JsPreprocessor: { stripPrefix: 'app/' } }); 

Files are defined in the build file and transferred to gulp -karma. Here are the specific files:

 config = { test: { configFile: '.../karma.conf.js', depends: [ ....... ], files: [ "app/**/*.js", 'app/**/*.html' ] } } 

Loading the template in my directive specification as shown below:

 beforeEach(module('app')); beforeEach(module('app/tem/mytemp.html')); 

I get an error message below:

 Error: [$injector:modulerr] Failed to instantiate module app/tem/mytemp.html due to: Error: [$injector:nomod] Module 'app/tem/mytemp.html' is not available! You either misspelled the 

In karma, the debug.html html files are loaded into the link tag output:

 <script type="text/javascript" src="/absoluteC:.../app/tem/comp/mydirective.js"></script> <link href="/absoluteC:..../app/tem/mytemp.html" rel="import"> <script type="text/javascript"> window.__karma__.loaded(); 

Did I miss something? How to debug and promote this problem?

Answer 1

This is how I solved the same problem:

1) npm install karma-ng-html2js-preprocessor --save-dev (you already did this)

2) In the karma.config.js file:

 // .... preprocessors: { '**/*.html': ['ng-html2js'] }, // .... ngHtml2JsPreprocessor: { stripPrefix: 'app/', // <-- change as needed for the project // include beforeEach(module('templates')) in unit tests moduleName: 'templates' }, plugins : [ 'karma-phantomjs-launcher', 'karma-jasmine', 'karma-ng-html2js-preprocessor' ] 

3) Since gulp -karma overwrites the files property of the karma.conf.js file, change the configuration of the gulp task for your test setup (I had two: one test that runs the tests once and one called tdd for continuous testing) something like this:

 gulp.task('test', function() { var bowerDeps = ... var testFiles = bowerDeps.js.concat([ 'app/scripts/**/*.js', 'test/unit/**/*.js', 'app/**/*.html' // <-- This is what you need to add to load the .html files ]); return gulp.src(testFiles) .pipe($.karma({ configFile: 'test/karma.conf.js', action: 'run' })) .... }); 

Hope this helps someone.

Answer 2

I am new to this and I was looking for another problem, but I think I'm a little further than you (I also understand that this quest is a bit old).

What I did was make the following change in the ngHtml2JsPreprocessor section of the Karma configuration file

 ngHtml2JsPreprocessor: { stripPrefix: 'app/', // ADDED THIS: the name of the Angular module to create moduleName: "my.templates" } 

Then in my test, I referred to this module name instead of the HTML name.

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

I hope this helps, even if it is too late. Or that someone else finds useful information when they search.