Angular 21 与 MCP：手动迁移的终结？

Source: Dev.to

从手动迁移到代理式迁移的转变

历史上，开发者会把错误信息或文件内容复制到 ChatGPT 等 AI 工具中，希望模型能够推断出项目的架构。这种做法有帮助，但受限——AI 并未直接访问代码库。

在 Angular 21 中，Angular CLI 本身成为了 MCP 服务器（ng mcp）。该协议让 AI 代理（例如 Cursor、Windsurf、VS Code Copilot）访谈项目，了解约束，并运行实际能够编译的迁移。

迁移前后对比

设置 MCP 服务器

Angular 团队已将 MCP 支持直接内置到 CLI 中。在任意 Angular 21 工作区，运行：

ng mcp

此命令会生成 IDE 所需的配置片段；它 不会 启动守护进程。

示例：配置 Cursor

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

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

注意
-y 标志可防止 “Press y to install” 提示卡住后台进程。

为什么 MCP 很重要：上下文感知迁移

标准 schematics 遵循固定的 “如果 A，则 B” 模式。在复杂的企业代码库中，它们常常出错或生成需要手动重写的代码。MCP 提供工具，使 AI 能够：

• 检索最新的 Angular 团队建议（get_best_practices）。
• 分析依赖图以进行安全迁移（onpush_zoneless_migration）。
• 查询离线文档（search_documentation）。

示例工作流：无区（Zoneless）迁移

1. 用户请求：“将 user-profile.ts 迁移到 Zoneless。检查是否安全。”
2. AI 操作：
   • 调用 list_projects 定位该组件。
   • 读取文件并检测到 ngOnInit 中的 Observable 订阅。
   • 查询 get_best_practices 获取 Zoneless 中的异步处理最佳实践。
3. AI 推荐：
   “我检测到未管理的订阅。在 Zoneless 中，这不会触发渲染。请在切换变更检测策略前，将 user$observable 使用 toSignal() 转换为 Signal。”

AI 不仅仅是盲目修复；它根据框架内部逻辑协商重构。

通过 MCP 利用文档

AI 代理不再需要猜测 API 签名。它们可以查询 MCP 服务器提供的本地离线文档索引。

提示示例（Cursor 开启 MCP）：

“重构 dashboard.component.ts 以符合 Angular 21 的最佳实践。先使用 get_best_practices 工具验证方案。”

产生的操作：

1. get_best_practices 显示推荐使用 standalone: true、inject() 与 Signals。
2. AI 调用实验性的 modernize 工具（v21）运行标准 schematics。
3. 手动清理：
   • 将 constructor(private http: HttpClient) 改为 private http = inject(HttpClient)。
   • 将 BehaviorSubject 状态转换为 Signal。

最终代码看起来就像是从一开始就为 Angular 21 编写的，而不是仅仅打补丁以运行。

未来展望：持续的代理式升级

此版本标志着 Google 对 CLI 的看法转变——从纯粹的构建工具变为 代理的接口。不久我们可能会看到后台代理能够：

• 自动打开 PR（例如 “将 ControlValueAccessor 重构为新的 Signal Forms 输入 API”。）
• 在新 Angular 版本发布后更新配置文件并验证测试。

向 Angular 21 迁移的团队建议

1. 安装 MCP 服务器（ng mcp）。
2. 配置你的 AI 编辑器（如 Cursor）以使用生成的 MCP 设置。
3. 让 AI 绘制你的项目并提出迁移计划。
4. 审查并合并 AI 生成的更改——代码所有权仍归你，但繁重的工作已转移给机器。