Inject all Services that implement some Interface

Question

Simple scenario:

I have multiple Services that implement a common Interface. All those Services are registered within the bootstrap method.

Now I'd like to have another Service, which injects all registered Services that implement the common Interface.

i.e.

export interface MyInterface {
    foo(): void;
}

export class Service1 implements MyInterface {
    foo() { console.out("bar"); }
}

export class Service2 implements MyInterface {
    foo() { console.out("baz"); }
}

export class CollectorService {
    constructor(services:MyInterface[]) {
        services.forEach(s => s.foo());
    }
}

Is that possible somehow?

Thierry Templier · Accepted Answer · 2016-03-10T12:45:03.733

You need to register your service providers like this:

boostrap(AppComponent, [
  provide(MyInterface, { useClass: Service1, multi:true });
  provide(MyInterface, { useClass: Service2, multi:true });
]);

This will work only with classes not with interfaces since interfaces don't exist at runtime.

To make it work with interfaces, you need to adapt it:

bootstrap(AppComponent, [
  provide('MyInterface', { useClass: Service1, multi:true }),
  provide('MyInterface', { useClass: Service2, multi:true }),
  CollectorService
]);

and inject this way:

@Injectable()
export class CollectorService {
  constructor(@Inject('MyInterface') services:MyInterface[]) {
    services.forEach(s => s.foo());
  }
}

See this plunkr for more details: https://plnkr.co/edit/HSqOEN?p=preview.

See this link for more details:

http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html

Use OpaqueToken, please see the correct answer http://stackoverflow.com/a/35916788/8363 — Schmuli, Jul 12 '16 at 11:13

score 12 · Answer 2 · edited Sep 01 '22 at 09:22

12

Because interfaces are not available at runtime (only for static checks) interfaces can't be used as toke for DI.

Use a token instead:

(deprecated) ~~https://angular.io/api/core/OpaqueToken~~

var myInterfaceToken = new OpaqueToken('MyInterface');

https://angular.io/api/core/InjectionToken

var myInterfaceToken = new InjectionToken<MyInterface>('MyInterface');

// import `myInterfaceToken` to make it available in this file

@NgModule({
  providers: [ 
    { provide: myInterfaceToken, useClass: Service1, multi:true },
    { provide: myInterfaceToken, useClass: Service2, multi:true },
  ],
  boostrap: [AppComponent],
)
class AppComponent {}

// import `myInterfaceToken` to make it available in this file

export class CollectorService {
    constructor(@Inject(myInterfaceToken) services:MyInterface[]) {
        services.forEach(s => s.foo());
    }
}

edited Sep 01 '22 at 09:22

Benjamin M

23,599
32
121
201

answered Mar 10 '16 at 12:40

Günter Zöchbauer

623,577
216
2,003
1,567

Using OpaqueToken is the recommended way of providing interface implementations. – Schmuli Jul 12 '16 at 11:13
Used `InjectionToken` instead of `OpaqueToken` since the last is deprecated since angular 4. https://angular.io/api/core/InjectionToken – FindOutIslamNow Jun 20 '18 at 10:49
1

Using a mix of this answer and [Angular2 How can I Inject all interface implementation to service as list?](https://stackoverflow.com/questions/43049643/angular2-how-can-i-inject-all-interface-implementation-to-service-as-list), I managed to make things work. Thanks! To this answer: The provider syntax has changed to something like this: `{ provide: MY_CLASS_INJECTION_TOKEN, useClass: MY_CLASS, multi: true }` and is added to the start module (at least I add it to the start module...) – MartinJH Sep 04 '18 at 07:36
1

@MartinJH glad to hear! Thanks for the hint. It's quite an old answer. I updated it. – Günter Zöchbauer Sep 04 '18 at 07:44
1

That was a speedy response. Thanks for the effort! – MartinJH Sep 04 '18 at 07:45

Inject all Services that implement some Interface

2 Answers2

Linked