angular2 rc5 using component from feature module not working

Question

I have an app module and a feature module. A component called "AudioPlayerComponent" is declared in the feature module. I want to use it in the app module, but its not showing. No errors.

Am I missing something?

App Module:

@NgModule({
  imports: [
    BrowserModule,
    HomeModule, 
    ReciterModule, // the feature module which has the audio player
    routing
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
  providers: [
    appRoutingProviders,
    AudioPlayerService
  ],
  bootstrap: [AppComponent]
})

Feature Module:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    reciterRouting
  ],
  declarations: [
    ReciterDetailComponent, 
    WidgetComponent,
    AudioPlayerComponent  // this is the component I want to also use in the app component
  ],
  providers: [
    AppService,
    RecitersService 
  ]
})

A component in the feature module that uses audio-player (Shows)

<div class="reciter-detail">
   ...
    <audio-player></audio-player>

</div>

App component that tries to use audio-player (doesn't show):

<nav-main></nav-main> 
 <div class="container">

    <router-outlet></router-outlet>


    <audio-player></audio-player>
</div>

Madhu Ranjan · Accepted Answer · 2020-08-31T18:29:34.813

You have to add AudioPlayerComponent in the exports of Feature Module.

If you want to use any Component, Pipe, Directive from Feature Module into another module you need to export them

  @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     HttpModule,
     reciterRouting
    ],
   declarations: [
     ReciterDetailComponent, 
     WidgetComponent,
     AudioPlayerComponent  // this is the component I want to also use in the app component
   ],
   //add exports
   exports: [ 
      AudioPlayerComponent
   ],
   providers: [
     AppService,
     RecitersService 
   ]
  })

Read more about NgModule properties here.

score 0 · Answer 2 · answered Aug 22 '16 at 03:07

The accepted answer is correct. I ended reading the guide and making a separate shared module.

Shared Module:

@NgModule({
    imports: [CommonModule],
    declarations: [
        AudioPlayerComponent
    ],
    exports: [ 
        AudioPlayerComponent,
        CommonModule,
        FormsModule
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [AppService,AudioPlayerService]
        };
    }
}

App Module

@NgModule({
  imports: [
    BrowserModule,
    HomeModule, 
    ReciterModule,
    routing, 
    SharedModule.forRoot()
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
  providers: [
    appRoutingProviders 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Feature Module

@NgModule({
  imports: [ 
    HttpModule,
    reciterRouting,
    SharedModule
  ],
  declarations: [
    ReciterDetailComponent, 
    WidgetComponent 
  ],
  providers: [ 
    RecitersService 
  ],
  exports: [ReciterDetailComponent]
})

angular2 rc5 using component from feature module not working

2 Answers2