angular2 rc5フィーチャモジュールのコンポーネントを使用していません

Question

私はアプリモジュールとフィーチャモジュールを持っています。フィーチャモジュールでは、「AudioPlayerComponent」というコンポーネントが宣言されています。私は、アプリケーションモジュールでそれを使用したいが、それは表示されません。エラーはありません。

何か不足していますか？

アプリケーションモジュール：

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

機能モジュール：

@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 
    ] 
}) 

オーディオプレーヤーを使用する機能モジュール内のコンポーネント（ショー）

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

</div> 

オーディオプレーヤーを使用しようとし

アプリケーションコンポーネント（表示されません）：

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

    <router-outlet></router-outlet> 


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

Answer 1

あなたは機能モジュールの輸出にAudioPlayerComponentを追加する必要があります。あなたが別のモジュールに機能モジュールから任意のコンポーネント、パイプ、ディレクティブを使用したい場合は

あなたは

@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 
    ] 
    }) 

NgModuleプロパティhereについてもっと読むそれらをエクスポートする必要があります。

これが役立ちますように！

Answer 2

回答は正しいです。私はガイドを読んで別の共有モジュールを作成し終わった。

共有モジュール：

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

アプリケーションモジュール

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

機能モジュール

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