從 Angular 14 開始,全新架構獨立元件(Standalone Component)騰空出世,帶給 Angular 開發者一個全新感受,用更簡潔的程式碼、更清晰的架構,幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始,更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉傳統元件為獨立元件,甚至於可以連同 AppComponent 也一併轉換成獨立元件,讓整個 Angular 應用程式都變成以獨立元件為主。這篇文章我來說說這套工具的使用方式!
以下我用一段實作過程,幫助大家快速體驗一種開發情境:
-
建立專案
使用 ng new
建立一個名為 demo1
的專案,使用 --routing
啟用路由功能,使用 --style=css
指定用 CSS 撰寫樣式,使用 --inline-style --inline-template
將元件的樣式與樣版都寫在 *.component.ts
裡。
ng new demo1 --routing --style=css --inline-style --inline-template
cd demo1
這個新建立的專案,還是會有一組 AppModule (src/app/app.module.ts
) 與一個傳統元件的 AppComponent (src/app/app.component.ts
)。
-
執行 ng lint
初始化 ESLint 設定
ng lint
-
設定 Coding Style (代碼風格) 自動化設定
我在 設定 Angular 專案使用 husky 簡化 Git hooks 設定並用 Prettier 統一風格 文章,已經被 Mike 濃縮成一個 ng add
命令,直接執行就可以自動將整篇文章的內容一次設定好。
ng add ngx-prettier-git-hooks
這個命令等同於執行了以下幾個動作:
# 1. 安裝必要套件
npm install --save-dev husky pretty-quick
# 2. 設定 scripts.prepare 指令
npm pkg set scripts.prepare="husky install"
# 3. 設定 pre-commit Hook
npx husky set .husky/pre-commit "npx pretty-quick --staged"
# 4. 新增 .prettierignore 與 .prettierrc.json 設定檔
# 5. 新增 .vscode/settings.json 與 .vscode/extensions.json 設定檔
# 6. 執行 npm install 命令(也會一並執行 npm run prepare 命令)
npm install
檢查是否有檔案需要格式化
npx prettier --check .
強制格式化所有檔案
npx prettier --write .
-
建立一個 HeaderComponent 傳統元件
ng g c header
跟以往一樣,建立新元件時,會一併註冊到 AppModule (src/app/app.module.ts
) 之中:
我記得跟 Mike 有過一段這樣的對話:😆
Will: 我覺得 NgModule 有個缺點,對新手很不友善,就是每個新的 Component 都要註冊在 NgModule 裡面
Mike: 其實都用 Angular CLI,新手應該也沒感覺?
Will: 建錯要改的時候,就有感覺了
Mike: 這倒是真的 XD
-
利用 @angular/core:standalone
這個 Schematics 轉換所有元件為獨立元件
ng generate @angular/core:standalone --path ./ --mode=convert-to-standalone
執行完就先 build 看看有沒有錯誤
ng build
-
利用 @angular/core:standalone
嘗試移除是否有無用的 NgModules
ng generate @angular/core:standalone --path ./ --mode=prune-ng-modules
執行完就先 build 看看有沒有錯誤
ng build
-
利用 @angular/core:standalone
嘗試將整個應用程式連同根元件一起改用獨立元件
ng generate @angular/core:standalone --path ./ --mode=standalone-bootstrap
執行完就先 build 看看有沒有錯誤
ng build
-
重新檢查現有專案的程式碼風格
統一程式碼排版
npx prettier --check .
npx prettier --write .
程式碼風格檢查
ng lint
總結
即便 @angular/core:standalone
這個 Schematics 可以幫我們轉換所有元件為獨立元件,也真的很佛心,但是凡事總有那 1% 對吧?如果真的遇到了問題,很有可能就是踩到了這個工具的限制(Limitations),不得不小心謹慎,記得做每個步驟都要 ng build
看看有沒有問題。
相關連結