Ignite UI for Angular Schematics を使用した作業の開始

Ignite UI for Angular Schematics コレクションは、Ignite UI for Angular 用に事前設定された Angular プロジェクトとコンポーネント ビューをスキャフォールドするための Angular CLI schematics セットです。ネイティブの Angular CLI ワークフローに統合されており、プロジェクト作成には ng new、コンポーネント スキャフォールドには ng g を使用します。別のグローバル ツールをインストールする必要はありません。このコレクションは @igniteui/angular-schematics パッケージとして配布され、既存の Angular プロジェクトで ng add igniteui-angular を実行すると自動的に追加されます。

Schematics コレクションは MCP サーバーを実行しません。MCP サーバー プロセスは Ignite UI CLI によって提供され、npx -y igniteui-cli mcp で起動します。ai-config schematic は、別の CLI インストールなしで MCP クライアント接続を設定し Agent Skills をコピーします。このコレクションは Angular 専用です。React、Web Components、Blazor の同等機能については、各フレームワークのドキュメントを参照してください。

Schematics コレクションのインストール

npm を使用してグローバルにインストールします:

npm i -g @igniteui/angular-schematics

または、yarn を使用する場合:

yarn global add @igniteui/angular-schematics

グローバル インストール後、コレクションは ng new の --collection 引数として利用可能になります。新しいプロジェクトをスキャフォールドせずに既存の Angular プロジェクトに Ignite UI for Angular を追加する場合は、次のコマンドを使用します:

ng add igniteui-angular

これにより、igniteui-angular パッケージがインストールされ、@igniteui/angular-schematics コレクションが登録され、依存関係、スタイル、テーマのインポートが自動的に設定されます。

新しいプロジェクトの作成

Schematics コレクションにはプロジェクト作成のために 2 つのモードがあります: ガイド付きインタラクティブ ウィザードと引数を指定した直接 ng new コマンドです。

ガイドを使用する

ガイド付きウィザードは新しいプロジェクトの出発点として推奨されています。次のコマンドでアクティブにします:

ng new --collection="@igniteui/angular-schematics"

ウィザード オプションのステップ バイ ステップ ガイドについては、Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイドを参照してください。

直接プロジェクトを作成する

Angular プロジェクトを非インタラクティブに作成するには、コレクションとテンプレートの引数を ng new に指定します:

ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav

デフォルトではスタンドアロン コンポーネントを使用します。NgModule ベースのブートストラップを使用するには、--type=igx-ts-legacy を追加します:

ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy

新しいアプリケーションがプロジェクト名のディレクトリに作成されます。利用できるベース プロジェクト テンプレートは以下のとおりです。

インタラクティブ ウィザードで side-nav または side-nav-mini を選択すると、認証を追加するかどうかを確認するプロンプトが表示されます。次のテンプレート ID が生成され、非インタラクティブな作成用に ng new に直接渡すこともできます。これらの ID はウィザードのテンプレート リストには表示されません。

プロジェクトを作成する際に以下の引数を指定できます。

コンポーネント テンプレートの追加

利用可能な Ignite UI Angular テンプレートを追加するには、Ignite UI for Angular コレクションと component schematic を使用して ng generate を実行し、テンプレート ID と新しいコンポーネントの名前を指定します:

ng g @igniteui/angular-schematics:component grid newGrid

テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または ng add で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイドを参照してください。

テンプレートを追加する際に以下の引数を指定できます。

アプリケーションの実行

start schematic を実行すると、アプリケーションがビルドされ、Web サーバーが起動してデフォルトのブラウザーで開きます。

ng g @igniteui/angular-schematics:start

AI アシスタント統合

Ignite UI for Angular Schematics コレクションには、プロジェクトの AI コーディング アシスタント統合を設定する ai-config schematic が含まれています。1 つのコマンドで次のことを行います:

• MCP サーバーの設定 - 選択したコーディング アシスタント用の MCP 設定ファイルに Ignite UI および Angular CLI MCP サーバー エントリを書き込みます
• スキル ファイルのコピー - Angular 固有のスキル ガイドをエージェント ディレクトリに追加します
• 手順ファイルの設定 - 各エージェントの手順ファイルにプロジェクト固有のガイダンスを書き込みます

Ignite UI for Angular パッケージをインストールした後、プロジェクト ルートから実行します:

ng generate @igniteui/angular-schematics:ai-config

フラグ リファレンス

サポートされているコーディング アシスタント

サポートされている AI エージェント

使用例

インタラクティブ - コーディング アシスタントとエージェントのプロンプトが表示されます:

ng generate @igniteui/angular-schematics:ai-config

非インタラクティブ - アシスタントとエージェントを直接指定:

ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot

MCP 設定のみスキップ:

ng generate @igniteui/angular-schematics:ai-config --assistants none --agents claude generic

スキル ファイルと手順のみスキップ (MCP サーバーは設定されます):

ng generate @igniteui/angular-schematics:ai-config --assistants vscode --agents none

この schematic は ng add igniteui-angular の一部としてもデフォルト (エージェント ["claude", "generic"]、アシスタント ["generic"]) で自動実行されます。

MCP サーバー設定

この schematic は選択したコーディング アシスタントの設定ファイルに書き込み (またはマージし) ます。既存のサードパーティ MCP サーバー エントリは常に保持されます。Angular schematic 経由で実行した場合、Ignite UI サーバーと並んで angular-cli MCP サーバー エントリが自動的に追加されます。

Generic、Cursor、Gemini、Junie (.mcp.json およびその同等物、ルート キー mcpServers):

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

VS Code / GitHub Copilot (.vscode/mcp.json、ルート キー servers):

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

スキル ファイル

スキル ファイルは各エージェントのスキル ディレクトリにコピーされる Angular 固有のガイドです。インストール済みの Ignite UI パッケージから取得され、schematic を実行するたびに同期されます。既存のファイルはコンテンツが変更された場合のみ更新されます。

代わりに Ignite UI CLI を使用する

Ignite UI CLI がグローバルにインストールされている場合、同等のコマンドは次のとおりです。

ig ai-config

すべての AI クライアントおよび Agent Skills の設定手順の詳細については、Ignite UI CLI MCP を参照してください。