把功能打包成庫會強迫庫中的工件與應用的業務邏輯分離。這有助於避免各種不良實踐或架構失誤，這些失誤會導致將來很難解耦和複用程式碼。

把程式碼放到一個單獨的庫中比簡單地把所有內容都放在一個應用中要複雜得多。它需要更多的時間投入，並且需要管理、維護和更新這個庫。不過，當把該庫用在多個應用中時，這種複雜性就會得到回報。

Angular 庫是一個 Angular 專案，它與應用的不同之處在於它本身是不能執行的。必須在某個應用中匯入庫並使用它。

使用下面的命令列，建立一個庫：

> ng generate library my-lib
![](https://img-blog.csdnimg.cn/img_convert/882c30dc8c99e378436fd72a2284c54a.png)

angular.json 檔案在 projects 節點下，多了一個 my-lib 節點，其 projectType 型別為 library：

![](https://img-blog.csdnimg.cn/img_convert/6426d6786024f980b87b69784ba8913f.png)

angular.json 裡的層級結構和檔案系統的目錄同樣是一致的：
![](https://img-blog.csdnimg.cn/img_convert/add78f48acdcb5dfa12a67fe61b78ad6.png)

這個庫有屬於自己單獨的 package.json：
![](https://img-blog.csdnimg.cn/img_convert/a147e31f4d1363e12ffe2b3ab6f0f671.png)

這個庫無法單獨執行，那麼如何測試呢？

使用如下命令列。

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

![](https://img-blog.csdnimg.cn/img_convert/d0676c7a9a64598f965ab6e32ad23a83.png)

要讓庫程式碼可以複用，你必須為它定義一個公共的 API。這個“使用者層”定義了庫中消費者的可用內容。該庫的使用者應該可以透過單個的匯入路徑來訪問公共功能（如 NgModules、服務提供者和工具函式）。

庫的公共 API 是在庫資料夾下的 public-api.ts 檔案中維護的。當你的庫被匯入應用時，從該檔案匯出的所有內容都會公開。

下圖是一個例子：

![](https://img-blog.csdnimg.cn/img_convert/6031694cc9078299e486f32cd1f6850a.png)

我的 service 類：
![](https://img-blog.csdnimg.cn/img_convert/e292d2d484fdb033b0846e1129a653fa.png)

請使用 NgModule 來暴露這些服務和元件： Use an NgModule to expose services and components.

# 如何消費我們自己開發的庫

直接在我們的 AppModule 的 imports 區域裡，匯入我們的 Angular library 透過 public_api.ts 匯出的 component 和 service 即可。

![](https://img-blog.csdnimg.cn/img_convert/0de55a07f5baf52c50f18ac73c7038d8.png)

透過依賴注入，匯入我們庫裡匯出的 service 類的例項：

![](https://img-blog.csdnimg.cn/img_convert/d07176e933772d02af0739a6c36ffb0f.png)

執行 Angular 應用，發現我們 Angular 庫裡的 service 列印出的字串，說明 library 使用成功了：

![](https://img-blog.csdnimg.cn/img_convert/94d3609241d521f9496cf028c4c7f6e7.png)

# 如何使用 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 以匹配最新版本。</lib_name></lib_name>

如何建立 Angular 庫並在 Angular 應用裡呼叫

相關文章