Unit-Testing AngularJS: Uncaught Error: [$injector:nomod] Module is not available! and ReferenceError: module is not defined when run Karma

Question

I've a small unitTest in Jasmine run with Karma. But when i run Karma it show errors:

Uncaught Error: [$injector:nomod] Module 'material.controllers' 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.

FAILED Unit: LoginController encountered a declaration exception

ReferenceError: module is not defined

Here are my source code, config Karma file and unitTest.

karma.conf.js

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      '/home/tanpham/Angular/Dev/libs/angular/angular.js',
      '/home/tanpham/Angular/Dev/js/**/*.js',
      '/home/tanpham/Angular/Dev/js/*.js',
      '/home/tanpham/Angular/Test/*.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },

index.html

<body ng-app="material" ng-controller="AppController">
    <ui-view></ui-view>
</body>

app.js

angular.module('material.controllers', []);
angular.module('material.services', []);
angular.module('material.directives',[]);
angular.module('material.filters',[]);
var app = angular.module('material', ['ui.router','material.directives','http-auth-interceptor','material.controllers','material.services','material.filters'])
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $stateProvider
    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "views/app.html"
    }).state('login', {
        url: "/login",
        templateUrl: "views/login.html",
        controller: "LoginController"
    });
    
    $urlRouterProvider.otherwise('/login');
})

loginController

angular.module('material.controllers').controller('LoginController', function($scope) {
    
      $scope.name = "Ari";
      $scope.sayHello = function() {
         $scope.greeting = "Hello " + $scope.name;
      }
});

helloSpec.js

describe('Unit: LoginController', function() {
    
      // Load the module with LoginController
      beforeEach(module('material.controllers'));

      var ctrl, scope;
      // inject the $controller and $rootScope services
      // in the beforeEach block
      beforeEach(inject(function($controller, $rootScope) {
        // Create a new scope that's a child of the $rootScope
        scope = $rootScope.$new();
        // Create the controller
        ctrl = $controller('LoginController', {
          $scope: scope
        });
      }));
    
      it('should create $scope.greeting when calling sayHello', 
        function() {
          expect(scope.greeting).toBeUndefined();
          scope.sayHello();
          expect(scope.greeting).toEqual("Hello Ari");
      });
    
})

So, i can do with that and my module's name is right?

Madhan Ganesh · Accepted Answer · 2015-03-29 06:40:18Z

8

Check the order in which the angular modules are loaded. As your listing of javascript files in karma conf, see if the module defined files are loaded first before other files that use it.

Adjust the order in this listing, are explicitly load the file where 'material.controllers' module is defined.

files: [
  '/home/tanpham/Angular/Dev/libs/angular/angular.js',
  '/home/tanpham/Angular/Dev/js/**/*.js',
  '/home/tanpham/Angular/Dev/js/*.js',
  '/home/tanpham/Angular/Test/*.js'
],

answered Mar 29, 2015 at 6:40

Madhan Ganesh

2,3032 gold badges24 silver badges19 bronze badges

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

1 Comment

Bouncing Bit Over a year ago

Thank you so much for your comment. Within the above example the order should be '/home/tanpham/Angular/Dev/js/*.js', '/home/tanpham/Angular/Dev/js/**/*.js', then the whole thing should work again.

Jet Geng · Accepted Answer · 2015-11-13 09:08:18Z

1

i have met this issue. and solved it. just add ",[]" behind the module name in the module declare statement。 in this case chaged code will be :

angular.module('material.controllers',[])
 .controller('LoginController', function($scope) {

  $scope.name = "Ari";
  $scope.sayHello = function() {
     $scope.greeting = "Hello " + $scope.name;
  }
});

answered Nov 13, 2015 at 9:08

Jet Geng

3571 silver badge7 bronze badges

1 Comment

Mark Over a year ago

This was actually my issue, so thank you for the answer. However, ironically this does not really answer the question that the OP demonstrated in his situation, but did help with the method I was using to load the modules.

Collectives™ on Stack Overflow

Unit-Testing AngularJS: Uncaught Error: [$injector:nomod] Module is not available! and ReferenceError: module is not defined when run Karma

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related