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

Posted

技术标签:

【中文标题】Angular 2 组件未加载到不同的模块中【英文标题】:Angular 2 Component not loading in different module 【发布时间】:2017-12-22 15:40:18 【问题描述】:

我正在构建一个具有根模块的应用程序,然后在此模块下是 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

【问题讨论】:

请提供一些代码以便我们查看。 @DeborahK 完成 :) 【参考方案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/4:为每个模块加载 sass 变量

angular ngbuild prod 未加载任何模块

Angular 远程加载模块不会将入口组件加载到视图中

Angular默认子路由未加载父组件

在组件中检索到响应后,加载微调器未隐藏

我的 Angular 7 组件已连接到数据源,但未显示数据