Error [$injector:unpr] when injecting sanitize dependency

Question

I am trying to use progressBar from AngularUIBootstrap.

I have a objectFactory.js file:

(function () {
    var objectiveFactory = function ($http, animate) {
        debugger;
        return {
            getObjectives: function () {                
                return $http.get('/api/Objective/');
            }
        };

    };
    debugger;
    try {
        //objectiveFactory.$inject = ['$http', '$animate', '$sanitize'];// error
        objectiveFactory.$inject = ['$http', '$animate'];// no error
        angular.module('app', []).factory('objectiveFactory', objectiveFactory);
    }
    catch (e)
    {}    
}());

It is really weird, however if I add new dependency $sanitize:

objectiveFactory.$inject = ['$http', '$animate', '$sanitize'];// not working

Then I've got an error:

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=sanitizeProvider%20%3C-%20sanitize%20%3C-%20objectiveController at Error (native) at http://localhost:15533/Scripts/angular.min.js:6:412 at http://localhost:15533/Scripts/angular.min.js:43:174 at Object.d [as get]

But '$http' and '$animate',injections perfectly works.

I've explored a lot of info and double checked the following advices in my Web API application:

I've checked versions angular'js file and angular-sanitize.js and they are the same 1.5.8.

My bundle files look like this:

 bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
             "~/Scripts/jquery-1.10.2.min.js",
             "~/Scripts/bootstrap.min.js",
             "~/Scripts/angular.min.js",                     
             "~/Scripts/angular-animate.min.js",
             "~/Scripts/angular-sanitize.min.js",
             "~/Scripts/ui-bootstrap-tpls-2.1.3.js",  
             "~/Scripts/objectiveFactory.js",
             "~/Scripts/objective.js"

             ));

I've tried various ways of injection:

objectiveController.$inject = ['$scope', '$http', 'objectiveFactory', '$animate', 'ngSanitize'];
objectiveController.$inject = ['$scope', '$http', 'objectiveFactory', '$animate', '$sanitize'];
objectiveController.$inject = ['$scope', '$http', 'objectiveFactory', '$animate', 'sanitize'];

However, the error is the same:

angular.js:13920 Error: [$injector:unpr] Unknown provider:

Does anybody know what I've done wrong? ('$http'injection perfectly works)

@PoyrazYilmaz ooops, what's main module? I just have two JavaScript files: objectoveFactory and objectiveController. — StepUp
angular.module('app', []) here is your main module and you did not inject anything here. It is normal $https is working because it comes with core but you have to inject ngSanitize to make $sanitize work... — Poyraz Yilmaz
@PoyrazYilmaz thanks! It works! Post your answer and I'll mark it! — StepUp

Poyraz Yilmaz Poyraz Yilmaz · Accepted Answer · 2016-09-06T09:23:58

Inject ngSanitize into your main module to work with $sanitize...

You need to do same thing for $animate as well, inject ngAnimate

Error [$injector:unpr] when injecting sanitize dependency

1 Answers