Search code examples
angularjsangulartypescriptangular2-componentsangular2-ngmodel

angular2 rc5 using component from feature module not working


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>

Solution

  • 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.