Ionic 2 - RC1 - Can't Resolve All Parameters for ... - Provider Circular Reference

Ionic Framework ionic-v3
1

Hello,

I have “ProviderA” that depends / calls functions from “ProviderB” and “ProviderB” that depends / calls functions from “ProviderA”.

Both maintain a state and are used throughout the application in different pages.

***Provider A: ***

@Injectable()
export class ProviderA {
     constructor(public providerB:ProviderB) {}
}

***Provider B: ***

@Injectable()
export class ProviderB {
     constructor(public providerA:ProviderA) {}
}

Can you please help ?

Thank you !!

2

See Break circularities with a forward class reference (forwardRef) in the Angular docs.

3

Thanks for that. But it only talks about Component using forward ref to reference a provider / service. They don’t talk about services referencing each other.

Any chance of helping with a sample provider depending on another provider and vice versa ? Thanks !

4

Should work the same for services. See the example in the Angular 2 docs for forwardRef.

5

I tried adding it to the provider that angular complains about its constructor parms and it doesn’t work. For example if the error is about ProviderA can’t resolve (…,?) and ? is providerB. I replaced the parm “?” or ProviderB with
@Inject(forwardRef(() => ProviderB)) providerB: ProviderB
and it doesn’t work.

I am looking for an Ionic2 RC1 plunker and I’ll create one.

Thank you though for the help.

6

Hi Tony did you find a solution for this? Do you mind sharing if so?
I also tried the following solution however it did not work. http://stackoverflow.com/questions/40525850/circular-dependency-injection-angular-2

7

To be honest, I worked around it by making sure that I didn’t have a circular reference between providers. By having the providers depend on each other in a hierarchical way, it worked fine for me. Let me know if you need more info and if you end up figuring it out let me know as well :slight_smile:

Thanks !

8

Thanks Tony. I’m transferring my webapp built in Angular 2 to Ionic 3. I had in Service A it was calling Service B multiple times. In Service B there was only one function that called Service A once. So that I can port it across to Ionic 3 I end up doing have is having Service A subscribe to the subject in the constructor as follows:

this.subscription = announceObjectService.objectAnnouncedSource$.subscribe(
      passedObj => {
      let obj: any = passedObj; 
      // Avoid circular reference w/ form-flow service
      if (obj === 'exec-flow-http'){
        this.getSetupHttp();
      }
    })

Service B announces the subject and the function get’s executed in Service A…yet to be tested in Ionic 3.

But to be honest like you said avoid circular references in the first place. Given it is one function I might just keep it simple copy the function in Service A to Service B and have it called directly in Service B.

9

IMHO any time you have two services calling functions in one another, it is a design flaw. They cannot be tested independently. Either combine them into one service, or refactor things so that the dependency is only one-way.