63

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

5
  • 1
    did you include angular-resource.js? Commented Jan 10, 2014 at 13:23
  • Where is your ngResource refer? Commented Jan 10, 2014 at 13:24
  • 33
    If you are not sure which module is missing, use the non minified angular.js which gives a readable error message: Commented Nov 9, 2015 at 9:30
  • 5
    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 Commented Jan 23, 2017 at 9:13
  • 1
    @briankip you have changed my life Commented Mar 26, 2021 at 21:38

15 Answers 15

54

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"> 
Sign up to request clarification or add additional context in comments.

3 Comments

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.
Excellent tip! I'm personally using a #if DEBUG to manage that for me.
Really great tip. I've been frustrated since I started working on angular weeks back because the diagnostics were so bad. DUH!
47

Try adding this:

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

1 Comment

^^ I think because OP has injected this but the dependency wasn't loaded?
35

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.

3 Comments

thx for the documentation cite - it helped me fix a problem very similar to the one in this question.
@ernd enson: glad to hear that.
YES!! Everyon keeps citing rgRoute - resource has it too!
12

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

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

1 Comment

I tried this and all the global variables, such as app, became local and no longer available to the rest of the application!
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

Comments

6

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.

Comments

6

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

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

Comments

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.

Comments

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.

1 Comment

This fixed my problem. I had mistakenly put <html ng-app="vu" ...> when it should have been <html np-app ..>.. thanks
3

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

Comments

3

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!

Comments

1

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.

Comments

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.

Comments

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;

Comments

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.

1 Comment

Please add an example of what you mean

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.