Angular Module is not available Karma Jasmine

Question

I am new to Karma , so the error might be very basic.

It is my karma.conf.js file

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: [
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-resource/angular-resource.js',
      'app/*.js',
      'test/*.js',
      'app/**/*.js',
      '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: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Inside app directory my js and html files reside.

The index.html looks like :

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-heroComponentSimple-production</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

  <script src="index.js"></script>
  <script src="heroDetail.js"></script>

</head>
<body ng-app="heroApp">
  <!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
</html>

And index.js looks like :

(function(angular) {
  'use strict';
    angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
        this.hero = {
            name: 'Miles Bronson'
        };
    });
})(window.angular);

Now in my test spec file I tried :

describe('MainController',function(){
    var $rootScope,
        $scope,
        controller;
    beforeEach(function(){
        module('heroApp');

        inject(function($injector){
            $rootScope = $injector.get('$rootScope');
            $scope = $rootScope.$new();
            controller = $injector.get('$controller')('MainCtrl',{$scope: $scope});
        });
    });

    describe('Initialization',function(){
        it('should initialize name of the hero',function(){
            expect('$scope.hero.name').toEqual('Miles Bronson'); 
        });
    });

})

But it said Chrome 55.0.2883 (Windows 8.1 0.0.0) ERROR Uncaught Error: [$injector:nomod] Module 'heroApp' 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. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=heroApp at bower_components/angular/angular.js:2183 Chrome 55.0.2883 (Windows 8.1 0.0.0) ERROR Uncaught Error: [$injector:nomod] Module 'heroApp' 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. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=heroApp at bower_components/angular/angular.js:2183 Chrome 55.0.2883 (Windows 8.1 0.0.0) ERROR Uncaught Error: [$injector:nomod] Module 'heroApp' 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. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=heroApp at bower_components/angular/angular.js:2183 .

What am I doing wrong ?

Answer 1

This is probably because files loading order is not specified and karma just loads your source files in alphabetical order, therefore heroDetail.js comes first, but heroApp module is defined in index.js . Try to change your karma config like this:

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-resource/angular-resource.js',
  'app/index.js',
  'app/heroDetail.js',
  'test/*.js',
  'app/**/*.js',
  'test/**/*.js'
],

Angular Module is not available Karma Jasmine

Question

1 answers

solution1
2 ACCPTED 2017-01-18 12:45:16

Angular Module is not available Karma Jasmine

Question

1 answers

solution1 2 ACCPTED 2017-01-18 12:45:16

solution1
2 ACCPTED 2017-01-18 12:45:16