前言
當你需要管理超過一個專案時，你就需要知道怎麼使用 Angular Library。
你可以把多個專案共享的元件放到這個 Library 了，就像 Angular Material 那樣。
參考
Sandro Roth – Building an Angular Library with multiple entry points (主要參考)
Docs – Creating libraries
Docs – Copy assets
Docs – Embed assets in CSS
Angualr Library の Get Started 版
我們先來一個 Get Started 版本，之後再補一個實戰班。
提醒：我這裡給的例子，Library 和 Application 會在同一個專案裡 (所謂的 Local Library)。如果要不同專案，那就需要把 Library 釋出到 npm 才行。在本篇的結尾會講解如何 publish to npm。
Create project
ng new play-library --create-application=false
在建立專案的同時，不要建立 Application 先，因為有 Library folder 結構會不一樣。
目前 folder 結構長這樣
angular.json 長這樣
空空如也。
Create Application
接著建立 Application
ng g app my-app --routing=false --ssr=false --style=scss --skip-tests
folder 多了 projects/my-app
angular.json 也多了 projects.my-app
Create Library
接著建立 Library
ng g lib stooges --prefix=stg
我的 Library 名字叫 stooges
在 projects folder 裡面多了一個 stooges library
它已經替我們做好了一個 demo component 和 service。
angular.json 也多了一個 stooges library
Build library
要使用 Library ，我們需要先 build 它。
ng build stooges --watch
build 也是可以 watch 的哦，每當我們修改，它就會 re-build (我不清楚是 re-build 修改的部分還是全部🤷♂️)
build 好後它會多一個 dist/stooges folder
Use library in application
app.component.ts
import { Component } from '@angular/core';
import { StoogesComponent } from 'stooges'; // 1. import component from library
@Component({
selector: 'app-root',
standalone: true,
imports: [StoogesComponent], // 2. import StoogesComponent
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {}
app.component.html
<stg-stooges />
run
ng serve --open
效果
The connection between the library and the application
你可能會好奇，app.component.ts 為什麼可以 import 到 'stooges'
import { StoogesComponent } from 'stooges';
stooges library 在 dist 裡，並不在 node_modules 裡丫🤔。
它的秘密在 tsconfig.json 裡
這裡頭做了一個 connection，所以 Application 就和 Library 連上了。
總結
Get Started 只是讓大家感受以下 Angular Library 長啥樣，上面提到的幾個 folder 和 file 都是和 Library 比較有關係的，如果以後遇到什麼疑難雜症可以多往這幾個地方調查。
好，我們進入下一 part -- Angualr Library 實戰版。
Angualr Library の 實戰版
我們延續上面 Get Started 版本，把它改成實戰版本。
Multiple export path
目前有一個問題 -- Library 只有一個出入口
import { StoogesComponent } from 'stooges';
假設我有 1000 個元件，由於它們都是透過 import .. from 'stooges' 匯入，那它們就絕對不可以撞名字。
這對命名要求很高啊。
假如可以這樣...
import { StgDialogComponent, StgSameNameComponent as StgDialogSameNameComponent } from 'stooges/dialog';
import { StgCardComponent, StgSameNameComponent as StgCardSameNameComponent } from 'stooges/card';
stooges/table 和 stooges/select 都是 stooges library，但 stooges library 裡面又細分成了 2 個 namespace 'table' 和 'select'。
我們可以以 2 個不同的 path 做 import，這樣就大大減少了撞名的可能性，即使撞了名字也可以透過 as alias 換名。
restructure folder
首先，把 src/lib/ folder 給刪了。
改成這樣
select 和 table 將成為 2 個 export path，它們裡面裝了很多元件，細節我們下面看。
index.ts 取代了原本的 src/public_api.ts
由於我沒有需要 root export (因為有了 select 和 table 2 個 sub export)，所以這裡做一個假 export 騙過它就好。
接著，ng-package.json 的路徑需要換一下
然後是 table 和 select folder
每一個要 sub export 的 folder 都需要加上 index.ts 和 ng-package.json。
index.ts 負責 export 元件
ng-package.json 就抄 root 的 ng-package.json
有兩個小區別：
-
$schema 路徑多了一個 ../
-
root 有一個 "dest" : "../../dist/stooges" 屬性，sub 不需要 "dest" 屬性。
select 和 table 一樣，也需要 index.ts 和 ng-package.json。
build & connect
接著 build library
ng build stooges --watch
效果
之前只有一個 lib folder，現在變成了 2 個 folder -- select 和 table。
目錄
上一篇 Angular 17+ 高階教程 – EventManagerPlugin & Hammer.js Gesture
下一篇 Angular 17+ 高階教程 – Prettier, ESLint, Stylelint
想檢視目錄，請移步 Angular 17+ 高階教程 – 目錄