AngularJS - Unknown provider configuring $httpProvider

Question

In the following code example:

myApp.config(['$httpProvider', function($httpProvider, $cookieStore) {

    $httpProvider.defaults.withCredentials = true;

    $httpProvider.defaults.headers.get['Authorization'] = 'Basic '+ $cookieStore.get('myToken');

    return JSON.stringify(data);

}]);

I get an angularjs error like 'Unknown provider $cookieStore'.

'myApp' has dependenciy and 'ngCookies' and angular-cookies.min.js is laoded, so what's wrong with that code ?

Is that fact that i'm doing this in .config ?

Answer 1

Because it's only possible to pass providers when configuring, i have finally done the overwrite of my http parameter not with a request transformer but by creating a service as factory to do requests.

Here is a code example of the service (not tested, just for information):

angular.module('myapp-http-request', []);
angular.module('myapp-http-request')
.factory('MyRequests', function($http, $cookieStore){

    return {
        request: function(method, url, data, okCallback, koCallback){
            $http({
                method: method,
                url: url,
                data: data
            }).success(okCallback).error(koCallback);
        },
        authentifiedRequest: function(method, url, data, okCallback, koCallback){
            $http({
                method: method,
                url: url,
                data: data,
                headers: {'Authorization': $cookieStore.get('token')}
            }).success(okCallback).error(koCallback);
        }
    }
});

And example of usage (not tested, just for information):

angular.module('sharewebapp', ['myapp-http-request'])
.controller('MyController', ['MyRequests', function(MyRequests){
    MyRequests.authentifiedRequest('DELETE', '/logout', '', function(){alert('logged-out');}, function(){alert('error');})
}]);

Answer 2

You probably need to add the cookieStore

myApp.config(['$httpProvider', '$cookieStore', function($httpProvider, $cookieStore) 

Answer 3

I had ran into this same problem so i'll post how I got around it. I essentially used the $injector module to manual grab an instance of the service I needed. Note this also works for user defined services.

 angular.module('app').
 config(config);

 config.$inject = ['$httpProvider'];

 function config($httpProvider) {
  //Inject using the $injector
  $httpProvider.interceptors.push(['$injector', function($injector){
  return {
    request: function(config) {

      //Get access by injecting an instance of the desired module/service
      let $cookieStore = $injector.get('$cookieStore');

      let token = $cookieStore.get('your-cookie-name');
      if (token) {
        config.headers['x-access-token'] = token;
      }
      return config;
    }
  }
}])
}

Answer 4

Using the Module.run() seems to be a cleaner way to set headers that are always needed. See my answer here: AngularJS pass requestVerificationToken to a service