Angular JS Uncaught Error: [$injector:modulerr]

Question

I am having a problem with Angular JS receiving an error : Uncaught Error: [$injector:modulerr]. My JS-file looks

angular.module('MyApp', ['ngRoute']);
angular.module('MyApp',['ngResource']);
function TwitterCtrl($scope,$resource){
}

I also included angular-route-js

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

Angular documentation says the problem is http://docs.angularjs.org/api/ngRoute

If you are not sure which module is missing, use the non minified angular.js which gives a readable error message: — briankip, Nov 09 '15 at 09:30
I'm sorry that I'm commenting an answer that is this old, but I feel briankip's comment deserves A LOT more upvotes. I had no idea the non-minified version of Angular threw more descriptive errors, and it's the only way I managed to find out what the problem was in my code. Thank you @briankip — Hankrecords, Jan 23 '17 at 09:13

score 52 · Answer 1 · edited Dec 12 '20 at 16:02

52

In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.

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

edited Dec 12 '20 at 16:02

Ronan Boiteau

9,608
6
34
56

answered Jul 19 '15 at 20:03

ulmer-morozov

1,306
14
13

4

Good tip, thanks! I was missing the angular-animate.js. But whatever you miss, if you do what Ulmer-Morozov wrote here you will be told, unless you use min-files. Valuable lesson learned. – Terje Nesthus Aug 05 '15 at 17:43
1

Excellent tip! I'm personally using a #if DEBUG to manage that for me. – Will Strohl Sep 26 '15 at 02:43
Really great tip. I've been frustrated since I started working on angular weeks back because the diagnostics were so bad. DUH! – itchyspacesuit Apr 29 '17 at 01:38

score 47 · Accepted Answer · edited Dec 12 '20 at 16:05

47

Try adding this:

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

edited Dec 12 '20 at 16:05

Ronan Boiteau

9,608
6
34
56

answered Jan 10 '14 at 13:23

Lauri Elias

1,231
1
21
25

^^ I think because OP has injected this but the dependency wasn't loaded? – Mahesh Apr 03 '17 at 22:25

score 34 · Answer 3 · answered Jan 10 '14 at 13:25

34

Try adding:

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

and:

angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}

You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.

From angular documentation:

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

answered Jan 10 '14 at 13:25

Khanh TO

48,509
13
99
115

thx for the documentation cite - it helped me fix a problem very similar to the one in this question. – ernd enson Jan 16 '14 at 04:57
1

@ernd enson: glad to hear that. – Khanh TO Jan 16 '14 at 13:32
YES!! Everyon keeps citing rgRoute - resource has it too! – R Claven Apr 01 '14 at 06:07

score 13 · Answer 4 · answered Feb 03 '15 at 19:06

13

Make sure you're function is wrapped in a closure, complete with the extra () at the end:

(function(){                                                                     

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


})();

answered Feb 03 '15 at 19:06

ContextSwitch

2,830
6
35
51

I tried this and all the global variables, such as `app`, became local and no longer available to the rest of the application! – Zarepheth Oct 05 '16 at 15:00

score 6 · Answer 5 · edited May 23 '17 at 12:26

6

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

This is getting reference from: AngularJS 1.2 $injector:modulerr David answer

edited May 23 '17 at 12:26

Community

1
1

answered Jun 24 '15 at 10:56

Arun Sharma

869
9
9

score 6 · Answer 6 · answered Sep 15 '15 at 03:36

I previously had the same issue, but I realized that I didn't include the "app.js" (the main application) inside my main page (index.html). So even when you include all the dependencies required by AngularJS, you might end up with that error in the console. So always make sure to include the necessary files inside your main page and you shouldn't have that issue.

Hope this helps.

Julia · Answer 7 · 2017-07-04T18:51:54.687

6

I had the same problem. You should type your Angular js code outside of any function like this:

$( document ).ready(function() {});

edited Jul 04 '17 at 18:51

answered Apr 01 '17 at 15:02

Julia

95
1
7

score 4 · Answer 8 · edited Aug 15 '16 at 14:37

4

I got this error because I had a dependency on another module that was not loaded.

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function(){}...

so even though I had all the Angular modules, I didn't have the kendo one.

edited Aug 15 '16 at 14:37

Mike Zavarello

3,514
4
29
43

answered Jul 07 '16 at 01:59

Sibele Lima

206
1
3
15

score 3 · Answer 9 · edited Sep 16 '14 at 22:16

3

ok if you are getting a Uncaught Error: [$injector:modulerr] and the angular module is in the error that is telling you, you have an duplicate ng-app module.

edited Sep 16 '14 at 22:16

Roney Michael

3,964
5
30
45

answered Sep 16 '14 at 20:36

Herb Williams

59
1
6

This fixed my problem. I had mistakenly put `` when it should have been ``.. thanks – kodybrown Mar 24 '16 at 18:13

score 3 · Answer 10 · answered Feb 01 '17 at 16:57

Make sure that the variable that holds your angular.module is structured correctly.

This will fail with "Uncaught Error: [$injector:modulerr]":

var angApp = angular.module("angApp");

This works:

var angApp = angular.module("angApp", []);

It's a sneaky one since the error message doesn't point to one thing in particular (Thus the wide variety of answers). Additionally, most js linters won't catch the particulars. Keep at it!

score 2 · Answer 11 · answered Oct 11 '16 at 12:41

I had exactly the same problem and what resolved it was to remove the closure:

$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){
        ...
    });
});

becomes:

var app = angular.module("myApp", []); 
app.controller('myController', function(){
    ...
});

score 1 · Answer 12 · answered Sep 29 '14 at 08:23

The error means that the dependency injector was unable to locate the dependency 'ngResource'. The script tag in the accepted answer provides this dependency.

You will also get the same error if you add any custom modules in the dependencies but did not add the script tag for including the '.js' file containing the dependency.

score 1 · Answer 13 · answered Jun 04 '16 at 00:56

1

Just throwing this in in case it helps, I had this issue and the reason for me was because when I bundled my Angular stuff I referenced the main app file as "AngularWebApp" instead of "AngularWebApp.js", hope this helps.

answered Jun 04 '16 at 00:56

Trevor Hart

993
7
26

score 1 · Answer 14 · answered Jun 30 '17 at 07:53

1

I had also same issue, I have just removed following line of code from BundleConfig.cs file and my code is working fine.

BundleTable.EnableOptimizations = true;

answered Jun 30 '17 at 07:53

Kamalakar Chavan

11
3

score 0 · Answer 15 · answered May 30 '18 at 10:27

0

Do not load the javascript inside the cdn link script tag.Use a separate script tag for loading the AngularJs scripts. I had the same issue but I created a separate <script> Then the error gone.

answered May 30 '18 at 10:27

Please add an example of what you mean – lwdthe1 Apr 29 '19 at 23:35

Angular JS Uncaught Error: [$injector:modulerr]

15 Answers15

Linked