AngularJS 1.2 $injector:modulerr

Question

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.

score 636 · Accepted Answer · answered Aug 17 '13 at 10:10

636

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']);

answered Aug 17 '13 at 10:10

shoen

11,845
4
22
27

497

If you are not sure which module is missing, use the not minified angular.js which gives a readable error message:`"Error: [$injector:nomod] Module 'ngRoute' 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."` – Mart Aug 27 '13 at 15:14
2

Hmm, I'm using bower, and it provides .map files - I wonder why Chrome was still showing me errors from the minified file. Thanks for the heads up, @Mart! – Aditya M P Sep 08 '13 at 21:02
Why would they do this??? is really ngRoute a service that should be taken out of the core angular services? i don't get it. – arg20 Sep 09 '13 at 13:46
5

@arg20, you will find the answer here: https://github.com/angular/angular.js/commit/5599b55b04788c2e327d7551a4a699d75516dd21 – Laurent Sep 09 '13 at 14:14
1

not working for me with ngroute included and working with version 1.2.0.rc-3 – Ben Nov 02 '13 at 10:26
4

Holy cow I have been looking EVERYWHERE for the solution to this. I upgraded from 1.0 to 1.2 and got this error. The only advice I could find is to make sure angular-route.js was included, which it was.... Not a fan of the Angular docs. Anyway thank you! I up-voted. – RachelD Nov 20 '13 at 20:56
4

You might get this error if you use angular.module('myModule') instead of angular.module('myModule',[]) while defining your module. http://stackoverflow.com/questions/16260538/module-not-found-in-angularjs – Anirudhan J Dec 02 '13 at 20:15
1

I'm getting a MINERR_ASSET not found even after including the modules, see my question here please! http://stackoverflow.com/questions/21455370/angular-minerr-asset-not-found-404 – Connor Leech Jan 30 '14 at 11:37
1

@Mart thanks using non minified Angular shows exact error. I had problem with var App spelling Uppercase. – STEEL Mar 12 '14 at 09:53
1

Its always a good idea to use the non-minified version of AngularJS while developing. When app is tested and passes the test and is ready to be deployed, use the minified version. Debugging on the non-minified version is much easier. – Mahder Jul 20 '14 at 21:38
Can anyone tell why I'm still getting that exact error? I implemented the fix and added ngRoute http://stackoverflow.com/questions/25705438/angular-setup-error-uncaught-error-injectormodulerr – Leon Gaban Sep 06 '14 at 22:43
1

@Mart thanks for the comment, which helps me to fix my ngResource problem. – coderLMN Dec 08 '14 at 14:51
I had a third party library included twice... got the same error message. – uthomas Dec 18 '14 at 23:10
@Mart I can't believe why your comment is not an answer? – Omar Tariq Mar 26 '16 at 21:04
@OmarTariq thanks, but technically this is only helping find the solution, not the actual solution. It is more general that this very question. – Mart Mar 29 '16 at 12:05
1

@Mart I can't believe I didn't know that until now. I have been working on Angular now for years and plagued with Angular's non-specific error messages. Thanks for that tip as that will be a life saver. – RandallTo Dec 15 '17 at 21:45

score 42 · Answer 2 · answered Nov 15 '14 at 19:43

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");
        };
    });
})();

Mick · Answer 3 · 2015-10-29T12:36:57.453

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.

I had very close to this. I had set the ng-app="app"... and then never setup a module. So it was tripping the error. As a beginner, I just removed the ="app" piece to get my sample code working. Later, I setup the proper module and routing... :) — Eric Burdo, Feb 11 '15 at 12:20

score 26 · Answer 4 · edited Jul 04 '17 at 12:26

26

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

edited Jul 04 '17 at 12:26

Abhishek Gurjar

7,426
10
37
45

answered Aug 17 '15 at 11:44

otherDewi

1,098
10
24

24

Amazing how bad the debugging/error messages are in angular. – basickarl Oct 03 '15 at 15:38
3

LOL. I said to my self, no, I can't make this simple error. And I passed your answer multiple times. But it solved my problem. – Maubeh Aug 02 '17 at 13:42
It's about some import missing – famas23 Mar 07 '18 at 14:22

score 13 · Answer 5 · answered May 10 '14 at 03:11

13

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.

answered May 10 '14 at 03:11

Jasdeep Singh

3,276
4
28
47

Moses Machua · Answer 6 · 2016-01-23T21:54:08.150

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.

score 9 · Answer 7 · answered Jun 05 '16 at 17:54

9

I have just experienced the same error, in my case it was caused by the second parameter in angular.module being missing- hopefully this may help someone with the same issue.

~~angular.module('MyApp');~~

angular.module('MyApp', []);

answered Jun 05 '16 at 17:54

Anth12

1,869
2
20
39

1

