Claude CodeでAngular CLIのMCPサーバーを使う登録手順と規約
Angular CLIにはMCPサーバーが同梱されています。Claude Codeへの登録コマンド、既定の9ツール、読み取り専用モード、CLAUDE.mdに書くAngular規約をまとめます。
Angular CLIには、MCPサーバーが最初から同梱されています。起動コマンドは npx @angular/cli mcp で、Claude Codeには claude mcp add の1行で登録できます。セットアップ例はAntigravity・Cursor・VS Code向けで、Claude Codeの記載はありません。そのため、ここでは公式の起動コマンドをClaude Codeの登録方法に読み替える手順と、あわせて置いておきたいCLAUDE.mdの規約を扱います。
Angular CLIのMCPサーバーでできること
Angular CLIのMCPサーバーは、AIアシスタントがAngular CLIを直接操作するための窓口です。コード生成、ワークスペースの分析、ビルドやテストの実行といったツールを提供します。
Angular版のMCPサーバーは別途インストールするパッケージではなく、@angular/cli に含まれる mcp サブコマンドです。プロジェクトに入っているCLIを npx 経由で起動する形になるので、サーバー用の依存を増やす必要はありません。
Claude Codeへの登録コマンド
Claude Codeのstdioサーバーは、claude mcp add <名前> -- <起動コマンド> の形で登録します。-- より後ろは、Claude Code自身のオプションとして解釈されず、そのままサーバーの起動コマンドになります。-y のようなフラグが誤って解釈されないための区切りです。
cd my-angular-app
claude mcp add angular-cli --scope project \
-- npx -y @angular/cli mcp
claude mcp get angular-cliAngular側の設定例は、command が npx、args が ["-y", "@angular/cli", "mcp"] です。上のコマンドはこれと同じ内容を claude mcp add の書式に直したものです。angular-cli という名前は、その例にある mcpServers のキーをそのまま借りています。
スコープはprojectが向いている
Claude Codeの登録先は3つあります。
| スコープ | 読み込まれる範囲 | チーム共有 | 保存先 |
|---|---|---|---|
| local(既定) | 読み込まれる範囲登録したプロジェクトのみ | チーム共有しない | 保存先~/.claude.json |
| project | 読み込まれる範囲登録したプロジェクトのみ | チーム共有版管理で共有 | 保存先プロジェクト直下の .mcp.json |
| user | 読み込まれる範囲すべてのプロジェクト | チーム共有しない | 保存先~/.claude.json |
Angularのワークスペースごとに使うサーバーなので、--scope project が合います。.mcp.json をコミットすれば、同じリポジトリを開いたメンバーにも同じ設定が行き渡ります。
.mcp.json に書かれたサーバーは、対話セッションで承認するまで使われません。claude mcp list や claude mcp get では Pending approval と表示されます。claude を起動して承認ダイアログに答えると接続されます。CIの claude -p のように承認画面を出せない環境では、承認なしで読み込まれます。不要なサーバーは disabledMcpjsonServers に入れて止めます。
すでにCursorやVS Code向けに書いた mcp.json があれば、claude mcp add-json でも登録できます。ラッパーの mcpServers ではなく、中のオブジェクトだけを渡します。
claude mcp add-json angular-cli --scope project \
'{"command":"npx","args":["-y","@angular/cli","mcp"]}'他のエディタ側の書き方はVS CodeのMCP設定ガイドとCursorのMCP設定ガイドにあります。VS Codeの .vscode/mcp.json だけは、Angular公式の例でもキー名が servers で、mcpServers ではありません。
既定で使える9つのツール
ツール一覧には、既定のものとして次の9つが載っています。
| ツール | 役割 |
|---|---|
list_projects | 役割angular.json を読み、ワークスペース内のアプリとライブラリを列挙 |
get_best_practices | 役割Angularのベストプラクティスガイドを取得(standaloneコンポーネントや型付きフォームなど) |
search_documentation | 役割angular.devの公式ドキュメントを検索 |
run_target | 役割設定済みのターゲット(build・test・lint・e2e・deployなど)を実行 |
devserver.start | 役割ng serve を非同期で起動し、すぐ戻る |
devserver.wait_for_build | 役割実行中の開発サーバーの直近のビルドログを返す |
devserver.stop | 役割開発サーバーを止める |
onpush_zoneless_migration | 役割OnPush変更検知への移行計画を返す(zoneless化の前提) |
ai_tutor | 役割対話型のAngularチューターを起動 |
Claude Codeからは、これらのツールが登録名を接頭辞にした形(mcp__angular-cli__...)で見えます。接頭辞の形は、権限ルールやフックのマッチャーを書くときに使います。
ツールの中で、Claude Codeの普段の作業と噛み合うのは run_target と開発サーバー系の3つです。devserver.start が呼び出し元をブロックしない設計なので、Claude Codeが開発サーバーを起動したまま、コードを編集して devserver.wait_for_build でコンパイルエラーを確かめる流れが組めます。
変更を許さない読み取り専用の起動
起動コマンドの args には、2つのオプションを足せます。
--read-only: プロジェクトを変更しないツールだけを登録する--local-only: インターネット接続を必要としないツールだけを登録する
まず雰囲気をつかみたいときや、レビュー用のワークスペースでは --read-only が使えます。
claude mcp add angular-cli-ro --scope project \
-- npx -y @angular/cli mcp --read-onlyどのツールが除外されるかの一覧は、angular.devのMCPページに記載がありません。--read-only で何が残るかは、登録後に /mcp でサーバーのツール一覧を開いて確かめます。社内ネットワークなどで外部通信を避けたい場合は、--local-only を同様に足します。search_documentation のようにangular.devへ問い合わせるツールが影響を受けるかどうかも、同じ要領で確認できます。
CLAUDE.mdに書くAngular固有の規約
MCPサーバーは操作のための道具で、書き方の好みは教えてくれません。そこでClaude Code側の CLAUDE.md に、プロジェクトの規約を置きます。
Angularは世代で既定値が変わっています。angular.devがLLM向けの指示ファイルとして配布しているベストプラクティスには、次のような記述があります。
- standaloneコンポーネントをNgModuleより優先し、
standalone: trueはデコレーターに書かない(Angular v20以降は既定) changeDetection: ChangeDetectionStrategy.OnPushは明示しない(Angular v22以降は既定)- 状態管理はsignalsで行い、導出状態は
computed()、同期が要る導出状態はlinkedSignal()を使う input()・output()・model()関数を使い、デコレーターは避ける- テンプレートは
@if・@for・@switchを使い、*ngIfなどは使わない @HostBinding・@HostListenerではなく、デコレーターのhostオブジェクトに書く- 依存は
inject()関数で受け取る - 新しいフォームはSignal Forms(
@angular/forms/signals)を優先する(Angular v22以降で安定版)
ここで注意したいのは、バージョン依存の項目です。v19のプロジェクトで「standalone: true を書かない」と指示すると、コードが動かなくなる可能性があります。CLAUDE.mdには、使っているAngularのバージョンを先頭に書き、その版に合う項目だけを残します。以下はそのベストプラクティスを下敷きにした、v22系プロジェクトの書き方の例です。
## Angular(v22系)
- コンポーネントはstandalone。`standalone: true` は書かない
- 状態は signals。`mutate` は使わず `update` / `set` を使う
- テンプレートは `@if` / `@for`。`CommonModule` は import しない
- 依存は `inject()`。`@HostBinding` は使わず `host` に書く
## 作業の進め方
- 実装前に MCP の `get_best_practices` を呼び、規約を読み込む
- 変更後は `run_target` の test を実行し、出力を読んでから完了とする
- 開発サーバーは `devserver.start` で起動し、終わったら `devserver.stop` で止めるCLAUDE.mdに規約を全部写す必要はありません。get_best_practices はワークスペースのパスを受け取り、Angularのバージョンに合わせた規約を返す設計です。常時読み込ませたい数行だけをCLAUDE.mdに置き、詳細はツールに取りに行かせると、コンテキストの消費を抑えられます。
CLAUDE.mdの運用は、テストランナーの話題としてClaude CodeでVitestを回す方法にも通じます。Angularのテストターゲットを run_target 経由で実行させるのか、Bashで直接回させるのかも、CLAUDE.mdで揃えておく項目です。
他のエディタ向けルールファイルとの対応
angular.devは、LLM向けのルールファイルを置く場所を環境ごとに案内しています。
| 環境 | ルールファイル |
|---|---|
| Antigravity | ルールファイルGEMINI.md |
| Copilot系IDE | ルールファイル.github/copilot-instructions.md |
| Cursor | ルールファイルcursor.md(案内の手順名は cursorrules.md) |
| JetBrains IDE | ルールファイルAGENTS.md |
| VS Code | ルールファイル.instructions.md |
| Windsurf | ルールファイルguidelines.md |
この一覧にClaude Codeはありません。Claude Codeが読むのは CLAUDE.md なので、他のエディタ用に整えた内容をそのまま移します。チームにCursorやVS Codeの利用者もいる場合は、規約の本文を1か所に置き、各ファイルから参照する構成にすると二重管理を避けられます。
MCPページには、AI Agent Skillsに対応した環境ではSkillsとMCPサーバーを組み合わせられる、という説明もあります。Skillsが指示と規約を、MCPサーバーが実行用のツールを受け持つ分担です。例に挙がっているのはAntigravityですが、Claude CodeにもSkillsがあるため、規約をSkillsに移してMCPサーバーと併用する構成も取れます。
開発フローでの使い方
angular.devのワークフロー例は、そのままClaude Codeの指示に置き換えられます。たとえばTDDの流れは、次の順序です。
TDDループの流れ
- 1
調べる
search_documentationでAPIや構文(たとえば@deferブロックのオプション)を引きます。 - 2
規約を読み込む
get_best_practicesにワークスペースのパスを渡し、バージョンに合ったルールを取得します。 - 3
開発サーバーを起動する
devserver.startで起動し、編集のたびにdevserver.wait_for_buildでビルドログを見ます。 - 4
テストを書いて回す
list_projectsでJasmine・Jest・Vitestといったテスト基盤を確かめ、テストを書いてrun_targetのtestで実行します。 - 5
止める
作業が終わったら
devserver.stopで開発サーバーを止めます。
Claude Codeに渡す指示は、たとえば次のような形になります。ツール名を並べるより、完了条件を書くほうが、手順の抜けが減ります。
この画面にフィルタ機能を追加してください。
着手前に get_best_practices を読み、開発サーバーを起動します。
変更ごとにビルドが通ることを確かめ、run_target の test が緑になったら終了。
終わったら開発サーバーを止めてください。もう1つの使い方がzonelessへの移行です。onpush_zoneless_migration に対象のディレクトリかコンポーネントの絶対パスを渡すと、実行可能な変更が1つだけ返ります。変更を適用し、run_target でテストを回し、もう一度ツールを呼ぶ、という繰り返しで、完了を示すまで進めます。一度に大量に書き換えるのではなく、1ステップずつ検証しながら進める設計なので、Claude Codeのテスト→修正のループとも相性がよい題材です。事前にSignal InputsやSignal Queriesへの移行が必要な場合は、ng generate のschematicで先に済ませる流れになっています。
学習用途のai_tutor
ai_tutor は、新しくチームに入った人向けのツールです。公式のオンボーディング例では、list_projects でコードベースの構造を把握し、ai_tutor でカリキュラム・ペルソナ・指導方針を読み込み、サンドボックスのコードを実装しながら run_target の test や build で確かめます。業務コードを触らせずに、Angularの概念を手を動かして覚える用途です。
つまずきやすい点
- 接続できないとき: Node.jsの要件を満たしているか確かめます。npmレジストリ上の
@angular/cli22.2.2は、Node.js^22.22.3 || ^24.15.0 || >=26.0.0を要求しています - 初回の起動が遅いとき:
npx -yは初回にパッケージを取得します。起動が間に合わないときは、環境変数MCP_TIMEOUT(ミリ秒)でMCPサーバーの起動待ち時間を延ばせます - 接続が切れたとき: 再接続の手順は/mcp reconnect allの解説にあります
- ツール名が長いとき: 権限ルールに登録するときは、登録名の接頭辞を含めた完全な名前で書きます。読み取り系だけを許可し、
run_targetは毎回確認する、といった線引きができます
まとめ
登録そのものは1行で終わります。差がつくのは、プロジェクトのAngularバージョンに合わせた規約を、短くCLAUDE.mdに書けるかどうかです。まず --read-only で動作を確かめ、慣れたら run_target と開発サーバー系のツールを開放する順番だと、権限の線引きが無理なく進みます。