Resolve a single token to multiple services in angular

Question

I want a single token to be resolve in two different services at run time in angular component. I am adding the tokens to providers array in module as written below.

providers: [{
  provide: ACCOUNT_SERVICE,
  useClass: AccountServiceOne
},
{
  provide: ACCOUNT_SERVICE,
  useClass: AccountServiceTwo
}]

I want to use the ACCOUNT_SERVICE token in two different classes. In AccountServiceA, I want the token to resolve to AccountServiceOne and in AccountServiceB, I want the token to resolve to AccountServiceTwo. See below.

@Injectable({ providedIn: 'root' })
export class AccountServiceA {
  public constructor(
    @Inject(ACCOUNT_SERVICE)
  ) {
   
  }
}

@Injectable({ providedIn: 'root' })
export class AccountServiceB {
  public constructor(
    @Inject(ACCOUNT_SERVICE)
  ) {
  
  }
}

Is it possible to resolve this at runtime?

@MikeOne Sorry for the confusion. It is not required here. Updated the original question. — Madhur Maurya, Aug 16 '21 at 17:15
Alrighty, no probs. Your example is still a bit unclear I’m afraid. I’m not sure what you’re trying to achieve here. Your first code example can’t really work as you have two provides for the same token (one will win or it might even error). — MikeOne, Aug 16 '21 at 17:22
Yup, the one will always win. This is the problem I want to solve. I also added `multi: true` to providers array. But it did not solve the issue. — Madhur Maurya, Aug 16 '21 at 17:38
Can you describe more in detail what are you trying to achieve from the architecture point of view? Maybe there are other solutions. Generally if I would really need to have one token which will get different resolutions in the app I would have different modules for each service (not provide them in root), which can then provide individual values to the token. — Lukasz Gawrys, Aug 16 '21 at 19:03
@LukaszGawrys This is what I want to achieve. I have these services defined in different modules but I am unable to use them separately. Probably an example will be helpful. — Madhur Maurya, Aug 19 '21 at 10:54

score 0 · Answer 1 · answered Aug 19 '21 at 11:24

Let's say you have FirstModule

@Injectable()
export class AccountServiceOne {
  constructor() {}
  public someMethod() {
    console.log('service one method');
  }
}


@Injectable()
export class AccountServiceA {
  constructor(
    public accountService: AccountService
  ) {}
}


@NgModule({
    providers: [
       AccountServiceOne,
       AccountServiceA,
    {
        provide: AccountService,
        useClass: AccountServiceOne
    }]
})
export class FirstModule {
}

And then SecondModule

@Injectable()
export class AccountServiceTwo {
  constructor() {}
  public someMethod() {
    console.log('service two method');
  }
}


@Injectable()
export class AccountServiceB {
  constructor(
    public accountService: AccountService
  ) {}
}


@NgModule({
    providers: [
       AccountServiceTwo,
       AccountServiceB,
    {
        provide: AccountService,
        useClass: AccountServiceTwo
    }]
})
export class SecondModule {
}

Then accountService in AccountServiceA and AccountServiceB would resolve to AccountServiceOne and AccountServiceTwo accordingly.

Resolve a single token to multiple services in angular

1 Answers1