Angular - Circular dependency found

Question

I am getting the above error. Here are some code fragments, simplified. Application:

app = angular.module('app', ['app.classes', 'ngDialog' .....]);

Module configuration:

app.config(
function ($httpProvider, $translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.preferredLanguage(lang);
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: 'api/PartialTranslationLoad?lang={lang}&table={part}'
    });
    $translatePartialLoaderProvider.addPart('...');
    $translatePartialLoaderProvider.addPart('...');
    $translateProvider.useSanitizeValueStrategy('sanitize');

    $httpProvider.interceptors.push('APIInterceptor');
  }
);

Interceptor service is in app.classes module:

classes = angular.module("app.classes", []);

classes.service('APIInterceptor', function ($q, $rootScope, $location, $window, $injector, ngDialog) {
    ......
}

The error:

Circular dependency found: $http <- $templateRequest <- $compile <- ngDialog <- APIInterceptor <- $http <- $translatePartialLoader

If I dont inject ngDialog into my interceptor everything is fine. Can someone please explain why am I getting Circular dependency error?

Thanks

refer http://stackoverflow.com/questions/19344214/problems-with-circular-dependency-and-oop-in-angularjs — Vishal Rajole, Jan 19 '16 at 17:23
Can you please provide some little details that would be a little closer to my code? I do basically understand what a circular reference is, I just dont understand how I am getting into it? Thank you. — Mark, Jan 19 '16 at 17:50

score 5 · Accepted Answer · answered Jan 20 '16 at 06:41

The core problem is:

APIInterceptor injects ngDialog
ngDialog internally injects $http
$http injects APIInterceptor (Since you have added the interceptor via $httpProvider

The easiest solution is to use $injector to retrieve ngDialog manually when it is needed.

Simple example:

app.factory('APIInterceptor', function($q, $rootScope, $location, $window, $injector) {

  return {

    request: function(config) {

      var ngDialog = $injector.get('ngDialog');

      return config;
    }
  };
});

Angular - Circular dependency found

1 Answers1