应为每个组件单独建模块还是为所有共享组件建统一模块？

两种方案的对比和实操建议 #

1. 单个共享模块（最常用的方案） #

• 适合情况：共享组件数量不多、功能关联性强，或者项目规模不大的时候。
• 好处：
  • 配置简单，只需要在一个SharedModule里把所有共享组件声明、导出，业务模块只要导入这个模块，就能用所有组件。
  • 少建一堆模块文件，项目结构清爽，维护起来省心。
• 实操示例：
  在shared.module.ts中编写：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ComponentA } from './component-a/component-a.component';
  import { ComponentB } from './component-b/component-b.component';
  
  @NgModule({
    declarations: [ComponentA, ComponentB],
    imports: [CommonModule],
    exports: [ComponentA, ComponentB]
  })
  export class SharedModule { }
  

  业务模块直接导入SharedModule，即可使用ComponentA和ComponentB。

2. 每个组件单独建模块（按需拆分的方案） #

• 适合情况：共享组件数量多、各自功能独立，或者部分组件只有少数业务模块用到的大型项目。
• 好处：
  • 能做到按需加载，避免业务模块导入用不上的组件，减小打包后的体积。
  • 每个组件的职责更清晰，模块只管好自己对应的组件，单独维护或者复用都方便。
• 关于父子导入的问题：完全不需要嵌套导入。正确做法是：
  • 每个组件的独立模块（比如ComponentAModule）自己声明、导出对应的组件，同时导入自身需要的依赖（比如CommonModule）。
  • 业务模块需要哪个组件，就直接导入对应的组件模块即可，不用通过总共享模块中转。
• 实操示例：
  先编写component-a.module.ts：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ComponentA } from './component-a.component';
  
  @NgModule({
    declarations: [ComponentA],
    imports: [CommonModule],
    exports: [ComponentA]
  })
  export class ComponentAModule { }
  

  业务模块使用时直接导入该模块：

  import { ComponentAModule } from '../shared/component-a/component-a.module';
  
  @NgModule({
    imports: [CommonModule, ComponentAModule]
  })
  export class HomePageModule { }
  

总结建议 #

• 中小项目优先选单个共享模块，快速高效，维护简单。
• 大型项目或组件独立性强时，选单个组件单独模块，按需导入能优化打包大小，也提升可维护性。

内容的提问来源于stack exchange，提问作者Carlos Rodriguez