How to locate missing $injector error?

Question

I'm porting some core angular stuff to a new project. Now I get injector errors but the stacktrace / angular error page does not show the classname of the offending injection errors. All I get is

Error: $injector:modulerr
Module Error

Usually there is a class name in there somewhere. Now I have to go through every single class (of dozens and dozens) and check the imports manually. Isn't there a better way? I've seen this happening while just adding classes. Sometimes it will show the name of the missing injection, sometimes it just comes up blank, when otherwise the stacktrace correctly identifies the missing/bad injection.

Is there some extra debug mode I can get at this information with?

The full (unuseful) stacktrace:

Failed to instantiate module FSApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=FSApp&p1=Error…cape%2Fmain%2Fresources%2Flib%2Fangular-1.2.16%2Fangular.min.js%3A32%3A445)
    at Error (native)
    at http://fs/main/resources/lib/angular-1.2.16/angular.min.js:6:450
    at http://fs/main/resources/lib/angular-1.2.16/angular.min.js:33:332
    at Array.forEach (native)
    at q (http://fs/main/resources/lib/angular-1.2.16/angular.min.js:7:280)
    at e (http://fs/main/resources/lib/angular-1.2.16/angular.min.js:32:445)
    at http://fs/main/resources/lib/angular-1.2.16/angular.min.js:33:18
    at Array.forEach (native)
    at q (http://fs/main/resources/lib/angular-1.2.16/angular.min.js:7:280)
    at e (http://fs/main/resources/lib/angular-1.2.16/angular.min.js:32:445

If you want to try to reproduce this, commit your changes. Delete a couple files here and there. Run your angular app. IF you delete enough you will soon get blank injector errors.

Nope. The original app works 100%. I literally just copied a project over to a new folder and started deleting files that didn't pertain to the new project. This has frustrated me in other situations like refactoring code. — FlavorScape, Jul 01 '14 at 01:57
Considering that dependency errors are the MOST COMMON compiler errors faced by developers http://www.itworld.com/big-data/424262/why-software-builds-fail, it is sad that Angular is so bad at providing information. — FlavorScape, Jul 01 '14 at 02:00
You can sometimes get a cleaner error message by using an unminified angular.js, although I'm not sure if that will help here. Also, what I was alluding to in my first comment is that 1.2+ moved `ngRoute` to a separate file and I've seen a lot of errors from forgetting to include it. Was that one of the files you removed? — Sean Walsh, Jul 01 '14 at 02:08
No, just removing views/partials that don't pertain to this project. — FlavorScape, Jul 01 '14 at 02:15
Ah-- hahaha. Why did that totally slip my mind? just had grunt rebuild with the non minified and gave something more useful. — FlavorScape, Jul 01 '14 at 02:18

score 3 · Accepted Answer · edited May 23 '17 at 11:48

A few tips and tricks:

A similar injector error answer applies here: set a break point on the angular error code and look at the call stack.

Also, occasionally click the link at the top of the stack trace takes to a page (without the class name), but where the page's error has another stack trace link. Click on that link and the second page may have the name of the missing object.

Also, if you haven't moved to annotated code (which can make it easier to spot injector errors)In angular 1.3 and greater, you can use the directive 'ng=strict-di' on whatever element has the ng-app directive, and that will cause the app to throw an error on any un-annotated module--and it will include the function along with the parameters ('function($scope, service, something)') which is hopefully unique enough to find quickly.

How to locate missing $injector error?

1 Answers1