software

使用 MCP 的 Angular 21 指南

发布: (2025年12月13日 GMT+8 15:47)
6 min read
原文: Dev.to

Source: Dev.to

介绍

Angular 21 引入了模型上下文协议（Model Context Protocol，MCP）服务器。了解如何将你的 AI 编辑器直接连接到 Angular CLI，以自动化更新、重构和像 Zoneless 这样的架构变更。

以前我们把 AI 当作一个陌生的聪明人：把错误信息或文件内容复制粘贴到 ChatGPT，期待它能理解我们项目的架构。这很有用，但它是盲目的。

有了 Angular 21，这个陌生人已经搬进了你的家。

Angular CLI 的 MCP 服务器（ng mcp）的发布标志着我们维护应用方式的根本转变。它不仅是一个新命令；它是一个协议，允许 AI 代理（如 Cursor、Windsurf 或 VS Code Copilot）“采访”你的项目，了解你的特定约束并执行真正能够编译的迁移。

什么是 MCP？（AI 的 “USB 端口”）

模型上下文协议（Model Context Protocol，MCP） 是一个开放标准，允许 AI 模型连接本地工具和数据。

MCP 之前： 你会把 angular.json 粘贴到聊天中，让 AI 了解你的文件结构。
MCP 之后： AI 只需向 Angular CLI 询问：“嘿，列出这个工作区中的所有项目”，CLI 会返回精确的结构、编译目标和库依赖。

在 Angular 21 中，CLI 本身就是一个 MCP 服务器。它公开“工具”，你的 AI 编辑器可以直接调用。

配置：5 分钟搞定一个 “AI 代理” Angular

1. 初始化服务器

在 Angular 21 工作区的终端中：

ng mcp

此命令会生成你特定 IDE 所需的配置片段。

2. 连接你的编辑器（例如 Cursor）

如果使用 Cursor，在项目根目录创建或编辑 .cursor/mcp.json：

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

注意： -y 标志至关重要，可防止 “Press y to install” 提示阻塞后台进程。

“杀手级应用”：上下文感知的迁移

上下文感知的迁移 远超传统的脚本化迁移。传统的 ng update 脚本刚性且在不常见的企业架构中容易出错。MCP 服务器公开的工具改变了这一局面。

工具 1：get_best_practices

AI 可以获取 Angular 团队的最新建议，避免使用过时的假设。

工具 2：onpush_zoneless_migration

该工具在将 ChangeDetectionStrategy.Default 改为 OnPush 之前，会分析你的依赖图。

示例工作流：

  1. 你： “我想把 user-profile.ts 迁移到 Zoneless。检查一下是否安全。”
  2. AI（内部思考）： 调用 list_projects 找到根目录，然后读取文件。
  3. AI（内部思考）： 检测到 ngOnInit 中有对 Observable 的订阅。查询 get_best_practices 以了解在 Zoneless 中如何处理异步。
  4. AI（行动）： “检测到未管理的订阅。在 Zoneless 中这不会触发渲染。建议在更改策略之前，将该 observable user$ 转换为 Signal，使用 toSignal()。”

AI 不仅仅是套用解决方案；它会基于框架内部逻辑与你协商重构细节。

工具 3：search_documentation

AI 查询 MCP 服务器提供的离线本地文档索引，避免对 API 签名的猜测。

真实场景：清理 “Legacy”

假设你有一个基于 Angular 17 的组件，使用 HttpClientModule 和 RxJS 进行简单状态管理。

向 Cursor 发出的提示（已启用 MCP）：

“将 dashboard.component.ts 重构为符合 Angular 21 的最佳实践。先使用 get_best_practices 检查你的计划。”

会发生什么：

  • AI 调用 get_best_practices，得知 standalone: true、inject() 和 Signals 是标准。
  • 调用 modernize（v21 中的实验性工具）执行标准化迁移。
  • 将 constructor(private http: HttpClient) 转换为 private http = inject(HttpClient)。
  • 将 BehaviorSubject 状态转换为 signal。

最终得到的代码看起来像是用 v21 编写的，而不仅仅是为在 v21 上运行而打的补丁。

未来：持续维护

此发布标志着 Google 对 CLI 的定位转变：它不再只是构建工具，而是面向代理的接口。近期内，我们可能不再需要“暂停开发”来进行升级。后台会有一个通过 MCP 运行的代理，自动打开 PR，例如：

  • “我注意到这里使用了 ControlValueAccessor。已创建一个 PR，将其重构为新的 Signal Forms 输入 API。”
  • “Angular v22 刚发布。我已更新你的 angular.json 并通过 vitest 验证了测试。”

小结：不要只会更新

如果你正迁移到 Angular 21，别只执行 ng update 并手动解决编译错误。

  1. 安装 MCP 服务器。
  2. 让 AI 绘制你的项目地图。
  3. 请它为你规划迁移。

代码仍然是你的责任，但繁重的工作现在交给机器完成。

Back to Blog

相关文章

阅读更多 »