Angular中Shared、Core与Feature模块配置及路由设置疑问

咱们一步步拆解你困惑的模块配置问题，结合你的理解补充关键细节，确保符合懒加载的最佳实践：

1. App Module（根模块） #

你的理解基本正确，AppModule是整个应用的入口，只负责全局核心依赖的导入：

• imports：放入全局必用的模块，比如BrowserModule（浏览器环境必备，已包含CommonModule）、FormsModule、HttpClientModule、AppRoutingModule，以及CoreModule.forRoot()（注意用forRoot模式，后面会讲）。
• declarations：只放根组件AppComponent，其他组件都归到对应模块里。
• providers：尽量不要在这里放服务，除非是特殊的全局单例（建议把全局服务放到CoreModule）。
• bootstrap：仅指定AppComponent作为启动组件。
• exports：完全不需要，因为没有模块会导入根模块。

示例配置：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Core Module（核心模块） #

CoreModule是全局单例模块，只能在AppModule中导入一次，负责存放全应用通用的核心资源：

• declarations：放入全局布局组件（如HeaderComponent、FooterComponent）、全局指令等。
• exports：导出declarations中的组件，这样AppComponent就能直接使用这些全局组件（比如在模板里写<app-header></app-header>）。
• providers：放入全局单例服务，比如AuthService、AuthGuard、HTTP拦截器等（通过forRoot模式确保单例）。
• imports：只导入必要的基础模块，比如CommonModule（如果组件需要用*ngIf等指令）。

关键：要添加防重复导入的逻辑，用forRoot()模式封装服务：

@NgModule({
  declarations: [HeaderComponent, FooterComponent],
  imports: [CommonModule],
  exports: [HeaderComponent, FooterComponent]
})
export class CoreModule {
  // 防止重复导入
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule 只能在 AppModule 中导入一次！');
    }
  }

  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [AuthService, AuthGuard]
    };
  }
}

3. Shared Module（共享模块） #

SharedModule是可被多个Feature模块重复导入的工具模块，负责存放跨模块复用的资源：

• declarations：放入通用组件（如AlertDialogBoxComponent）、自定义管道、指令等。
• exports：必须导出declarations中的所有资源，同时导出常用基础模块（如CommonModule、FormsModule），这样Feature模块导入SharedModule后，不用再重复导入这些基础模块。
• providers：绝对不要在这里放服务！如果多个Feature模块导入SharedModule，服务会被多次实例化变成多例。通用服务要么用providedIn: 'root'，要么放到CoreModule里。
• imports：导入自身需要的基础模块，比如CommonModule（用于组件模板的指令）。

示例配置：

@NgModule({
  declarations: [AlertDialogBoxComponent, CustomDatePipe, HighlightDirective],
  imports: [CommonModule],
  exports: [
    AlertDialogBoxComponent,
    CustomDatePipe,
    HighlightDirective,
    CommonModule, // 导出后Feature模块不用再单独导
    FormsModule
  ]
})
export class SharedModule { }

4. Feature Module（以UserModule为例，懒加载） #

Feature模块是业务独立的模块，支持懒加载，配置要点：

• declarations：放入该模块专属的组件（如UserListComponent、UserDetailComponent）。
• imports：导入SharedModule（使用通用组件/管道）、UserRoutingModule（模块路由），如果SharedModule没导出基础模块，再导入CommonModule。
• exports：不需要导出任何内容，因为懒加载模块的组件是通过路由导航加载的，不会被其他模块直接引用。
• providers：放入该模块专属的服务（仅在User模块内使用），如果需要单例，同样用providedIn: 'root'或者考虑是否放到CoreModule。

关于路由的问题 #

你的理解是对的，补充细节：

• 所有可导航的Feature模块都需要xxx-routing.module.ts：懒加载模块必须通过路由配置来实现按需加载，单独的Routing模块能让路由逻辑更清晰，符合Angular最佳实践。比如UserModule对应UserRoutingModule，配置子路由并导出RouterModule。
• SharedModule和CoreModule不需要Routing模块：这两个模块本身没有可导航的页面，SharedModule是提供复用资源，CoreModule是全局布局，都不需要路由配置。

懒加载路由示例（AppRoutingModule中）：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // 懒加载User模块
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  // 其他懒加载模块
];

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

UserRoutingModule配置：

const routes: Routes = [
  { path: '', component: UserListComponent }, // 模块默认路由
  { path: ':id', component: UserDetailComponent } // 详情页路由
];

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

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