Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド

利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に Ignite UI Angular Schematics で以前作成したプロジェクトを更新できます。

Schematics コレクションを使用してガイドをアクティブにするには、以下のコマンドを実行します。

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

これにより、ステップバイステップ モードがアクティブになり、新しいプロジェクトの作成に役立つ一連の質問が表示されます。

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

ウィザードはプロジェクトをスキャフォールドする前に、以下の設定手順を案内します。テンプレートとして Side Navigation または Side Navigation Mini を選択した場合、認証に関する追加手順が表示されます。

ステップ 1: ブートストラップ タイプの選択

最初のプロンプトでは、スタンドアロン コンポーネントまたは NgModule のどちらを使用してアプリケーションをブートストラップするかを選択します。

スタンドアロン コンポーネントは Angular 17+ のデフォルトであり、新しいプロジェクトに推奨されます。既存の NgModule ベースのコードベースと統合する場合のみ NgModule を選択してください。

ステップ 2: プロジェクト名の入力

新しいアプリケーションの名前を入力します。プロジェクトは同じ名前のディレクトリに作成されます。

ステップ 3: プロジェクト テンプレートの選択

矢印キーを使用して利用可能なプロジェクト テンプレートを移動し、ENTER を押して確認します。3 つのベース テンプレートが利用可能です。

• empty - ルーティングとホームページを備えたプロジェクト構造。ナビゲーションは事前構築されていません。
• side-nav - 事前構築されたサイド ナビゲーション ドロワーを備えたプロジェクト構造。
• side-nav-mini - 事前構築されたコンパクトなサイド ナビゲーション ドロワーを備えたプロジェクト構造。

side-nav または side-nav-mini を選択した場合、ウィザードはプロジェクトに認証モジュールを追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (side-nav-auth または side-nav-mini-auth) が生成されます。empty を選択した場合、認証のプロンプトはスキップされます。

ステップ 4: テーマの選択

2 つのテーマ オプションが利用可能です。

• default - angular.json に Ignite UI for Angular Material ベースのデフォルト テーマのプリコンパイル済み CSS ファイル (igniteui-angular.css) を含めます。
• custom - app/styles.scss にカスタマイズ可能な Theming API を使用したカラーパレットとテーマ設定を生成します。

上記の手順を完了すると、アプリケーション構造が生成されます。次に、ウィザードは AI コーディング アシスタントの設定を求めるプロンプトを表示します。AI の設定が完了すると、git リポジトリが初期化され、初期状態がコミットされます。次に、プロセスを完了するか、コンポーネント ビューを追加するかのプロンプトが表示されます。

ビューの追加

Ignite UI for Angular Schematics コレクションは、プロジェクトに追加できる複数のコンポーネント テンプレート、およびより詳細なシナリオ テンプレートをサポートしています。このモードは、プロジェクトの作成が完了した後、または以下のコマンドを使用して既存のプロジェクト内でアクティブにできます。

Schematics コレクションを使用してステップバイステップ モードをアクティブにするには、component(alias:c) schematic を実行します。

ng g @igniteui/angular-schematics:component

新しいコントロールを追加することを選択した場合、カテゴリにグループ化された使用可能なテンプレートのリストが提供されます。

矢印キーを使用してオプションをナビゲートし、ENTER を使用して選択したオプションを選択します。

たとえば、カスタムグリッドなどの一部のテンプレートでは、有効にできるオプションのリストが提供されます。オプションは、スペース キーで切り替えることができます。

アプリケーションにシナリオを追加することを選択した場合、使用可能なシナリオ テンプレートのリストも取得できます。

アプリケーションにテンプレートを追加した後、さらにビューを追加するかプロセスを完了するかを選択します。プロセスの完了を選択すると、残りのパッケージ依存関係がインストールされ、アプリケーションがデフォルトのブラウザーで開かれます。

ウィザードを使用せずに後から Ignite UI for Angular ビューをプロジェクトに追加するには、直接 schematic コマンドを使用します。

ng g @igniteui/angular-schematics:c [template] [name]

AI アシスタント統合

ブートストラップ タイプ、プロジェクト名、テンプレート、テーマを選択した後、ウィザードは AI コーディング アシスタント統合の設定を求めるプロンプトを表示します。このステップは ng generate @igniteui/angular-schematics:ai-config と同じロジックを実行しますが、プロジェクト作成フローに組み込まれています。

コーディング アシスタントの選択

MCP サーバーを設定するコーディング アシスタントを選択するように求められます。スペース キーで選択を切り替え、ENTER で確認します。

• Generic (Claude Code、VS Code など) - .mcp.json に書き込み
• VS Code (GitHub Copilot) - .vscode/mcp.json に書き込み
• Cursor - .cursor/mcp.json に書き込み
• Gemini - .gemini/settings.json に書き込み
• JetBrains Junie - .junie/mcp/mcp.json に書き込み
• None - MCP 設定をスキップ

デフォルトの選択は Generic です。None を選択すると、MCP サーバーの設定が完全にスキップされます。

AI エージェントの選択

次に、スキル ファイルと手順を設定する AI エージェントを選択するように求められます。

• Generic - .agents/skills/ および AGENTS.md
• Claude - .claude/skills/ および .claude/CLAUDE.md
• Copilot - .github/skills/ および .github/copilot-instructions.md
• Cursor - .cursor/skills/ および .cursor/rules/cursor.mdc
• Codex - .codex/skills/ および .codex/instructions.md
• Windsurf - .windsurf/skills/ および .windsurf/rules/guidelines.md
• Gemini - .gemini/skills/ および .gemini/GEMINI.md
• Junie - .junie/skills/ および .junie/guidelines.md
• None - スキル ファイルと手順をスキップ

デフォルトの選択は Generic と Claude です。None を選択すると、エージェントの設定が完全にスキップされます。

Angular schematic 経由で実行した場合、Ignite UI サーバーと並んで angular-cli MCP サーバー エントリが自動的に追加されます。

MCP クライアント設定と利用可能なツールの詳細については、Ignite UI CLI MCP を参照してください。