1

I am trying to understand the concept of multi provider in Angular.

"with multi providers we can basically extend the thing that is being injected for a particular token"

So I tried to understand it through code, which is as below

But when I run it, error is thrown this.ts.testdisplay is not a function

Please anyone can explain about the error ?

Thanks

   //our root app component
import {Component, NgModule, ViewContainerRef, ViewChild,Inject} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

function dummyFactory()
{
return {
  display:function()
  {
    return "Dummy"
  }
}
}


export class TestService
{
  testdisplay():string
  {
    console.log("I am a test service")
    return "Ankit Dwivedi";
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      Checking USE Factory
      {{name}}

    </div>
  `,
})
export class App {

  name:string;
  constructor(@Inject(TestService) private ts)
  {
     console.log(this.ts)
     this.name = this.ts.testdisplay() 
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ],
  providers:[{provide:TestService,useFactory:dummyFactory,multi:true}]
})
export class AppModule {}
user3045179
  • 321
  • 4
  • 20
  • Have a look here. So the ideia of having a multi provider is basically to allow you to extend an existing set of declarations under the same token https://stackoverflow.com/questions/38144641/what-is-multi-provider-in-angular2 – Hugo Noro Feb 01 '18 at 22:16

0 Answers0