ng add で Angular UI ライブラリを導入 | ng-hub-ui

ng-hub-ui ファミリーのインストーラー。ng add ひとつで、必要なライブラリを尋ね、それぞれが必要とするパッケージを解決し、マニフェストに書き込みます。

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

コマンドひとつ

`ng add ng-hub-ui` がインストールのすべてです。Angular CLI がパッケージを取得して `ng-add` スキーマティック を実行し、カタログにある 25 のライブラリのうちどれが必要かを尋ねます。スペースで選択、`a` で全選択の切り替え、`i` で反転。確定すると選択が npm パッケージへ解決され、`dependencies` に書き込まれ、インストールは CLI が検出したパッケージマネージャーに引き渡されます。

対話的インストール

Space selects, a toggles everything and i inverts the selection. The schematic writes the chosen packages into dependencies and then lets the package manager install them.

オプションとスクリプト

プロンプトは省略できます。これが CI やプロジェクト自身のセットアップスクリプトからインストーラーを使える理由です。`--libraries` はカンマ区切りのリストでも、同じオプションの繰り返しでも受け付け、どちらも同じように正規化されます(前後の空白を除去し、重複を取り除き、渡された順序を保つ)。`--skip-install` はマニフェストだけ書いて止まります。プロンプトに表示されるラベルではなく、カタログの識別子を渡してください。両者は別の文字列で、未知の識別子は `package.json` に触れる前にスキーマティック を止めます。

プロンプトの代わりにオプション

Comma-separated

Repeated flag — the same selection, normalized the same way

Manifest only, install left to you

An empty selection fails with Select at least one ng-hub-ui library to install. and an unknown identifier with Unknown ng-hub-ui library: <id>. — in both cases before package.json is touched.

解決された依存関係

選んだものと書き込まれるものは同じではありません。カタログの各ライブラリは必要なピアを宣言しています。ファミリーの大半には `ng-hub-ui-utils`、panels には `ng-hub-ui-ds`、signature には `ng-hub-ui-forms`、そして当方のものですらない `sortablejs`。解決は推移的なので、一緒に入るライブラリがさらに自分のピアを持ち込みます。どの範囲も、ファミリーがそれに要求する最も高いピア以上を下限にしています。これが npm の解決できない組み合わせを書かないための担保です。すでにあるキーは決して書き換えないので、固定したバージョンは残ります。スキーマティック は依存関係の配線で止まります。`angular.json` も、プロバイダーも、コンポーネント登録も、スタイルシートの追加も行いません。

その選択が書き込むもの

Two libraries asked for…

…five packages written into package.json

The schematic adds a dependency only when the key is absent, so a version already pinned in your manifest survives the install untouched.