Ignite UI CLI を使用した作業の開始

    新しい Angular アプリケーションを最初から作成する場合、ユーザー フレンドリな付きエクスペリエンスを提供するため、以下に説明する方法を使用することをお勧めします。このガイドでは、すべてのセットアップ オプションについて説明します。

    はじめに Ignite UI CLI をグローバルにインストールします。

    npm install -g igniteui-cli

    yarn パッケージ マネージャーを使用している場合:

    yarn global add igniteui-cli

    ガイドの使用

    アプリケーションを最短でブートストラップする最も簡単な方法は、Ignite UI CLI を使用したステップ バイ ステップ ガイドを使用する方法です。

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

    ig

    または

    ig new

    最初の Ignite UI CLI アプリを作成

    新しいプロジェクトを作成します。

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

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

    v13.1.0 以降、igx-ts プロジェクト タイプはデフォルトでスタンドアロン コンポーネントを使用するプロジェクトを生成します。代わりにモジュールベースのブートストラップを使用したい場合は、type を igx-ts-legacy に設定できます。

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

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

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

    name

    name (alias: -n)

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

    framework (Ignite UI CLI のみ)

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

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

    type (Ignite UI CLI のみ)

    --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 と名前を指定するか、ステップ バイ ステップ ガイドを使用する必要があります。Angular Schematics、Ignite UI CLI で作成された既存のプロジェクト内、または Ignite UI for Angular が ng add でインストールされている場合にのみサポートされます。

    ig add [template] [name] コマンドを使用します。

    ig add grid newGrid

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

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

    module

    --module (alias: -m)

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

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

    ig add combo newCombo --module=myModule/myModule.module.ts
    skip-route

    --skip-route (alias: -srk)

    新しいコンポーネントのアプリ ナビゲーション ルートを自動生成しません。

    アプリケーションの実行

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

    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 バージョンを示します。