Angular directive test - Error: [$injector:modulerr] Failed to instantiate module?

Question

I am using Jasmine Standalone to test my Angular directories,

SimpleDirective.js

var app = angular.module("myApp", []);

app.controller('SimpleDirectiveController', function($scope) {
    $scope.customer = {
      name: 'Igor',
      address: '123 Somewhere'
    };
});

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,

        // Isolate scope:
        // separate the scope inside a directive from the scope outside, and then map the outer scope to a directive's inner scope. 
        scope: {
            customerInfo: '=info'
        },

        //templateUrl points to an external html template.
        templateUrl: 'fixture/hello.html'
    };
});

fixture/hello.html,

<div class="customer"><b>Hello</b> {{customerInfo.name}}</div>

SimpleDirectiveSpec.js,

describe("simpleDirective Test ", function(){

    // Boilerplate starts from here...
    var compile, scope, element;

    // Name of the module my directive is in.
    beforeEach(module('myApp'));

    // The external template file referenced by templateUrl.
    beforeEach(module('fixture/hello.html'));

    beforeEach(inject(function($compile,$rootScope) {

        compile = $compile;
        scope = $rootScope;

        element = angular.element('<div data-hello-world info="customer"></div>');
        compile(element)(scope);
        scope.$digest();
    }));
    // ...Boilerplate ends here

    it('renders the customer template', function() {
        var customer = element.find('.customer');
        expect(customer.length).toBe(1);
    });

});

I get this error,

Error: [$injector:modulerr] Failed to instantiate module fixture/hello.html due to: [$injector:nomod] Module 'fixture/hello.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Any ideas What I have missed?

halilb halilb · Accepted Answer · 2014-11-06T08:04:47

You should create a module for your template and put your template html into templateCache.

It should look like this:

angular.module("fixture/hello.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("fixture/hello.html",
    "<div class=\"customer\"><b>Hello</b> {{customerInfo.name}}</div>");
}]);

If you are testing with Karma, there is an automation karma module for this purpose called ng-html2js.

Angular directive test - Error: [$injector:modulerr] Failed to instantiate module?

2 Answers