Angular Schematics & Ignite UI CLI

CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。プロジェクトにさらに追加できる Ignite UI for Angular コンポーネントを備えたビューの選択により、開発者の生産性が大幅に向上します。

Ignite UI CLI は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドラインツールです。

Ignite UI for Angular Schematics は同じプロジェクトの一部であり、Angular CLI で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。Ignite UI for Angular をインストールすると、schematics コレクションがプロジェクトに追加されます。

ツールの両方バージョンにより、異なるプロジェクト、コンポーネント、およびシナリオビュー (テンプレート)を生成し、ガイドモードを提供します。

作業の開始

Ignite UI for Angular Schematics をグローバルにインストールする方法:

npm i -g @igniteui/angular-schematics

上記のインストールにより、schematics が ng new コマンドのコレクション パラメーターを使用できるようになります。

IgniteUI CLI を使用する場合、npm でインストールできます。

npm install -g igniteui-cli 

ガイドの使用

アプリケーションを最短でブートストラップする最も簡単な方法は、Step-by-Step ガイドを使用する方法です。

Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。

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

Ignite UI CLI を使用している場合は、次のコマンドを実行します。

ig

Building Your First Ignite UI CLI App

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

Ignite UI for Angular コントロールを使用するように設定されたアプリケーションを作成するには、コレクションオプションに @igniteui/angular-schematics を提供する ng new コマンドを実行します。

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

Ignite UI CLI を使用する場合、angular をフレームワークとして提供し、igx-ts を new コマンドのプロジェクト タイプ引数として提供する必要があります。

ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav

新しいアプリケーションが同じ名前でディレクトリに作成されます (newAngularProject)。Ignite UI for Angular アプリケーションを作成するときに選択できるいくつかのプロジェクト テンプレートがあります。

テンプレートの ID	テンプレートの説明
empty	ルーティングとホームページを備えたプロジェクト構造
side-nav	サイド ナビゲーション ドロワーを備えたプロジェクト構造
side-nav-auth	ユーザー認証モジュールで拡張されたサイド ナビゲーション プロジェクトプロジェクト テンプレートの詳細は、Angular 認証プロジェクト テンプレートトピックをご覧ください。

さらに、引数を指定してテーマを制御したり、パッケージのインストールをスキップしたりできます。

name

name (alias: -n)

アプリケーションの名前。アプリケーションが同じ名前のディレクトリに作成されます。

framework (Ignite UI CLI only)

--framework (alias: -f) default value: "jquery"

プロジェクトの対象フレームワーク。サポートされるフレームワークは jQuery、Angular、および React です。

type (Ignite UI CLI only)

--type (alias: -t)

使用可能なプロジェクト タイプは、選択したフレームワークによって異なります。

theme

--theme (alias: -th)

プロジェクト テーマ (プロジェクトの種類によって異なります)。

skip-git

--skip-git (alias: --sg)

このオプションを使用すると、Git によるリポジトリの自動初期化はスキップされます。オプションを省略すると、グローバルな skipGit構成プロパティが使用されます。

skip-install

--skip-install (alias: --si)

new コマンドは、プロジェクトの作成時にパッケージの依存関係をインストールします。このフラグを渡すと、最初のインストールがスキップされます。

template

--template

特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。 現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。

テンプレートの追加

利用可能な Ignite UI Angular テンプレートを追加するには、新しいコンポーネントのテンプレート ID と名前を指定するか、Step-by-Step Guide を使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が ng add でインストールされている 場合にのみサポートされます。

Schematics には、Ignite UI for Angular コレクション と component [template] [name] の ng generate を使用します。

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

Ignite UI CLI には、ig add [template] [name] コマンドを使用します。

ig add grid newGrid

すべての利用可能なテンプレート のリストを取得するには、プロジェクトディレクトリで ig list コマンドを実行することもできます。

また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。

module

--module (alias: -m)

注: module 引数は、Angular プロジェクトでのみ適用できます。

新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。

ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
ig add combo newCombo --module=myModule/myModule.module.ts

skip-route

--skip-route (alias: -srk)

新しいコンポーネントのアプリ ナビゲーション ルートを自動生成しないでください。

アプリケーションの実行

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

Ignite UI for Angular Schematics の使用:

ng g @igniteui/angular-schematics:start

Ignite UI CLI の使用:

ig start

Ignite UI CLI コマンド

使用可能な Ignite UI CLI コマンドとその使用方法 (フラグを渡すなど) の完全なリストは、Ignite UI CLI wiki ページにあります。

コマンド	エイリアス	説明
ig start		アプリケーションをビルドしてウェブ サーバーを開始、次にアプリケーションをデフォルト ブラウザーで開きます。
ig build		アプリケーションをアプトプット ディレクトリへビルドします。
ig generate	g	サポートされるフレームワークおよびプロジェクト タイプのための新しいカスタム テンプレートを生成します。
ig help	-h	使用可能なコマンドをリストして手順の簡単な説明を示します。
ig config		Ignite UI CLI 構成設定の読み取り / 書き込み操作を実行します。
ig doc		検索した用語についてインフラジスティックスのサポート情報を検索します。
ig list	l	指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。
ig test		現在のプロジェクトのテストを実行します。
ig version	-v	ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。