Use cases for Angular libraries
Angular 庫有 2 個常見用例：
建構可重用的元件庫以在應用程式之間共享。
建構共享服務層功能 - 例如。 用于處理外部資料源（例如 API）的用戶端。
雖然有很多 Angular 庫非常适合項目的情況，但值得考慮您的用例是否屬于這些，因為它确實引入了一些維護開銷。 請記住，您始終可以将功能編寫為應用程式中共享 Angular 子產品的一部分，并在必要時将其提取到庫中。
Creating an Angular library project
我們将建立一個 Angular 庫，以及一個使用該庫的示範應用程式。 我們可以使用以下指令建立這些：
ng new example-component-library --create-application=false
cd example-component-library
ng generate library example-component-library
ng generate application example-component-library-app
使用 --create-application=false 标志可以防止 Angular 建立名為“example-component-library”的應用程式，這是我們想要給庫本身而不是測試應用程式的名稱。
如果我們現在檢視剛剛建立的工作區内部，我們可以看到有一個項目檔案夾，其中包含每個庫（example-component-library）和應用程式（example-component-library-app）的子檔案夾 我們剛剛生成的。 還有一個包含 e2e 測試項目的第三個檔案夾，我們可以忽略它。
使用下面的指令行單獨 build library：
ng build --project=example-component-library
如果我們檢視 dist 檔案夾，我們将看到我們的庫已經建構，并且在 build 檔案夾中，我們有許多不同的檔案夾，其中包含适用于不同消費者的各種不同子產品格式的應用程式，以及一個包含 TypeScript 定義。
bundles - UMD 子產品格式。
esm5 - 主要使用 es5 的子產品格式，但也使用來自 es6 的導入/導出文法。
esm2015 - 使用 es2015/es6 的子產品格式。
fesm5 - esm5 的扁平化版本。
fesm2015 -peerDependencies esm2015 的扁平化版本。
lib - 庫的 TypeScript 定義。
這種格式稱為 Angular Package Format，它是用作 ng-packagr 輸出的格式，ng-packagr 是 Angular CLI 用來編譯庫的工具。
庫檔案的項目結構：
首先，删除現有的 example-component-library 子產品、元件和服務檔案——我們不需要這些。
接下來我們将添加一個元件、一個管道和一個指令。 我們将遵循一種為每個子產品添加一個元件的模式——這将允許消費應用程式僅導入它感興趣的庫子產品，然後在建構過程中對所有其他子產品進行 tree shaken. 我強烈建議這樣做，因為随着庫的增長，它确實會對應用程式包的大小産生影響。
ng generate module components/foo
ng generate component components/foo
ng generate module pipes/bar
ng generate pipe pipes/bar/bar
ng generate module directives/baz
ng generate directive directives/baz/baz
現在的項目結構：
最佳實踐：
每個子產品有一個元件，以允許對未使用的子產品/元件進行 tree shake 優化。
例外情況是始終一起使用的元件應儲存在同一子產品中 - 例如。 如果您正在實作頁籤，則 TabGroupComponent 和 TabItemComponent 将位于同一子產品中。
接下來，我們必須将我們建立的每個元件添加到其子產品的導出中：
我們現在更新 public_api.ts 以導出庫中我們希望公開給消費應用程式的任何檔案：
現在我們要做的就是重新建構，它就可以從應用程式中使用庫了。
Consuming our Angular library
開發環境
在開發過程中，使用我們庫的最佳方式是使用 npm link。 這将允許我們從消費應用程式的節點子產品檔案夾中的目錄符号連結到庫的 dist 檔案夾中的已編譯應用程式。
cd dist/example-component-library
npm link
我們可以從本地機器上的任何地方将一個 Angular 項目連結到這個庫。 從項目根檔案夾：
npm link example-component-library
如果我們現在使用 watch 标志運作庫，同時在另一個終端視窗中運作 ng serve。
ng serve
這将允許我們同時開發應用程式和（一個或多個）連結庫，并看到應用程式在每次修改庫源代碼時重新編譯。
生産環境
對于生産環境，我們将我們的庫釋出到 npm，然後使用 npm install 将其安裝到應用程式中。
首先，您需要建立一個 npm 帳戶。 現在從指令行登入：
npm login
From the project root folder:
npm publish
我們的包現在釋出在 npm（公開）上，我們可以通過将它添加到我們的應用程式的 package.json 依賴項并運作 npm install 來安裝它：