你也討厭升級 Angular 版本嗎？因為我討厭。
我維護了幾個開源專案，而升級 Angular 大概是我最不喜歡的維護工作。這也是為什麼我的前端更新常常一拖再拖，拖了很久。
不過我們現在有 AI，對吧？它應該能夠透過一些指令來處理這件事。
所以我決定建立（或者更準確地說，是 vibe code）一個給 Codex 用的 Angular Update Skill。
建立這個技能
升級 Angular 不只是執行 ng update 而已。我通常還得處理好幾件事，所以我寫了一段提示詞，描述這個技能應該做什麼：
- 依照官方的 Angular 升級指南。
- 為升級建立獨立的 Git 分支。
- 處理遷移與相依套件更新。
- 驗證一切是否仍然能建置並正常運作。
- 遵循我手動升級 Angular 時會採用的相同最佳實踐。
（相較之下，在 .NET 裡更新 NuGet 套件就簡單多了。）
Codex 生成了這個技能的第一版，而且出乎意料地，它真的能運作！
嗯……至少在本機上可以。
第一個問題：npm ci
當我把變更推送到 GitHub 之後，CI pipeline 失敗了，錯誤訊息如下：
npm ci can only install packages when your package.json and package-lock.json are in sync.典型的「在我電腦上可以」問題。這個技能成功更新了 Angular，但沒有妥善驗證全新安裝是否能正常運作。
所以我又加了一個驗證步驟：在確認升級完成之前先執行 npm ci。這樣一來，代理就能在 lock 檔問題進到 CI 之前先抓出來。
第二個問題：npm 發佈
接著我在嘗試把 Angular 函式庫發佈到 npm 時，又遇到另一個問題：
npm error code E404
npm error 404 Not Found - PUT https://registry.npmjs.org/gramli-angular-mydatepicker - Not found一開始，這個錯誤訊息並不太有幫助。經過一些調查後，我發現我的發佈環境使用的是 Node.js 22 和 npm 10。
然而，根據 npm 信任發佈文件，信任發佈需要：
- Node.js 22.14.0 或更高版本
- npm 11.5.1 或更高版本
所以我又更新了一次這個技能：優先選擇與目標 Angular 版本相容的最新 Node.js LTS 版本，同時也確保 npm 版本符合任何發佈需求。
第三個問題：這個技能變得太大了
在做完這些改進之後，這個技能變得相當龐大。對於 token 額度很寬裕的情況來說，這或許沒什麼，但我也希望它能讓使用 AI 預算較有限的人使用。所以我縮短了指令、移除了不必要的重複內容，並保留重要的驗證步驟。主技能從 1,252 個字縮減到 701 個字，整個套件大約縮短了 40%。
在真實專案上測試
當然，產生出一個技能是一回事，實際使用又是另一回事。到目前為止，我已經把目前版本用在我三個開源專案上：
- Angular 21 → 22： angular-mydatepicker PR #12
- Angular 19 → 22： FileApi PR #13
- Angular 21 → 22： AuthApi PR #113
Angular 19 → 22 的升級特別有趣，因為它需要跨越三個主要版本進行遷移。在 AuthApi 專案中，這次升級也包含了因為 PrimeNG 授權變更而將 PrimeNG 替換為 Optimus UI。
這三個升級現在都已經合併了。
三個專案之後
目前這個版本運作得相當不錯，至少在我那些較小的專案上是如此。不過它並不完美。有些 Angular 專案比我的複雜得多，所以這個技能可能需要針對那些專案做調整。
但它已經幫我升級了三個專案，而且我也在過程中學到了一些東西。
最棒的是什麼？我終於在短短 一週 內就把我的 Angular 專案更新完了，而不是又把它們延後。😁
我想和社群分享這件事，因為它或許也能幫助到其他人。如果你想試試這個技能，或想改進它，可以在這裡找到：
GitHub 上的 Angular Update Skill
原文出處：https://dev.to/gramli/i-vibe-coded-my-way-out-of-angular-upgrades-4fkh
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
