NgModule 与库

路线图「Modules & Libraries」：Angular 17+ Standalone 为默认，但存量项目大量使用 NgModule；读懂 FeatureModule、共享模块与 Angular Libraries（ng generate library）是维护企业代码的必备技能。

学习目标

• 理解 NgModule 的 declarations、imports、providers
• 对比 Standalone 与 NgModule 组织方式
• 了解 Feature Module 懒加载与发布内部库

核心概念

NgModule 结构（存量常见）

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { TrackListComponent } from "./track-list.component";
import { TrackRoutingModule } from "./track-routing.module";

@NgModule({
  declarations: [TrackListComponent],
  imports: [CommonModule, TrackRoutingModule],
  providers: [TrackService],
})
export class TrackModule {}

路由懒加载旧写法：loadChildren: () => import('./track/track.module').then(m => m.TrackModule)。新写法优先 loadComponent + Standalone。

Standalone 迁移

@Component({
  selector: "app-track-list",
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `<!-- ... -->`,
})
export class TrackListComponent {}

Standalone 组件自行 imports，无需 NgModule 包装；新功能建议 Standalone，渐进迁移旧模块。

内部库

ng generate library shared-ui

库导出组件/服务/管道，供多个应用复用——类似 monorepo 中的内部 npm 包。Angular Material、NG-ZORRO 均以模块或 Standalone 组件形式提供。

与 React/Next 对照

Angular	React / Next.js
NgModule	无直接对应（文件夹划分）
Feature Module	路由级 code-split
ng generate library	workspace package / Turborepo
Standalone	函数组件 + 直接 import

练习

• 打开一个 Angular 15 示例仓库，找出 AppModule 与 Feature Module
• 将一个小组件改写为 Standalone 并直接