Angular 5懒加载模块中页面组件与功能组件拆分问题咨询

针对你维护大型Angular 5单模块应用、要拆分懒加载模块同时复用功能组件的需求，我结合实战经验整理了一套清晰的拆分思路，完美平衡两者的需求：

核心拆分原则 #

绝对分离页面组件与功能组件：

• 页面组件（路由对应的主页面、子页面）：留在各自的懒加载模块中，仅负责页面布局、路由逻辑和业务流程串联。
• 功能组件（可复用的UI组件、业务组件，比如用户头像、搜索框、表格组件）：抽离到按业务域划分的共享功能模块中，供所有需要的懒加载模块导入使用。

具体实施步骤 #

1. 拆分共享功能模块（而非单一大SharedModule） #

不要搞一个包罗万象的SharedModule，而是按业务领域拆分出多个小的共享模块，比如UserSharedModule、ProductSharedModule，每个模块只包含对应业务域下的可复用功能组件、管道、指令。

示例代码（user-shared.module.ts）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入该业务域下的所有可复用功能组件
import { UserAvatarComponent } from './user-avatar/user-avatar.component';
import { UserSearchComponent } from './user-search/user-search.component';

@NgModule({
  declarations: [UserAvatarComponent, UserSearchComponent],
  imports: [CommonModule], // 导入基础Angular模块
  exports: [UserAvatarComponent, UserSearchComponent] // 必须导出，供其他模块使用
})
export class UserSharedModule { }

2. 懒加载模块仅保留页面组件 #

每个懒加载模块（比如UserModule、ProductModule）只存放路由对应的页面组件，依赖的功能组件通过导入对应共享模块来使用，避免把功能组件直接放在懒加载模块里。

示例代码（user.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UserSharedModule } from '../shared/user-shared.module';
// 仅保留路由相关的页面组件
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [
    CommonModule,
    UserSharedModule, // 导入共享模块，直接使用里面的功能组件
    RouterModule.forChild([
      { path: '', component: UserListComponent },
      { path: ':id', component: UserDetailComponent }
    ])
  ]
})
export class UserModule { }

3. 路由配置确保懒加载生效 #

在根路由模块中，使用loadChildren配置懒加载路由，确保每个模块只有在访问对应路由时才会被加载：

示例代码（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // 其他非懒加载路由
  { path: 'users', loadChildren: './user/user.module#UserModule' },
  { path: 'products', loadChildren: './product/product.module#ProductModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 服务依赖的正确处理 #

如果功能组件需要依赖服务，优先使用Angular 5支持的providedIn: 'root'来注册服务，这样服务会成为单例且按需加载；如果必须在模块中注册服务，把服务放在共享模块的providers中，避免在多个懒加载模块重复注册导致多实例问题。

示例服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 自动注册为根级单例
})
export class UserService {
  // 业务逻辑
}

关键注意事项 #

• 避免过度拆分：如果某个功能组件仅在一个懒加载模块中使用，直接留在该模块即可，无需放到共享模块，减少不必要的模块复杂度。
• 控制共享模块体积：不要把不相关的功能组件塞进同一个共享模块，按业务域拆分能有效控制每个共享模块的大小，避免初始加载体积过大。
• 测试懒加载效果：可以通过浏览器开发者工具的Network面板，查看访问不同路由时是否只加载对应懒加载模块的chunk文件，验证懒加载是否生效。

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