Angular中如何在懒加载模块中使用其他模块的组件

看来你在Angular里遇到了懒加载模块无法使用ReusableModule组件的问题，我结合你的项目结构一步步给你解决：

第一步：让ReusableModule把组件“对外开放” #

Angular模块里的组件默认是模块私有的，只有把组件加到exports数组里，其他模块才能访问到它们。你需要修改reusable.module.ts的配置：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入你要复用的组件
import { YourReusableComponent } from './path-to-your-reusable-component';

@NgModule({
  imports: [
    CommonModule,
    // 这里放ReusableModule自身需要的其他依赖，比如FormsModule、HttpClientModule等
  ],
  declarations: [
    YourReusableComponent // 声明组件
  ],
  // 关键：把需要被外部使用的组件加到exports里
  exports: [
    YourReusableComponent
  ]
})
export class ReusableModule { }

第二步：在懒加载模块中导入ReusableModule #

懒加载模块是独立的模块，不会自动继承AppModule或其他模块的导入，所以你需要在每个要使用复用组件的懒加载模块里显式导入ReusableModule。比如修改lazy-load-1.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyLoad1RoutingModule } from './lazy-load-1-routing.module';
// 导入ReusableModule
import { ReusableModule } from '../reusable.module';
// 懒加载模块自身的组件
import { LazyLoad1Component } from './lazy-load-1.component';

@NgModule({
  imports: [
    CommonModule,
    LazyLoad1RoutingModule,
    SharedModule, // 你已经导入的SharedModule
    ReusableModule // 加入这行，导入复用模块
  ],
  declarations: [LazyLoad1Component]
})
export class LazyLoad1Module { }

同样的操作复制到lazy-load-2.module.ts里，就能在第二个懒加载模块里使用复用组件了。

可选优化：通过SharedModule统一管理复用模块 #

如果你的所有模块都已经导入了SharedModule，也可以把ReusableModule整合到SharedModule中，这样不用每个懒加载模块都单独导入ReusableModule。修改shared.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReusableModule } from '../modules/reusable.module';

@NgModule({
  imports: [
    CommonModule,
    ReusableModule // 先导入ReusableModule
  ],
  exports: [
    CommonModule,
    ReusableModule // 再导出它，这样导入SharedModule的模块就能自动用它的组件
  ],
  declarations: [/* SharedModule自身的组件 */]
})
export class SharedModule { }

这样之后，懒加载模块只要保留SharedModule的导入，就可以直接使用ReusableModule里的组件了，适合复用组件被大量模块依赖的场景。

避坑提醒 #

• 不要指望在AppModule里导入ReusableModule后，懒加载模块就能自动使用——懒加载模块是独立的，不会继承AppModule的组件导入
• 确保复用组件只在ReusableModule里声明，不要在其他模块重复声明，否则会触发Angular的组件重复声明错误
• 如果复用组件依赖其他第三方模块（比如Angular Material组件），要确保ReusableModule已经导入了这些依赖，或者在SharedModule里统一导入并导出

内容的提问来源于stack exchange，提问作者Helton Alves