AngularJS 1.2 $injector:modulerr

AngularJS 1.2 $injector:modulerr

When using angular 1.2 instead of 1.07 the following piece of code is not valid anymore, why?
‘use strict’;

var app = angular.module(‘myapp’, []);

app.config([‘$routeProvider’, ‘$locationProvider’,
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when(‘/’, {
templateUrl: ‘part.html’,
controller: ‘MyCtrl’
}).
otherwise({
redirectTo: ‘/’
});
}
]);

the issue is in the injector configuration part (app.config):
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=muninn&p1=Error%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A31%3A252)

If I remember correctly this issue started with angular 1.1.6.

Solutions/Answers:

Solution 1:

The problem was caused by missing inclusion of ngRoute module. Since version 1.1.6 it’s a separate part:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

var app = angular.module('myapp', ['ngRoute']);

Solution 2:

my error disappeared by adding this ‘()’ at the end

(function(){
    var home = angular.module('home',[]);

    home.controller('QuestionsController',function(){
        console.log("controller initialized");
        this.addPoll = function(){
            console.log("inside function");
        };
    });
})();

Solution 3:

One more thing to add to the list as this is the first result that comes up with a google search of ‘Error: [$injector:modulerr] angular’:

If you have a mismatch between your app name in your ‘index’html’ and in your main javascript app definition this can also generate this error.

For example if your HTML looks like this:

    </head>
    <body ng-app="myWebSite">

        <!-- My Web Site -->
        <p>About my web site...</p>

        etc ...

And your JavaScript looks like this (i.e has a typo on app name – myWebCite instead of myWebSite):

/** Main AngularJS Web Application */ 
var app = angular.module('myWebCite', [ 'ngRoute' ]); 

/** Configure the Routes */ 
app.config(['$routeProvider', function ($routeProvider) { 
  etc ...

then the ‘Error:[$injector:modulerr] angular’ error will be generated also.

Solution 4:

A noob error can be forgetting to include the module js

<script src="app/modules/myModule.js"></script>

files in the index.html at all

Solution 5:

For those using frameworks that compress, bundle, and minify files, make sure you define each dependency explicitly as these frameworks tend to rename your variables. That happened to me while using ASP.NET BundleConfig.cs to bundle my app scripts together.

Before

app.config(function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
});

After

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.
      when('/', {
          templateUrl: 'list.html',
          controller: 'ListController'
      }).
      when('/items/:itemId', {
          templateUrl: 'details.html',
          controller: 'DetailsController'
      }).
      otherwise({
          redirectTo: '/'
      });
}]);

Read more here about Angular Dependency Annotation.

Solution 6:

If you have this error in console ([$injector:nomod], MINERR_ASSET:22), make sure you are not including your application code before loading AngularJS

I was doing that and once I fixed the order, the error went away.