如何调试angular [$ injector：modulerr]错误

Question

I have a growing angular application. From time to time, I mess things up and get an error of the type:

[$injector:modulerr] Failed to instantiate module App due to:

It is often very difficult to find the error based on the error message, especially if there are many files with various controllers etc.

Is there a way to debug these errors in either Chrome or Firefox ?

Answer 1

Just to illustrate.

This is what you get when you load minified version of Angular ( angular.min.js ):

Error: $injector:modulerr
Module Error
Failed to instantiate module eduApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=e...)
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:38:184
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
    at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:444
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
    at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
    at fb (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:41:35)
    at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:19:463

And this is what you get when you use unminified version ( angular.js ):

Error: $injector:nomod
Module Unavailable
Module 'ui.bootstrap' 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.

The first error is really painful to solve. The second one is much more easier.

Happy coding!

Answer 2

Minified AngularJS gives me unreadable errors

... Use the unminified version in development to make it easier to debug.

Answer 3

I found the following approach to be somewhat helpful. Use local angular.js file so you can modify it:

1. Open your angular.js file
2. Go to lines with the following code:

   \nmessage = message + '\\nhttp://errors.angularjs.org/1.3.5/' + \n  (module ? module + '/' : '') + code;  

3. After these two lines add:

   \nconsole.log(message); \n

Taken from here: http://www.chrisgmyr.com/2014/08/debugging-uncaught-error-injectormodulerr-in-angularjs/