Fix Circular Dependency in Angular

Question

So I have two factories in angular, one that is user-related (is user logged-in? talk with the back-end and log her in)

  app.factory('userFactory', function($window, $location, $http) {
        var loggedUser = {}; 

        loggedUser.isLogged = false;

        loggedUser.check = function() {
             if($window.sessionStorage.user) {           
                this.isLogged = true;
            } else {
                this.isLogged = false;               
            }
        }        

        loggedUser.doLogin = function (theData) {                
                var promise = $http({method: 'POST', url: 'http://whatevah/login', data: theData});                
                return promise;            
        } 

        return  loggedUser;

    });

and one that is interceptor-related (send a token and grab the answer to see if user is logged in).

  app.factory('tokenFactory', function($q, $window, $http) {
    return {
      request: function(config) {
        config.headers = config.headers || {};
        if ($window.sessionStorage.token) {
          $http.defaults.headers.common['mytoken'] = $window.sessionStorage.token;
        }
        return config || $q.when(config);
      },

      response: function(response) {
        return response || $q.when(response);
      }
    };
  });

They both have $http injected, that causes this error

Circular dependency found: $http <- tokenFactory<- $http <- userFactory

Its weird to me that two different factories in angular cannot have the same injection, since the factories have different names and do different things

How can I fix this?

Thanks

can you provide an example in codepen or jsbin? this shouldnt be an issue of circular dependencies — eltonkamami, Feb 18 '16 at 21:05
Not sure if this is your issue but it seems plausible: if an interceptor depends on `$http`, that's a circular dependency: http://stackoverflow.com/questions/20647483/angularjs-injecting-service-into-a-http-interceptor-circular-dependency?rq=1 — mzulch, Feb 18 '16 at 21:21
@antoniskamamis Antonis, I updated my orginal post. There is more code now if you want to take a look. I dont use any method or data of `loggedUser` in the `tokenFactory`, so this is really weird to me. Ευχαριστω — slevin, Feb 19 '16 at 07:54
i cannot replicate the error. http://codepen.io/anon/pen/ZQNXvM. Can you make an example codepen where the error is thrown? — eltonkamami, Feb 19 '16 at 09:00

score 1 · Answer 1 · answered Feb 19 '16 at 08:54

As @mzulch commented, you can't depend on $http in a factory that's used as an http interceptor.

In your case, the easiest solution is simply to set the headers of the request, instead of the global headers:

app.factory('tokenFactory', function($q, $window) {
  return {
    request: function(config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers['mytoken'] = $window.sessionStorage.token;
      }
      return config || $q.when(config);
    },

    response: function(response) {
      return response || $q.when(response);
    }
  };
});

Fix Circular Dependency in Angular

1 Answers1