Angular Development Tooling

Angular CLI and AI-assisted development tools for Angular 21+.

Angular CLI MCP Server

Connect Claude Code to Angular's official MCP server for AI-assisted development.

Quick Setup

# Add MCP server to your project
claude mcp add angular-cli --scope project -- npx -y @angular/cli mcp

# Verify connection
claude mcp list

Team Configuration (.mcp.json)

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

Available MCP Tools

MCP Flags

• --read-only - Analysis only, no code modifications
• --local-only - Disable internet-dependent tools
• --experimental-tool - Enable preview features

Web Codegen Scorer

Evaluate AI-generated Angular code quality.

# Install globally
npm install -g @anthropic-ai/web-codegen-scorer

# Score a directory
web-codegen-scorer score ./src/app

# Score specific files
web-codegen-scorer score ./src/app/dashboard --verbose

Quality Metrics

CLI Commands (Angular 21+)

# New project with AI config
ng new my-app --ai-config=claude

# Generate components
ng generate component dashboard --standalone
ng generate service auth
ng generate guard auth --functional

# Build
ng build --configuration production

# Serve with SSR
ng serve --ssr

IDE AI Config

# Add AI configuration to existing project
ng generate ai-config

# Options: claude, copilot, cursor, gemini
ng new app --ai-config=claude

This creates .claude/instructions.md with Angular 21+ best practices.

See reference.md for detailed MCP usage and examples.md for workflows.