Angular 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由幾個模塊共享：

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 { } 

這裏是怎樣的產品模塊導入它：

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 { } 

我這裏有完整的示例代碼：https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final