angular.courses

Diopter

See what your Angular project is made of, and what its next upgrade involves.

Point Diopter at an Angular workspace: deprecated and removed APIs in your code, an upgrade plan with the libraries that block it, a modernity score, template performance, bundle growth and known vulnerabilities. A local UI, a CI check and MCP tools from one definition.

Browse the 18 diagnostic codesSource on GitHub

One definition, four ways to run it

Local UI
diopter
Next to ng serve: API health, Modernity, Performance, Bundle, Security, a runnable upgrade plan with a real terminal and git, and an MCP endpoint.
CI check
diopter check
Coded diagnostics with file:line locations, Markdown or JSON output, and an exit code driven by the gates you choose.
Static report
diopter build
A self-contained HTML report to upload as a CI artifact or publish on GitHub Pages.
Agent tools
diopter mcp
A stdio MCP server for Claude Code, Cursor or Copilot: get-report, get-upgrade-plan, get-vulnerabilities, fix-node-files and more.

Run it

In any Angular workspace (it walks up to angular.json). Not on npm yet: build it from the monorepo and run the binary.

sh
git clone https://github.com/geromegrignon/angular.courses
pnpm install && pnpm --filter @angular-courses/diopter build
cd ~/my-angular-app
node ~/angular.courses/packages/diopter/bin.mjs          # UI
node ~/angular.courses/packages/diopter/bin.mjs check    # CI

Gate it in CI

Each gate is a flag; the defaults fail only on removed APIs and environment issues.

sh
diopter check \
  --fail-on deprecated --fail-on-blockers \
  --min-modernity 60 --fail-on-template-calls \
  --max-initial-growth 5% --audit-level high \
  --format markdown --output diopter.md

For coding agents

Add it to .mcp.json (Claude Code) or .cursor/mcp.json. The agent gets the same report, upgrade plan, bundle and vulnerability data as the UI, plus the actions (rescan, fix Node pins).

json
{
  "mcpServers": {
    "diopter": { "command": "node", "args": ["<repo>/packages/diopter/bin.mjs", "mcp"] }
  }
}

What it checks

Every finding has a stable code and a page explaining what it means, how to fix it and which flag gates it. The API dataset is the one behind Angular Can I Use; libraries are checked the way the Library Health Check does; the modernity score follows the Modern Angular Path.

API health

DIOP00xx

Environment

DIOP01xx

Libraries

DIOP02xx

Performance

DIOP03xx

Bundle

DIOP04xx

Security

DIOP05xx

Diopter runs on your machine and in your CI. Nothing about your code leaves it: the only network calls are to the npm registry (library releases, the audit), and --offline turns those off.

Built with Devframe.