This was my issue; I was missing a declaration of _angular.module('my.Namespace', []);_ before using _angular.module('my.Namespace').directive('myDirective', [..._ – ScottFoster1000 Oct 30 '17 at 06:40

score 7 · Answer 8 · answered Mar 30 '15 at 06:29

7

add to link
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>

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

answered Mar 30 '15 at 06:29

SirajuddinLuck

141
1
8

Forgot that you must include src when using specific dependencies! – basickarl Sep 23 '15 at 14:58

score 6 · Answer 9 · edited Jan 22 '17 at 08:38

I had the same problem and tried all possible solution. But finally I came to know from the documentation that ngRoute module is now separated. Have a look to this link

Solution: Add the cdn angular-route.js after angular.min.js script

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

score 5 · Answer 10 · answered Jul 16 '15 at 20:16

Another trigger for this error is leaving the "." out before your "otherwise" or any other route in your route definition:

  app.config(['$routeProvider',
     function($routeProvider) {
        $routeProvider.
           when('/view1', {
              templateUrl: 'partials/view1.html',
              controller: 'Ctrl1'
           }).
           otherwise({
              redirectTo: '/viewCounts'
           });
     }]);

Mortified by a full-stop, yet again. Gotta love JS!

score 4 · Answer 11 · answered Feb 21 '14 at 13:23

Besides below answer, if you have this error in console ([$injector:nomod], MINERR_ASSET:22), but everything seems to work fine, make sure that you don't have duplicate includes in your index.html.

Because this error can also be raised if you have duplicate includes of the files, that use this module, and are included before the file with actual module declaration.

score 3 · Answer 12 · answered Jan 12 '15 at 14:57

If you go through the official tutorial of angularjs https://docs.angularjs.org/tutorial/step_07

Note: Starting with AngularJS version 1.2, ngRoute is in its own module and must be loaded by loading the additional angular-route.js file, which we download via Bower above.

Also please note from ngRoute api https://docs.angularjs.org/api/ngRoute

Installation First include angular-route.js in your HTML:

You can download this file from the following places:

Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js Bower e.g. bower install angular-route@X.Y.Z code.angularjs.org e.g. "//code.angularjs.org/X.Y.Z/angular-route.js" where X.Y.Z is the AngularJS version you are running.

Then load the module in your application by adding it as a dependent module:

angular.module('app', ['ngRoute']); With that you're ready to get started!

score 2 · Answer 13 · answered Feb 16 '17 at 19:53

John Papa provided my issue on this rather obscure comment: Sometimes when you get that error, it means you are missing a file. Other times it means the module was defined after it was used. One way to solve this easily is to name the module files *.module.js and load those first.

score 1 · Answer 14 · edited Jul 07 '17 at 09:09

Its an injector error. You may have use lots of JavaScript files so the injector may be missing.

Some are here:

var app = angular.module('app', 
    ['ngSanitize', 'ui.router', 'pascalprecht.translate', 'ngResource', 
     'ngMaterial', 'angularMoment','md.data.table', 'angularFileUpload', 
     'ngMessages', 'ui.utils.masks', 'angular-sortable-view',          
     'mdPickers','ngDraggable','as.sortable', 'ngAnimate', 'ngTouch']
);

Please check the injector you need to insert in your app.js

score 0 · Answer 15 · answered Feb 04 '15 at 18:09

0

My problem was in the config.xml. Changing:

<access origin="*" launch-external="yes"/>

to

<access origin="*"/>

fixed it.

answered Feb 04 '15 at 18:09

Frank Conry

2,694
3
29
35

score 0 · Answer 16 · answered May 31 '18 at 12:27

Sometime I have seen this error when you are switching between the projects and running the projects on the same port one after the other. In that case goto chrome Developer Tools > Network and try to check the actual written js file for: if the file match with the workspce. To resolve this select Disable Cache under network.

Akber Iqbal · Answer 17 · 2018-10-31T12:21:15.090

After many months, I returned to develop an AngularJS (1.6.4) app, for which I chose Chrome (PC) and Safari (MAC) for testing during development. This code presented this Error: $injector:modulerr Module Error on IE 11.0.9600 (Windows 7, 32-bit).

Upon investigation, it became clear that error was due to forEach loop being used, just replaced all the forEach loops with normal for loops for things to work as-is...

It was basically an IE11 issue (answered here) rather than an AngularJS issue, but I want to put this reply here because the exception raised was an AngularJS exception. Hope it would help some of us out there.

similarly. don't use lambda functions... just replace ()=>{...} with good ol' function(){...}

score 0 · Answer 18 · answered Feb 17 '20 at 01:39

I had this problem and after check my code line by line i saw this

 <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"/>

i just changed it to

     <textarea class="form-control" type="text" ng-model="WallDesc" placeholder="Enter Your Description"></textarea>

and it's worked. so check your tags.

AngularJS 1.2 $injector:modulerr

18 Answers18

Linked