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

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

    npm i -g @igniteui/angular-schematics
    

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

    ガイドの使用

    アプリケーションを最短でブートストラップする最も簡単な方法は、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
    

    上記のように @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