I encountered a problem while utilizing multiple providers 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]
Here is the code snippet causing the issue:
@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 view a working example in this Plunker : https://plnkr.co/edit/Nui2eFwS3CtT1fYKDpzh?p=preview
Upon observing the above code, when I inject my multi services into the AppComponent, it only functions properly if I do not specify it as an array...however, it should be recognized as an array.
In TypeScript, this property is identified as an object and therefore cannot be iterated on...