title: AngularJS Karma Test: Unexpected request: GET.template.html
body: <p>I'm trying to set up karma tests for my AngularJS app but I am somehow failing constantly.
  I have followed all the steps <a href="https://github.com/karma-runner/karma-ng-html2js-preprocessor" rel="nofollow noreferrer">here</a> but I have the feeling the ng-html2js preprocessor is not working properly. I am always getting the following message:</p>
  
  <blockquote>
    <p>Error: Unexpected request: GET js/templates/my-template.template.html</p>
  </blockquote>
  
  <p>Here's my code structure</p>
  
  <p><a href="https://i.stack.imgur.com/VVqHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VVqHQ.png" alt="code structure"></a></p>
  
  <p>And here my test structure</p>
  
  <p><a href="https://i.stack.imgur.com/aanEP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aanEP.png" alt="enter image description here"></a></p>
  
  <p>The directive I am trying to test is:</p>
  
  <pre><code>angular
      .module('myapp')
      .directive('myDirective', ['myService', function (myService) {
          return {
              restrict: 'E',
              templateUrl: 'js/templates/my-template.template.html',
              scope: {},
              link: function (scope) {
              }
          }
      }]);
  </code></pre>
  
  <p>My karma conf looks like this:</p>
  
  <pre><code>module.exports = function (config) {
  config.set({
  
      basePath: '../../',
  
      frameworks: ['jasmine'],
  
  
      files: [
          //some omitted like angular and so on...
          'main/resources/static/**/*.js',
          '**/*.html',
          'test/js/**/*Spec.js'
      ],
  
      preprocessors: {
          '**/*.html': ['ng-html2js']
      },
  
      ngHtml2JsPreprocessor: {
          moduleName: 'templates'
      }
  ... (more default stuff omitted)
  }
  </code></pre>
  
  <p>and mySpec.js like this:</p>
  
  <pre><code>describe('directive', function () {
      'use strict';
  
      beforeEach(module('myapp'));
      beforeEach(module('templates'));
  
      var elm,
          scope;
  
      beforeEach(inject(function ($rootScope, $compile) {
          elm = angular.element(
          '&lt;my-directive&gt;' +
          '&lt;/my-directive&gt;');
  
          scope = $rootScope.$new();
  
          $compile(elm)(scope);
          scope.$digest();
      }));
  
      describe('Does something', function () {
          console.log('test');
          expect(true).toBe(true);
      });
  });
  </code></pre>