使用 ng-packagr 构建
生成 Angular Package Format 输出
使用 ng-packagr 构建 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
库需要特殊的构建过程
您不能直接发布原始 TypeScript 和模板；使用者需要编译后的标准化输出。Angular 库使用 Angular Package Format (APF) 进行构建，所用工具是 ng-packagr，也是 CLI 在底层使用的工具。
Angular Package Format
APF 是可分发 Angular 库的官方结构：其中包含经过优化的 ES 模块、类型定义和元数据，并以这种布局确保任何 Angular 应用都能可靠地使用库并进行树摇。
构建库
运行针对库项目的 ng build。CLI 会调用 ng-packagr，并将打包后的输出写入 dist/。
ng build ui-kit
# outputs dist/ui-kit in Angular Package Formatng-packagr 会生成什么
dist 文件夹包含已编译的 FESM（扁平化 ES 模块）包、.d.ts 类型文件，以及一个生成的 package.json，其中包含正确的 module 和 types 入口字段。
dist/ui-kit/
fesm2022/ui-kit.mjs # flattened ES module
index.d.ts # type declarations
package.json # generated, points to the aboveng-package.json 配置
每个库都有一个 ng-package.json，用于告诉 ng-packagr 输出目标和入口文件。CLI 会在构建期间读取它。
// projects/ui-kit/ng-package.json
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ui-kit",
"lib": { "entryFile": "src/public-api.ts" }
}生产构建
使用生产配置进行构建，以启用完整优化。输出内容就是您要发布的内容，因此请始终打包经过优化的版本。
ng build ui-kit --configuration production部分编译
库会以 partial Ivy 模式编译，而不是完全编译。这使库能够兼容不同 Angular 版本；使用该库的应用会在自身构建期间完成编译（链接）。
输出中的对等依赖
ng-packagr 会将 Angular 和其他对等依赖保留为外部依赖，而不是将它们打包进去。生成的 package.json 会将它们列为 peerDependencies，因此使用者会提供一个共享副本。
资源和样式
您可以将样式和静态资源包含在包中。请在 ng-package.json 中声明它们，以便 ng-packagr 将其复制并处理到面向使用者的 dist 输出中。
"assets": ["./styles/theme.css"]验证构建结果
构建完成后，检查 dist/ui-kit：确认其中有 FESM 包、.d.ts 文件，以及一个 package.json，其 exports/module 字段指向已构建的文件。这正是 npm 将接收的内容。
开发时的监视模式
添加 --watch，即可在编辑时自动重新构建。结合演示应用使用时，这会在开发库的过程中提供快速反馈循环。
ng build ui-kit --watch快速检查
Angular 库会构建为什么格式？
回顾
使用 ng build <lib> 构建库。该命令会运行 ng-packagr，将 Angular Package Format（FESM 包、.d.ts、生成的 package.json）输出到 dist/。通过 ng-package.json 配置输出，在生产模式下构建，依靠部分编译实现跨版本兼容，并将对等依赖保留在外部。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 38
- 课程
- 144
常见问题解答
「使用 ng-packagr 构建」课时是免费的吗？
是的 — 「使用 ng-packagr 构建」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「使用 ng-packagr 构建」这节课中我会学到什么？
生成 Angular Package Format 输出 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 ng-packagr 构建」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 ng generate 创建库
- 公共 API 与入口点
- 使用 ng-packagr 构建
- 发布到 npm