The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何透過 Angular CLI 快速將專案全部都轉換成獨立元件架構

📅 2023/04/10 09:05 📁 Angular

從 Angular 14 開始，全新架構獨立元件(Standalone Component)騰空出世，帶給 Angular 開發者一個全新感受，用更簡潔的程式碼、更清晰的架構，幫助開發人員架構元件與管理元件之間的依賴關係。而從 Angular 15.2.0 開始，更提供了一個 Schematics (程式碼產生器與編修工具) 可以幫助你快速移轉傳統元件為獨立元件，甚至於可以連同 AppComponent 也一併轉換成獨立元件，讓整個 Angular 應用程式都變成以獨立元件為主。這篇文章我來說說這套工具的使用方式！

text_effect_book_tshirt_design_2nd_time_181

以下我用一段實作過程，幫助大家快速體驗一種開發情境：

  1. 建立專案

    使用 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)。

  2. 執行 ng lint 初始化 ESLint 設定

    ng lint

    image

  3. 設定 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 .

  4. 建立一個 HeaderComponent 傳統元件

    ng g c header

    跟以往一樣，建立新元件時，會一併註冊到 AppModule (src/app/app.module.ts) 之中：

    image

    我記得跟 Mike 有過一段這樣的對話：😆

    Will: 我覺得 NgModule 有個缺點，對新手很不友善，就是每個新的 Component 都要註冊在 NgModule 裡面
Mike: 其實都用 Angular CLI，新手應該也沒感覺？
Will: 建錯要改的時候，就有感覺了
Mike: 這倒是真的 XD

  5. 利用 @angular/core:standalone 這個 Schematics 轉換所有元件為獨立元件

    ng generate @angular/core:standalone --path ./ --mode=convert-to-standalone

    執行完就先 build 看看有沒有錯誤

    ng build

  6. 利用 @angular/core:standalone 嘗試移除是否有無用的 NgModules

    ng generate @angular/core:standalone --path ./ --mode=prune-ng-modules

    執行完就先 build 看看有沒有錯誤

    ng build

  7. 利用 @angular/core:standalone 嘗試將整個應用程式連同根元件一起改用獨立元件

    ng generate @angular/core:standalone --path ./ --mode=standalone-bootstrap

    執行完就先 build 看看有沒有錯誤

    ng build

  8. 重新檢查現有專案的程式碼風格

    統一程式碼排版

    npx prettier --check .
npx prettier --write .

    程式碼風格檢查

    ng lint

總結

即便 @angular/core:standalone 這個 Schematics 可以幫我們轉換所有元件為獨立元件，也真的很佛心，但是凡事總有那 1% 對吧？如果真的遇到了問題，很有可能就是踩到了這個工具的限制(Limitations)，不得不小心謹慎，記得做每個步驟都要 ng build 看看有沒有問題。

相關連結

留言評論