如何创建 Angular 库并在 Angular 应用里调用

JerryWang_汪子熙 - 2021-10-18 06:58:46

把功能打包成库会强迫库中的工件与应用的业务逻辑分离。这有助于避免各种不良实践或架构失误，这些失误会导致将来很难解耦和复用代码。

把代码放到一个单独的库中比简单地把所有内容都放在一个应用中要复杂得多。它需要更多的时间投入，并且需要管理、维护和更新这个库。不过，当把该库用在多个应用中时，这种复杂性就会得到回报。

Angular 库是一个 Angular 项目，它与应用的不同之处在于它本身是不能运行的。必须在某个应用中导入库并使用它。

使用下面的命令行，创建一个库：

ng generate library my-lib

angular.json 文件在 projects 节点下，多了一个 my-lib 节点，其 projectType 类型为 library：

angular.json 里的层级结构和文件系统的目录同样是一致的：

这个库有属于自己单独的 package.json：

这个库无法单独运行，那么如何测试呢？

使用如下命令行。

ng build my-lib --configuration development
ng test my-lib
ng lint my-lib

要让库代码可以复用，你必须为它定义一个公共的 API。这个“用户层”定义了库中消费者的可用内容。该库的用户应该可以通过单个的导入路径来访问公共功能（如 NgModules、服务提供者和工具函数）。

库的公共 API 是在库文件夹下的 public-api.ts 文件中维护的。当你的库被导入应用时，从该文件导出的所有内容都会公开。

下图是一个例子：

我的 service 类：

请使用 NgModule 来暴露这些服务和组件： Use an NgModule to expose services and components.

如何消费我们自己开发的库

直接在我们的 AppModule 的 imports 区域里，导入我们的 Angular library 通过 public_api.ts 导出的 component 和 service 即可。

通过依赖注入，导入我们库里导出的 service 类的实例：

运行 Angular 应用，发现我们 Angular 库里的 service 打印出的字符串，说明 library 使用成功了：

如何使用 Angular 已经发布的库

这些库都是作为 npm 包发布的，它们通常都带有一些与 Angular CLI 集成好的 schematic。要把可复用的库代码集成到应用中，你需要安装该软件包并在使用时导入它提供的功能。对于大多数已发布的 Angular 库，你可以使用 Angular CLI 的 ng add <lib_name> 命令。

比如 SAP Spartacus 的安装命令行：

ng add @spartacus/schematics@latest

ng add 命令底层会使用 npm 包管理器或 yarn 来安装库包，并调用该包中的 schematic 在项目代码中添加脚手架，比如添加 import 语句、添加 fonts，添加 themes 等。

使用 ng update <lib_name> 来单独更新某个库的版本。Angular CLI 会检查库中最新发布的版本，如果最新版本比你已安装的版本新，就会下载它并更新你的 package.json 以匹配最新版本。

更多Jerry的原创文章，尽在："汪子熙":