CODEWITHSUNDEEP
angularjsangulardependency-injection
Adit
Adit

Reputation: 118

No Provider for Bootstrap component

This is how my app.module looks:

 @NgModule({
    imports:[BrowserModule,HttpModule,SharedModule.forRoot(),NavigationBarModule,routing,JsonpModule],
    declarations: [RootComponent],
    providers:[PopupManager],
    bootstrap: [RootComponent]
})
export class AppModule { }

This is how my Shared module looks:

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule,RouterModule,LoaderComponent],
  declarations:[LoaderComponent]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ AccountValues,PopupManager,Preferences,TimeFormatter,UserDataProvider],
    };
  }
 }

This is how my PopupManager looks like:

@Injectable()
export class PopupManager{
    private activePopUpComp: HasAPopUp;

    constructor(){
        console.log("PopupManager created");
    }
}

This is how my RootComponent looks:

@Component({
    selector : 'root',
    templateUrl : 'Content/Angular2/Development/partials/root.html',
    styleUrls:['Content/Angular2/Development/css/CommonStyle.css']
})

export class RootComponent{
    constructor(private popUpManager:PopupManager){

    }
    handleClick():void{
        this.popUpManager.setActivePopUpComponent(undefined);
    }
}

PopupManager is provided by Shared module, but for some reason, when I run this code, it says no provider for PopupManager! Even though I have explicitly said to Provide PopupManager, it still doesn't work. I have also tried to create my shared module this way:

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule,RouterModule,LoaderComponent],
  providers: [ AccountValues,PopupManager,Preferences,TimeFormatter,UserDataProvider],
  declarations:[LoaderComponent]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
    };
  }
 }

still I get the same error. I think this is a bug, where the bootstrapped component cannot be injected with any of the providers. I mean to say the RootComponent is created before the providers could be created. So, If its not a bug Where could I be going wrong?

I am using rc6 of Angular2.

Upvotes: 1

Views: 120

Answers (1)

micronyks
micronyks

Reputation: 55443

I think you should use providers under/within static forRoot() of SharedModule as shown below. I hope this will resolve your issue.

@NgModule({
  imports:      [ CommonModule,.. ],
  declarations: [LoaderComponent],
  exports:      [ CommonModule,... ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [  ...,PopupManager,...]  //<-----declare providers here
    };
  }
}

Upvotes: 1

Related Questions