cnak2 cnak2 - 1 month ago 24
AngularJS Question

Getting a strange injector error - Unknown provider: bProvider <- b

After compiling my code, I'm getting a strange error that I don't recognize. Usually with an $injector error I get a specific module description, like $uibModal, or $resource, etc.

With this I just get this bProvider <- b.

Does anyone know how I might be able to troubleshoot this, or can anyone tell me what this is referring to?

I'm using grunt to compile and use uglify...

vendor.56b5173c.js:5 Error: [$injector:unpr] Unknown provider: bProvider <- b
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=bProvider%20%3C-%20b
at vendor.56b5173c.js:3
at vendor.56b5173c.js:4
at Object.d [as get] (vendor.56b5173c.js:4)
at vendor.56b5173c.js:4
at d (vendor.56b5173c.js:4)
at e (vendor.56b5173c.js:4)
at Object.g [as invoke] (vendor.56b5173c.js:4)
at j.instance (vendor.56b5173c.js:5)
at ui-bootstrap-tpls.min.js:8
at g (vendor.56b5173c.js:5)

Answer

The error comes when you minify the js files:

What happens during minification is that anotherService argument is being minified to 'b' (or something else).

Angular will try to find the 'b' service, and when that fails it will try to find the 'bProvider' to provide the service.

Since neither of these are declared, you will receive the "Unknown provider" error.

To fix this, you should change all of the dependencies to strings:

This syntax should be avoided:

angular('myModule').service('myService', function(anotherService) {
  // ...
});

This should be followed:

angular('myModule').service('myService', ['anotherService', function(anotherService) {
        // ...
}]);

This way when minification is done, it won't mess up the dependency injection.

This applies to any declaration, not just services.

this is the source of this answer