ng add で Angular UI ライブラリを導入 | ng-hub-ui
ng-hub-ui ファミリーのインストーラー。ng add ひとつで、必要なライブラリを尋ね、それぞれが必要とするパッケージを解決し、マニフェストに書き込みます。
最終更新 2026/09/08
概要
チームがこのライブラリを探す理由
ファミリーのライブラリを 1 つ以上 Angular ワークスペースに追加するとき、どのピアパッケージが必要かを手作業で調べたくないなら ng-hub-ui を使ってください。
インストール
ng add ng-hub-uiジャンプ
最適な用途
- 複数の ng-hub-ui ライブラリを Angular ワークスペースに一度に追加する
- プロンプトに答えずに CI でプロジェクトの初期設定をスクリプト化する
- 各ライブラリに必要なピアパッケージの割り出しを任せる
について ui
ng-hub-ui はファミリーの統括パッケージで、公開されているもののうち唯一コンポーネントを含みません。含まれるのは ng-add スキーマティックです。カタログにある 25 のライブラリを複数選択のプロンプトで提示するか、--libraries オプションから識別子を直接受け取り、その選択を本当に必要な npm パッケージへ解決します。各ライブラリが依存するピアと、当方のものですらない唯一の外部パッケージ sortablejs も含まれます。解決した一覧はワークスペース直下の dependencies に書き込まれ、すでにあるキーを上書きすることはありません。その後、Angular CLI が検出したパッケージマネージャーにインストールを引き渡します。役割は依存関係の配線までです。angular.json も、プロバイダーも、コンポーネントの取り込みも、スタイルシートの追加も行いません。
機能ガイド
コマンドひとつ
`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` に触れる前にスキーマティック を止めます。
サンプル:
プロンプトの代わりにオプション
3 つの非対話的な書き方と、誤った選択が拒否される 2 つの経路。
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` も、プロバイダーも、コンポーネント登録も、スタイルシートの追加も行いません。
サンプル:
その選択が書き込むもの
2 つ頼んで 5 つ書き込まれる。同時インストールを具体的に。
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.
主な機能
最近の変更
Version 0.2.1 - 9/8/26, 12:00 AM
fixed: Four documents said the installer has no page on the documentation site. This is that page: both READMEs and `FUNCTIONALITIES.md` link to it instead of denying it.
changed: The manifest `homepage` points at this page rather than at the family root — it is the link a registry shows beside the package, and every other library in the family already points at its own documentation. Metadata only: no code, no schematic behaviour, no catalogue change.
Version 0.2.0 - 9/6/26, 12:00 AM
fixed: Every one of the 25 catalogue ranges now floors at or above the highest peer the family declares on it. `ng-hub-ui-forms` had reached 22.32.0 peering on `ng-hub-ui-utils >=22.12.0` while the catalogue still offered `utils ^22.8.1`, so `ng add ng-hub-ui --libraries=forms` wrote a pair npm cannot satisfy — invisible on a fresh unpinned install, an `ERESOLVE` anywhere resolution was already fixed.
fixed: Both READMEs denied a library the installer has offered since 0.1.6: they said `ng-hub-ui-action-sheet` was not on npm, in five separate places, while the catalogue had carried it all along.
changed: The Angular peer range is `>=18.0.0`, up from `>=17.3.0`. Nothing in the catalogue targets Angular 17, so the old floor let `ng add ng-hub-ui` run, write the manifest and only then fail to resolve. See `BREAKING_CHANGES.md`.
added: The schematic has a tracked spec again. The only test over `ng add` lived beside the compiled output where `.gitignore` excludes it, so it left the repository the moment it was written; run today it reported three failures it had been reporting for months.
Version 0.1.7 - 9/1/26, 12:00 AM
changed: The manifest `homepage` points at the localized site root rather than the redirect above it, so a reader arriving from npm lands one hop earlier.
Version 0.1.6 - 8/30/26, 12:00 AM
added: `action-sheet` joins the catalogue and the prompt: `ng-hub-ui-action-sheet` reached the registry with 22.0.0, and it needs no co-installs.
関連ライブラリ
よくある質問
Angular プロジェクトに ng-hub-ui をインストールするには？
ng add ng-hub-ui を実行します。Angular CLI がインストーラーパッケージを取得して ng-add スキーマティックを実行し、カタログの 25 ライブラリのどれが必要かを尋ね、解決したパッケージを dependencies に書き込み、インストールはお使いのパッケージマネージャーに任せます。
対話的なプロンプトなしでインストールできますか？
できます。識別子を --libraries に渡してください。カンマ区切り（--libraries=modal,paginable）でも、オプションの繰り返し（--libraries=modal --libraries=paginable）でも構いません。--skip-install を付けると package.json の更新だけを行い、インストールは手元に残ります。
ng-hub-ui のスキーマティックはプロジェクトの何を変更しますか？
ワークスペース直下の package.json の dependencies ブロックだけ、しかもまだ存在しないキーだけです。angular.json にも、プロバイダーにも、コンポーネントの取り込みにも、スタイルシートにも触れません。