Angular22Blog

Angular CLI 22 Changes

New features, Vitest improvements, breaking changes, and deprecations in the Angular CLI v22 release.

New Features

Chunk Optimization

Enabled by default with smart heuristics , the build system now automatically optimizes chunk splitting for better loading performance without manual configuration.

Subresource Integrity

Validates integrity for dynamically loaded modules, ensuring scripts loaded at runtime haven't been tampered with.

platform option stabilized

Renamed from experimentalPlatform to platform. The experimental prefix has been dropped now that the API is stable.

AI Config

The ai-config schematic now includes Angular MCP server configuration, making it easier to integrate AI tooling with your Angular project.

AI Config & Angular MCP Server

The ng generate ai-config schematic sets up your project for AI-assisted development. It generates two things:

AGENTS.md / GEMINI.md

A markdown file with Angular best practices, project conventions, and coding standards that AI tools read as context. This helps AI assistants generate code that follows your project's patterns.

Angular MCP Server Config

Configures the Angular CLI MCP server (@angular/cli mcp) so AI agents can query your project structure, look up Angular docs, find code examples, and get version-specific best practices — all programmatically.

Supported tools: VS Code, Claude Code, Cursor, Gemini CLI, and OpenAI Codex. Each tool gets its config file in the expected location (e.g., .vscode/mcp.json for VS Code, CLAUDE.toml for Claude Code).

Running the schematic

# Run the schematic — it prompts you to pick AI tools:
$ ng generate ai-config

# Available tools:
# ┌─────────────────┬────────────────────────────────────────────┐
# │ claude-code     │ AGENTS.md + Angular MCP server config      │
# │ cursor          │ AGENTS.md + Angular MCP server config      │
# │ gemini-cli      │ GEMINI.md + Angular MCP server config      │
# │ open-ai-codex   │ AGENTS.md + Angular MCP server config      │
# │ vscode          │ AGENTS.md + Angular MCP server config      │
# └─────────────────┴────────────────────────────────────────────┘

# Example: configure for VS Code + Claude Code
$ ng generate ai-config --tool vscode --tool claude-code

Generated MCP config files

// .vscode/mcp.json — generated by ng generate ai-config --tool vscode
{
  // For more information, visit: https://angular.dev/ai/mcp
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

// CLAUDE.toml — generated by ng generate ai-config --tool claude-code
[mcp_servers.angular-cli]
command = "npx"
args = ["-y", "@angular/cli", "mcp"]

What the Angular MCP server provides

# The Angular MCP server provides tools for AI agents:
$ npx @angular/cli mcp

# What the MCP server exposes to AI agents:
# → Project structure discovery (list_projects)
# → Angular best practices (get_best_practices)
# → Official documentation search (search_documentation)
# → Code examples for modern features (find_examples)

# New projects (ng new) automatically include .vscode/mcp.json!

New projects get this automatically!ng new now generates .vscode/mcp.json by default, so the Angular MCP server is pre-configured out of the box.

Vitest Improvements

The Vitest integration continues to mature with several new options:

isolate , Run each test file in its own isolated environment
quiet , Suppress build output noise during test runs
Istanbul coverage , Full Istanbul coverage provider support alongside v8
Runtime Zone.js detection , Automatically detects and warns about Zone.js usage at runtime

angular.json , Vitest config

// angular.json ,  Vitest configuration options
{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "isolate": true,          // Run each test file in isolation
            "quiet": true,            // Suppress build output noise
            "coverage": {
              "enabled": true,
              "provider": "istanbul"   // Istanbul coverage support
            }
          }
        }
      }
    }
  }
}

CLI Breaking Changes

Change

Details

Removed Node.js v20

Minimum version is now v22.22.0 or v24.13.1

Removed@angular-devkit/architect-cli

Use @angular-devkit/architect directly

Removed Jest & Web Test Runner builders

Migrate to Vitest via @angular/build:unit-test

ChangedPORT env var

Now takes highest priority for ng serve port selection

Changedistanbul-lib-instrument

Now an optional peer dependency , install explicitly if needed

Changed SSR host validation

Invalid hosts now return 400 Bad Request instead of falling back to CSR

CLI Deprecations

The following are deprecated and will be removed in a future version:

Webpack builders→ Use @angular/build
@angular-devkit/build-webpack→ Use @angular/build
CommonEngine APIs in @angular/ssr→ Use AngularNodeAppEngine / AngularAppEngine
@ngtools/webpack→ Use @angular/build

Migration Quick Reference

Old

New

Node.js v20

Node.js v22.22.0+ / v24.13.1+

@angular-devkit/architect-cli

@angular-devkit/architect

Jest / Web Test Runner builders

Vitest (@angular/build:unit-test)

experimentalPlatform

platform (stabilized)

Webpack builders

@angular/build

CommonEngine (from @angular/ssr)

AngularNodeAppEngine / AngularAppEngine

@ngtools/webpack

@angular/build