CODEWITHSUNDEEP
angulartypescriptdependency-injection
JoG
JoG

Reputation: 1030

Angular multiple service provider as array

I have an issue when using multiple provider in my application :

ERROR Error: No provider for Array!
at injectionError (VM634 core.umd.js:1238) [angular]
at noProviderError (VM634 core.umd.js:1276) [angular]
at ReflectiveInjector_._throwOrNull (VM634 core.umd.js:2777) [angular]
at ReflectiveInjector_._getByKeyDefault (VM634 core.umd.js:2816) [angular]
at ReflectiveInjector_._getByKey (VM634 core.umd.js:2748) [angular]
at ReflectiveInjector_.get (VM634 core.umd.js:2617) [angular]
at AppModuleInjector.NgModuleInjector.get (VM634 core.umd.js:3585) [angular]
at resolveDep (VM634 core.umd.js:11046) [angular]
at createClass (VM634 core.umd.js:10899) [angular]
at createDirectiveInstance (VM634 core.umd.js:10730) [angular]
at createViewNodes (VM634 core.umd.js:12093) [angular]
at createRootView (VM634 core.umd.js:11998) [angular]
at callWithDebugContext (VM634 core.umd.js:13213) [angular]
at Object.debugCreateRootView [as createRootView] (VM634 core.umd.js:12673) [angular]

My code

@Injectable()
abstract class OtherService<O> {
 
  protected parentProp: O;

  constructor() {
  }

}

@Injectable()
class OtherServiceImpl extends OtherService<any> {

  private prop; 

  constructor() {
    super();
  }
}

@NgModule({
})
class OtherModule {

  static forRoot(): OtherModule {
    return {
      ngModule: OtherModule,
      providers: [
        {provide: OtherService, useFactory: () => new OtherServiceImpl(), multi: true},
        {provide: OtherService, useFactory: () => new OtherServiceImpl(), multi: true} 
      ],
    };
  }
}

@Component({
  selector: 'app-root',
  template: `
    <pre>{{services | json}}</pre> 
  `
})
class AppComponent {
// IF I USE (public services: OtherService<any>) INSTEAD, IT WORKS, IT'S AND ARRAY BUT NOT USABLE AS AN ARRAY TYPE IN MY COMPONENT
  constructor(public services: OtherService<any>[]) {
  }
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    OtherModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
class AppModule {
}

You can find a working example in this plunker : https://plnkr.co/edit/Nui2eFwS3CtT1fYKDpzh?p=preview

As you can see, in the AppComponent, when I inject my multi services, it works only if I don't specify it as an array...but it is an array.

By typescript, this property is identified as an object and I cannot iterate on it...

Upvotes: 0

Views: 2247

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71911

This is an odd request, and I would love to hear the use case for this, but I managed to get it running for you. You have to use @Inject() for things like this:

constructor(@Inject(OtherService)public services: OtherService<any>[])

plunkr

Upvotes: 1

Related Questions