Inject non-singleton service into non-singleton service in Angular

Question

What would be the way to go if I wanted to inject a non-singleton service into another non-singleton service in Angular?

Let's say I have a ComponentA which uses a ServiceA like this

@component({
  selector: "componentA",
  providers: [ServiceA]
})
export class ComponentA {
  constructor(private serviceA: ServiceA) {}
}

and now, ServiceA also depends on ServiceB, so I need to inject it

@Injectable()
export class ServiceA {
   constructor(private serviceB: ServiceB) {}
}

How/where would I declare my ServiceB? In the module? In that case would that be a singleton?

If I add it to the providers in ComponentA it works fine, but then I need to know in ComponentA that ServiceA depends on ServiceB, which doesn't seem fine to me.

Thanks!

Answer 1

Roughly speaking, unless you have the providedIn options in the @Injectable(), Angular will not treat the service as a singleton. You can refer to the docs for details on how that works: https://angular.io/api/core/Injectable#providedin

The issue that you will run into, is that if you simply do:

@Injectable()
export class ServiceB {
   constructor() {}
}

It will throw an error when trying to inject ServiceB into ServiceA because it has no provider. Now normally, to resolve this, you would add { providedIn: 'root' } to ServiceB's @Injectable(). This will create service B as an application-wide singleton service.

When you use @Component( { providers: [] } ) that will create an instance just for that component. But you can't do that for a service.

You may ask, why doesn't @Injectable() have a providers option like @Component() does? The Angular team doesn't want to do this for a number of reasons, see this github issue for more info https://github.com/angular/angular/issues/5622

TLDR:

To provide you with something to solve this problem, you can keep it simple and avoid using Angular's DI altogether if you want control over what instances you use, you can just do it yourself:

@Injectable()
export class ServiceA {
   constructor(private serviceB: ServiceB = new ServiceB()) {}
}

or

• use Angular's DI with @NgModule() and/or @Component() providers arrays,
• @Injectable( { providedIn: <something> } ) (https://angular.io/api/core/Injectable#providedin)

Edit: as suggested by @minigeek, using providedIn you can use any to make each lazy module get it's own instance of the service.