Angular 2 组件未在不同模块中加载

Question

我正在构建一个具有根模块的应用程序，然后在该模块下有 3 个子模块。在 Module 1 中，有一个组件可以在 Module 3 中重复使用，但是，如果我直接转到 Module 3 中的组件 URL ，该组件永远不会加载（我认为这是因为 Module 1 没有加载).我已经尝试从模块 1 导出组件并 bootstrap 它在根模块中，但我收到一条错误消息，指出未找到组件选择器

---编辑---

根模块

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

下面是 Product 模块导入它的方式：

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

Angular 2 组件未在不同模块中加载

Angular 2 Component not loading in different module

angular-routing

angular-module

angular-component-router

angular-components

angular