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

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

    npm i -g @igniteui/angular-schematics

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

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

    yarn global add @igniteui/angular-schematics

    ガイドの使用

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

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

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

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

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

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

    さらに、--type=igx-ts-legacy のようにプロジェクトの type を設定することで、モジュール ベースのブートストラップを使用してプロジェクトを生成することを指定できます。これを指定しないと、デフォルトでスタンドアロン コンポーネントを使用するプロジェクトが使用されます。

    上記のように @igniteui/angular-schematics コレクションを提供せずに作成された Angular プロジェクトが既にある場合、以下のコマンドを使用して Ignite UI for Angular 製品を追加できます。

    ng add igniteui-angular

    新しいアプリケーションが同じ名前でディレクトリに作成されます (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 でインストールされている場合にのみサポートされます。

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

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

    すべての利用可能なテンプレートのリスト。

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

    module

    --module (alias: -m)

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

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

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

    --skip-route (alias: -srk)

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

    アプリケーションの実行

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

    ng g @igniteui/angular-schematics:start