Debugging "Unknown provider" error in Angular
If your minified script is throwing an error such as:
Unknown provider: bProvider <- b <- myServiceLook for your myService declaration:
angular('myModule').service('myService', function(anotherService) {
// ...
});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:
angular('myModule').service('myService', ['anotherService', function(anotherService) {
// ...
}]);This way when minification is done, it won't mess up the dependency injection.
PS. This applies to any declaration, not just services.
Written by Jack Hsu
Related protips
7 Responses
I'm sorry, but this is not debugging, it's solving the problem.
Debugging is trying to find out what B is - which directive, filter, module etc hasn't the dependencies set correctly and is minified into B?
@adria: Sure, that's fair. Unfortunately, it's hard to know what 'B' actually is. You'd have to do a search for any services that's not wrapped within an array. Or use ngmin to automatically wrap them for you.
I would love to know how you might tackle something like:
Error: [$injector:unpr] Unknown provider: bProvider <- b
@clouddueling: if you're in Chrome and you need to debug minified code, you can do two things:
1) Go to the Scripts tag in Dev Tools, and click on the pause icon to turn on "Pause on exceptions".
2) Click on the two curly braces icon to turn on "Pretty print".
Now, you should be able to see where your page is erroring out.
From what your error describes, I'm guessing it may be .config(function($routeProvider) { ...}); which got minified to .config(function(b) { ... });. Just a guess!
angularjs error injector unpr unknown provider sortcriteriaFilterProvider <- sortcriteriaFilter
$scope.sortcriteria = function($scope.chapters) {
var filtered = [];
for (var i = 0; i < $scope.chapters.length; i++) {
var chapter = $scope.chapters[i];
var chapterName = chapter.name;
var n = chapterName.indexOf(":");
if (i==(n-1)) {
filtered.push(chapter);
}
}
return filtered;
};// this is my function in controller<span ng-repeat="chapter in chapters | filter:sortcriteria"> this is my view file filterunable to find the error could you help me out
You have the filter function on the $scope, which doesn't work.
You need to wire up your module like so:
angular.module('myApp', []).filter('sortcriteria', function(chapters) {
// ...
});Thanks. Saved my issue while deploying the release version. It never shown this error in debug mode
