angular - circular dependency

Question

For the first time ever I am facing this issue and I am struggling a lot in trying to figure out why and how to fix it.

I have two services, service1 and service 2, but apparently, there's a circular dependency like this:

serv1 <- serv2 <- serv1

The services code is the following:

angular.module('service1', [])
.service 'serv1', ['$rootScope','$http','$location','serv2',
  function ($rootScope, $http, $location,  serv2){
    serv2.doMyOtherThing(...)
   }
]

and service2 is the following:

angular.module('service2', [])
.service 'serv2', ['$rootScope','$http','$location','serv1',
  function ($rootScope, $http, $location,  serv1){
    serv1.doMyThing(...)
   }
]

why is there a circular dependency? how do I solve this?

Each service is specific for something (serv1 variou utilities and serv2 array utilities) and I need to use the two together sometimes but it's currently not possible.

Thanks for any help

Youness HARDI · Accepted Answer · 2017-08-02 08:16:41Z

1

If you see this Miško Hevery's blog you will understand that :

...
.service 'serv1', ['$rootScope','$http','$location','serv2'

.service 'serv2', ['$rootScope','$http','$location','serv1',

The serv1 needs serv2 and serv2 needs serv1. And this is going to train a circular dependency.

So you could use a third service

Or you can resolve this like this :

angular.module('service1', [])
.service 'serv1', ['$rootScope','$http','$location','serv2',
    function ($rootScope, $http, $location,  serv2){
        serv2.doMyOtherThing(...)
    }
]

angular.module('service2', [])
.service 'serv2', ['$rootScope','$http','$location','$injector',
    function ($rootScope, $http, $location,  $injector){
        var serv1 = $injector.get('serv1');
        serv1.doMyThing(...)
    }
]

edited Aug 2, 2017 at 8:16

answered Aug 2, 2017 at 7:56

Youness HARDI

5421 gold badge3 silver badges14 bronze badges

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

2 Comments

Youness HARDI Over a year ago

I hope this will help

Youness HARDI Over a year ago

I just updated the answer, before i maded a little mistake :p

Rajesh Dan · Accepted Answer · 2017-08-02 07:42:12Z

1

Use a third service, use that third service in the other ones.

example:

angular.module('service1',[])
.service 'serv1' [..,'servCommon', function(..,servCommon){}]

angular.module('service2',[])
.service 'serv2' [..,'servCommon', function(..,servCommon){}]

angular.module('serviceCommon',[])
.service 'servCommon' [.., function(..){}]

Add some common function in that servCommon and use them from other two.

Hope this helps.

answered Aug 2, 2017 at 7:42

Rajesh Dan

4677 silver badges16 bronze badges

2 Comments

Nick Over a year ago

Why this circula dependecy issue happen in the first place? I don't wanna duplicate my functions in even another service, this doesn't seem like the good thing to do here to be honest..

Rajesh Dan Over a year ago

angular DI tries to inject serv1 to serv2, but while it serv2 is already needed to inject serv1, please read more about DI and circular dependency Link to Tutorial If you dont want this workaround then you must need to change your code design in such way that no circular dependency should occur.

Collectives™ on Stack Overflow

angular - circular dependency

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related