Angular 21 & MCP: The End of 'Manual' Migrations?

Source: Dev.to

The Shift from Manual to Agentic Migrations

Historically, developers copied error messages or file contents into AI tools like ChatGPT, hoping the model could infer the project’s architecture. This approach was helpful but limited—AI had no direct access to the codebase.

With Angular 21, the Angular CLI itself becomes an MCP server (ng mcp). This protocol lets AI agents (e.g., Cursor, Windsurf, VS Code Copilot) interview the project, understand constraints, and run migrations that actually compile.

Before vs. After MCP

Setting Up the MCP Server

The Angular team baked MCP support directly into the CLI. In any Angular 21 workspace, run:

ng mcp

This command generates the configuration snippets required for your IDE; it does not start a daemon.

Example: Configuring Cursor

If you use Cursor, create or edit .cursor/mcp.json at the project root:

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

Note
The -y flag prevents the “Press y to install” prompt from hanging the background process.

Why MCP Matters: Context‑Aware Migrations

Standard schematics follow a fixed “If A, then B” pattern. In complex enterprise codebases, they often break or produce code that requires manual rewrites. MCP exposes tools that let AI:

• Retrieve the latest Angular team recommendations (get_best_practices).
• Analyze dependency graphs for safe migrations (onpush_zoneless_migration).
• Query offline documentation (search_documentation).

Example Workflow: Zoneless Migration

1. User request: “Migrate user-profile.ts to Zoneless. Check if it’s safe.”
2. AI actions:
   • Calls list_projects to locate the component.
   • Reads the file and detects an Observable subscription in ngOnInit.
   • Queries get_best_practices for async handling in Zoneless.
3. AI recommendation:
   “I detected an unmanaged subscription. In Zoneless, this won’t trigger a render. Convert user$observable to a Signal using toSignal() before switching the change‑detection strategy.”

The AI doesn’t just apply a blind fix; it negotiates the refactor based on the framework’s internal logic.

Leveraging Documentation via MCP

AI agents no longer need to guess API signatures. They can query the local offline documentation index provided by the MCP server.

Prompt example (Cursor with MCP active):

“Refactor dashboard.component.ts to align with Angular 21 best practices. Use the get_best_practices tool to verify the plan first.”

Resulting actions:

1. get_best_practices reveals that standalone: true, inject(), and Signals are the recommended patterns.
2. The AI calls the experimental modernize tool (v21) to run standard schematics.
3. Manual clean‑up:
   • Convert constructor(private http: HttpClient) to private http = inject(HttpClient).
   • Transform BehaviorSubject state into a Signal.

The final code looks as if it were written for Angular 21 from the start, not merely patched to run.

Future Outlook: Continuous Agentic Upgrades

This release signals a shift in how Google views the CLI—from a pure build tool to an interface for agents. Soon we may see background agents that:

• Open PRs automatically (e.g., “Refactored a ControlValueAccessor to the new Signal Forms input API.”)
• Update configuration files and verify tests after a new Angular version drops.

Recommendations for Teams Moving to Angular 21

1. Install the MCP server (ng mcp).
2. Configure your AI editor (e.g., Cursor) to use the generated MCP settings.
3. Let the AI map your project and propose a migration plan.
4. Review and merge the AI‑generated changes—code ownership remains yours, but the grunt work shifts to the machine.