16

OK I'm officially bald now, after having been streching my hair out with this infamous problem: The minfied AngularJS app just doesn't work, with this error thown out:

Error: [$injector:unpr] Unknown provider: aProvider <- a http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11492 at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26946 at Object.c [as get] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250) at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:27041 at c (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250) at Object.d [as invoke] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26496) at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:910 at Object.f [as forEach] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11927) at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:856 at j (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:5:27235)

Lots of other people had this problem as well, but looks like it could be fixed by declaring dependencies as an array instead of bare function parameters, like this:

angular.module('my-app').controller('LoginCtrl', [ '$scope', 'HttpService', function($scope, HttpService) { ... }]);

instead of this:

angular.module('my-app').controller('LoginCtrl', function($scope, HttpService) { ... });

But it doesn't work in my case. I checked all of my scripts (coffee and generated javascripts as well), they all use the proper array-style declaration.

The problem doesn't come from extra packages apparently. I tried moving all extra package references out of <!-- bower:js --> block (so that they are not minified by grunt), yet the problem still remains. Which means, it's my code to blame... But then again, I've tried the (seems to be) only fix available, to no avail.

Any hint, even on how to properly debug this?

Thanks in advance!

Improve this question
6
  • Can you disable minification and see which provider is throwing this error. Commented Apr 17, 2014 at 10:31
  • Well, if I disable minification and just go with grunt serve, no error is thrown - the app just works perfectly. Commented Apr 17, 2014 at 10:33
  • 1
    disable your modules one by one in order to detect the part of your code that bugs. You have a DI bug somewhere. Commented Apr 17, 2014 at 10:43
  • The problem is, if I disable a module, the whole app will refuse to start, thus making debugging impossible. Commented Apr 17, 2014 at 10:49
  • Check this project: github.com/btford/ngmin. NgMin should help with minifying your angular app. Commented Apr 18, 2014 at 10:48

3 Answers 3

Reset to default
27

Finally I've found the problem. And yes, it's a DI bug which I missed.

To all who may be suffering from the same headache: array-format declaration must be done in $routeProvider's resolve options as well. In my case (CoffeeScript ahead):

app.config (['$routeProvider', ($routeProvider) -> $routeProvider .when '/', templateUrl: 'views/main.html' controller: 'MainCtrl' resolve: groups: ['GroupService', (GroupService) -> # I MISSED THIS return GroupService.getAll() ] entries: ['EntryService', (EntryService) -> # AND THIS return EntryService.getAll() ] # ... ])

Hope this helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Could you please post the generated JS?
I spent the whole day, trying to solve a problem and in the end, the problem was something as simple as this.
3

This behaviour could come if you use implicit injection, instead of explicit declaring your dependencies. In my experience I faced this kind of problem with particular kind of Angular.js services that return instantiable class (for example to create abstract controller Classes or some other particular cases).

For example: AbstractBaseControllerClass

During minification I had the same problem. I solved using internal declaration of dependency injection. Hope this helps

Improve this answer

1 Comment

You saved my life. I spent so many freaking time and the solution was to use the internal declaration inside one of my provider !
0

For the ones that doesn't like CoffeeScript.

I just took some of my code and put it in.

 $stateProvider .state('screen', { url: '/user/', templateUrl: 'user.html', controller: 'UserController', controllerAs: 'user', location: "User", resolve: ['$q', 'UserService', '$state', '$timeout', authenticateUser ] }) function authenticateUser($q, UserService, $state, $timeout) { UserService.getLoginStatus().then(function () { if (UserService.user) { console.log("is user"); return $q.when(); } else { console.log("not user"); $timeout(function () { // This code runs after the authentication promise has been rejected. // Go to the log-in page $state.go('login') }); return $q.reject() } }); }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.