AngularJS Error: Unknown provider: aProvider <- a

Question

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  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!

Can you disable minification and see which provider is throwing this error. — Chandermani, Apr 17 '14 at 10:31
Well, if I disable minification and just go with `grunt serve`, no error is thrown - the app just works perfectly. — An Phan, Apr 17 '14 at 10:33
disable your modules one by one in order to detect the part of your code that bugs. You have a DI bug somewhere. — Jscti, Apr 17 '14 at 10:43
The problem is, if I disable a module, the whole app will refuse to start, thus making debugging impossible. — An Phan, Apr 17 '14 at 10:49
Check this project: https://github.com/btford/ngmin. NgMin should help with minifying your angular app. — akn, Apr 18 '14 at 10:48
@czwek I use yeoman for this project, so ngmin is there by default. — An Phan, Apr 22 '14 at 09:43

An Phan · Accepted Answer · 2014-04-22T12:16:37.320

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!

edited Apr 22 '14 at 12:16

answered Apr 22 '14 at 09:40

An Phan

2,557
2
25
27

Could you please post the generated JS? – Matthias Max May 06 '16 at 11:05
I spent the whole day, trying to solve a problem and in the end, the problem was something as simple as this. – May 08 '17 at 22:36

wilver · Answer 2 · 2014-07-06T21:40:39.887

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

edited Jul 06 '14 at 21:40

answered Apr 17 '14 at 10:53

wilver

2,106
1
19
26

You saved my life. I spent so many freaking time and the solution was to use the internal declaration inside one of my provider ! – Alexandre Nucera Jul 06 '14 at 21:22

petur · Answer 3 · 2016-06-08T13:31:04.210

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()

        }
    });

}

AngularJS Error: Unknown provider: aProvider <- a

3 Answers3

Linked