角2コンポーネントが別のモジュールにロードされていません

Question

私はルートモジュールを持つアプリケーションをビルドしていますが、このモジュールの下には3つのサブモジュールがあります。モジュール1では、モジュール3で再利用できるコンポーネントがありますが、モジュール3のコンポーネントURLにまっすぐ進むと、コンポーネントはロードされません（モジュール1がロードされなかったために起こると思います）。私はすでにモジュール1からコンポーネントをエクスポートして、ルートモジュールでそれをブートストラップしようとしましたが、私は、コンポーネントセレクタが見つからなかったというエラーを取得し

---編集---

ルートモジュール

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ManagerModule, 
    LogadoModule, 
    GeralModule, 
    RouterModule.forRoot(routes, {useHash: true}) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

モジュール1

@NgModule({ 
    declarations: [ 
     GeralComponent, 
     GeralHeaderComponent, 
     LoginComponent, 
     AtividadesListagemComponent // -> COMPONENT TO BE SHARED 
    ], 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     GeralRoutingModule 
    ], 
    providers: [GeralService], 
    exports: [GeralComponent], 
    bootstrap: [GeralComponent] 
}) 
export class GeralModule{} 

モジュール3 // - >このモジュールで共有コンポーネントを使用

@NgModule({ 
    declarations: [ 
     LogadoComponent, 
     AtividadesInscritoComponent, 
     LogadoHeaderComponent 
    ], 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     LogadoRoutingModule 
    ], 
    providers: [], 
    exports: [LogadoComponent], 
    bootstrap: [LogadoComponent] 
}) 
export class LogadoModule{} 

プロジェクト構造は次のとおりです。

ルートモジュール モジュール1 モジュール2 モジュール3

----編集2 -----

共有モジュール

@NgModule({ 
    imports: [CommonModule], 
    exports : [ 
    CommonModule, 
    AtividadesListagemComponent 
    ], 
    declarations: [AtividadesListagemComponent] 
}) 
export class SharedModule { } 

ルートモジュール

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ManagerModule, 
    LogadoModule, 
    GeralModule, 
    RouterModule.forRoot(routes, {useHash: true}) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

モジュール1

@NgModule({ 
    declarations: [ 
     GeralComponent, 
     GeralHeaderComponent, 
     LoginComponent 
    ], 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     GeralRoutingModule, 
     SharedModule 
    ], 
    providers: [GeralService], 
    exports: [GeralComponent], 
    bootstrap: [GeralComponent] 
}) 
export class GeralModule{} 

モジュール3

@NgModule({ 
    declarations: [ 
     LogadoComponent, 
     AtividadesInscritoComponent, 
     LogadoHeaderComponent 
    ], 
    imports: [ 
     CommonModule, 
     ReactiveFormsModule, 
     FormsModule, 
     LogadoRoutingModule, 
     SharedModule 
    ], 
    providers: [], 
    exports: [LogadoComponent], 
    bootstrap: [LogadoComponent] 
}) 
export class LogadoModule{} 

Answer 1

あなたは、いくつかのモジュール間で共有する必要があるコンポーネントを持っている場合は、推奨されるアプローチは、その後SharedModuleとにコンポーネントを追加することです共有モジュールを必要とするモジュールにインポートします。この例では

は、StarComponentは、複数のモジュールで共有されている：https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final

：私はここで完全なサンプルコードを持って

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { ProductListComponent } from './product-list.component'; 
import { ProductDetailComponent } from './product-detail.component'; 

import { SharedModule } from '../shared/shared.module'; 

@NgModule({ 
    imports: [ 
    SharedModule, 
    RouterModule.forChild([ 
     { path: '', component: ProductListComponent }, 
     { path: ':id', component: ProductDetailComponent } 
    ]) 
    ], 
    declarations: [ 
    ProductListComponent, 
    ProductDetailComponent 
    ] 
}) 
export class ProductModule { } 

：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { StarComponent } from './star.component'; 

@NgModule({ 
    imports: [ CommonModule], 
    exports : [ 
    CommonModule, 
    FormsModule, 
    StarComponent 
    ], 
    declarations: [ StarComponent ], 
}) 
export class SharedModule { } 

そしてここでは、どのように製品モジュールのインポートもあります