Circular dependency found in angular js

Question

Tring to add interceptor header for my every request, however, it is giving me below error.

Uncaught Error: [$injector:cdep] Circular dependency found: $http <- Auth <- httpRequestInterceptor <- $http <- $templateRequest <- $route

app.js

var app= angular.module('myDemoApp',['ngRoute'])


app.factory('httpRequestInterceptor', ['Auth', function (Auth) {
  return {
    request: function (config) {

      config.headers['x-access-token'] = Auth.getToken();
      return config;
    }
  };
}]);

app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('httpRequestInterceptor');
});

Auth Service

(function () {
    'use strict';

    myDemoApp.factory('Auth', ['$http', '$window', Auth]);

    /******Auth function start*****/
    function Auth($http, $window) {
        var authFactory = {};

        authFactory.setToken = setToken;
        authFactory.getToken = getToken;
        return authFactory;


        /*setToken function start*/
        function setToken(token) {

            if (token) {
                $window.localStorage.setItem('token', token);
            } else {
                $window.localStorage.removeItem('token');
            }

        }

        /*getToken function start*/
        function getToken() {
            return $window.localStorage.getItem('token')
        }

    }


})();

Shashank Vivek · Accepted Answer · 2018-06-08 12:37:27Z

6

You can't do this because.

You have created httpRequestInterceptor which intercepts all $http requests.
Now, you are passing Auth in the httpRequestInterceptor.
If you'll see, Auth uses $http request inside itself.
So, your interceptor can itself cause a http request using Auth.

Hence, its circular error and angularjs wont allow you to do that !

Remove $http from Auth factory OR dont insert a service into interceptor which itself uses $http.

I hope you got, how the infinite loop chain being created, hence a circular dependency error !

edited Jun 8, 2018 at 12:37

answered Jun 8, 2018 at 12:31

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3563459 Over a year ago

Thanks. I have remove $http service and it is working fine now.

Collectives™ on Stack Overflow

Circular dependency found in angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest