0Pricing
Angular Academy · 课时

使用 ng generate 创建库

搭建库项目的基础结构

使用 ng generate 创建库 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么要构建库

当多个应用需要相同的组件、服务或工具函数时，您可以将它们打包成 Angular 库。库具有可复用、带版本和可发布的特点，而不必在不同项目之间反复复制粘贴代码。

工作区容纳库

库位于 Angular 工作区中：工作区是由一个 angular.json 管理的文件夹，可以包含多个应用和库。您可以将库添加到现有工作区，也可以创建专用工作区。

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

生成库

原理图 ng generate library（别名为 ng g lib）会在 projects/ 下搭建新的库项目骨架。

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

会创建哪些内容

库会自带独立的 src/lib 文件夹、一个 public-api.ts 汇总文件、一个用于构建的 ng-package.json，以及 angular.json 中的一个条目。它是一个自包含且可构建的项目。

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

向库中添加组件

使用 --project 指定目标库，即可将代码生成到库中。CLI 会将文件放入正确的文件夹。

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

库中的独立组件

现代库更倾向于使用独立组件，使用者无需 NgModule 即可直接导入。请将组件标记为 standalone: true，这样应用只需简单导入即可使用它。

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

库的 package.json

每个库都有自己的 package.json，其中定义了名称、版本和类似 @angular/core 的对等依赖。对等依赖意味着由使用该库的应用提供 Angular，从而避免出现重复副本。

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

基于本地应用开发

在同一工作区中保留一个演示应用，以便在构建库时验证它。按库名称导入时，TypeScript 会通过 tsconfig 中的路径映射将其解析到本地源代码。

库与应用

应用用于部署；库用于被使用。库不能直接运行服务，它们会被构建为可分发的包，然后发布，或由工作区中的应用导入。

让库保持专注

优秀的库应有明确用途（例如 UI 工具包或数据访问层）。请避免将无关代码堆放在一起；内聚的库更易于进行版本管理、编写文档和复用。

后续步骤

完成库骨架搭建后，剩余工作是定义其公共 API、将其构建为 Angular Package Format，以及发布它。后续课程将分别介绍这些内容。

快速检查

如何创建库？

回顾

库用于为多个应用打包可复用代码。在工作区中使用 ng generate library 创建库；该命令会搭建 src/lib、public-api.ts、ng-package.json，以及包含对等依赖的 package.json。使用 --project 添加代码，优先采用独立组件，并让每个库保持专注。

常见问题解答

「使用 ng generate 创建库」课时是免费的吗？

是的 — 「使用 ng generate 创建库」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「使用 ng generate 创建库」这节课中我会学到什么？

搭建库项目的基础结构 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「使用 ng generate 创建库」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 ng generate 创建库
  2. 公共 API 与入口点
  3. 使用 ng-packagr 构建
  4. 发布到 npm
← 返回 Angular Academy