javascript - Minified AngularJS gives me unreadable errors

Question

This is the stack trace when I use angular.js:

[$injector:unpr] Unknown provider: editorPopupManagerProvider <- editorPopupManager <- libStateManager <- libInjectionManager
http://errors.angularjs.org/1.2.2/$injector/unpr?p0=editorPopupManagerProvider%20%3C-%20editorPopupManager%20%3C-%20libStateManager%20%3C-%20libInjectionManager

And this is the stack trace when I use angular.min.js:

[$injector:unpr] http://errors.angularjs.org/1.2.2/$injector/unpr?p0=editorPopupManagerProvider%20%3C-%20editorPopupManager%20%3C-%20libStateManager%20%3C-%20libInjectionManager

This is just a simple example but sometimes the minified error doesn't help even a bit.

I expect the first stack trace in both cases: When I use angular.js and angular.min.js. I don't have a problem in the code that led to this exception. I made it on purpose to demonstrate the problem I have with angular.min.js minifying the stack trace and making it really hard to understand. If the reason it does that is to avoid end users to see the stack trace, I understand. But I need the normal-readable stack trace in order to send it to a logging server.

Answer 1

Your unknown provider name is probably being manipulated/mangled by the minifier, thus you need to use the following syntax to correct it:

myApp.controller('MyCtrl' ['$scope', function ($scope) {
    // do stuff with '$scope'
}]);

Note how the function is wrapped in an Array, this keeps the naming conventions of your dependencies so they can safely be remapped as Strings are not mangled:

myApp.controller('MyCtrl' ['$scope', function (a) {
    // do stuff with 'a'
}]);

Which you can then add your other dependencies (they need to appear in the order as they're specified):

myApp.controller('MyCtrl' ['$scope', 'MyService', function ($scope, MyService) {
    // do stuff...
}]);