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 · Accepted Answer · 2014-11-06 08:04:47Z

3

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.

answered Nov 6, 2014 at 8:04

halilb

4,1251 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

halilb Over a year ago

Well, it should be loaded in your test browser. So, try putting it to SimpleDirectiveSpec.js for now. If it works, then you should checkout ng-html2js to automatically inject it to your test browser.

halilb Over a year ago

And if you are using Grunt, you can use this module: github.com/karlgoldstein/grunt-html2js

Run Over a year ago

Thanks. I put it in SimpleDirectiveSpec.js, then it fails my test of

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

halilb Over a year ago

Are you using jQuery in this project? If not, jqLite find method is limited to lookups by tag name. Check here: stackoverflow.com/questions/17283697/…

BradStell Over a year ago

So glad I found this post. I have been struggling trying to load directives from templateUrl for like 6 hours. The ng-html2js preprocessors would not work for me. Thanks for the answer!

Chandermani · Accepted Answer · 2014-11-06 08:08:40Z

1

I assume you are using karma html pre-processor for html template https://github.com/karma-runner/karma-ng-html2js-preprocessor. Make sure that module generated have the path name that matches the module name you are declaring 'fixture/hello.html'.

You can verify the files by opening chrome developer console and check the source tab, the modules would be loaded as js file. Make sure that the name of the module generated match.

answered Nov 6, 2014 at 8:08

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

1 Comment

Run Over a year ago

I'm not using Karma. I'm on Jasmine Standalone.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related