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