生态集成

Angular 官方维护路由、HTTP、表单、动画等；UI 与状态扩展由社区与官方 Material 团队提供。见 状态管理、工程化。

核心概念

与 Vue/React「核心库很小、生态自由拼装」不同，Angular 走的是**「全家桶」**路线：路由、HTTP、表单、依赖注入、动画、国际化都在 @angular/* 官方包里，版本随核心库统一发布（ng update 一次性升级）。这带来了更强的一致性与官方支持，但也意味着替换其中某一层（如换路由库）成本更高。

官方与半官方

常用第三方

选型时关注 Angular 版本兼容性（peerDependencies）与包体积；升级 Angular major 版本前，先确认第三方库是否已适配。

示例：引入 Angular Material 与按需模块

ng add @angular/material

import { Component } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatCardModule } from "@angular/material/card";

@Component({
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  template: `
    <mat-card>
      <button mat-raised-button color="primary">确认</button>
    </mat-card>
  `,
})
export class ConfirmCardComponent {}

ng add 会自动完成主题、字体、动画模块等配置，比手动接入更省心；但仅 import 用到的子模块（MatButtonModule 而非整包），避免打包体积膨胀。

与 Vue / React 生态对照

Angular 的「官方全家桶」特点使新项目接入成本更低（少做选型决策），但也意味着脱离官方路线（如换掉 RxJS）改造成本更高。

最佳实践

• 新项目优先使用 ng add 而非手动安装第三方库，官方 schematics 会自动处理配置文件改动。
• UI 库选型前确认是否支持 Standalone Components（新项目默认无 NgModule）。
• 国际化优先评估官方 @angular/localize；仅当需要运行时切换语言（无需重新构建）才考虑 ngx-translate / Transloco。
• 大型多包项目考虑 Nx，统一 lint、测试、依赖图分析与增量构建。
• 升级 Angular 版本时用 ng update 而非手动改 package.json，它会执行迁移 schematics。

常见坑

生态选型速查

延伸阅读

• 状态管理：Service + Signal 与 NgRx 的取舍
• 工程化：CLI、构建与部署
• 表单：Reactive Forms 深入

参考文献

以下链接在编写时均可正常访问：