用 ng add 安装 Angular UI 库 | ng-hub-ui

ng-hub-ui 家族的安装器：一条 ng add 命令，询问你需要哪些库，解析每个库所需的包，并写入你的清单。

最后更新 2026年9月8日

概览

团队为何搜索这个库

当你要把家族中的一个或多个库加入 Angular 工作区，又不想手动推算每个库需要哪个对等包时，请使用 ng-hub-ui。

安装

ng add ng-hub-ui

跳转到

适用于

  • 一次性把多个 ng-hub-ui 库加入 Angular 工作区
  • 在 CI 中用脚本完成项目初始搭建，无需回答交互提示
  • 把每个库所需的对等包交给安装器去推算

关于 ui

ng-hub-ui 是家族的总包，也是唯一一个不含组件的已发布包。它提供的是一个 ng-add 原理图：以多选提示列出目录中的 25 个库，或者直接从 --libraries 参数读取标识符，然后把选择解析成真正需要的 npm 包——包括每个库依赖的对等包，以及唯一一个不属于我们的外部包 sortablejs。解析结果写入工作区根目录 package.json 的 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` 被改动之前中止原理图。

示例:
用参数代替提示

三种非交互写法，以及错误选择被拒绝的两种方式。

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.

核心特性

最近更改

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.

相关库

ng-hub-ui-utils ng-hub-ui-forms ng-hub-ui-paginable

常见问题

如何在 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，不注册提供者，不导入组件，也不添加样式表条目。