Angular Ivy、Augury 一起用

想當年 Angular 9 釋出後，Ivy 取代了原先的 View Engine 擔當起新一代 Angular 內預設的編譯器與直譯器，我們新的 Ivy 快樂小夥伴更輕、更快、更聰明了，但遺憾的是：他與 Augury 並不相容（這是個非常好用，且普遍被用作 Angular 專案的除錯開發工具）。

此篇為 Angular Ivy with Augyry Ivy: A simply workaround 的原作者自行翻譯版本

太長了我不想讀，請直接帶我去看解決方案。

為什麼 Ivy 好棒棒

根據 Angular 官方部落格，新的 Ivy 引擎主要有底下幾個重大躍進：

• 更輕更小的 Bundle
• 針對 testing 的加速優化
• 更好的除錯方式
• 優化 Class 和 CSS 的綁定
• 更好的型別檢查
• 優化編譯錯誤的處理
• 加速編譯並預設啟用 AoT（Ahead-of-Time，執行前編譯）
• 增進對多國語言的支援

針對小型應用，bundle 大小減少了 30%，而大型應用則能減少約 25–40% 的 bundle 大小；至於中型應用則變化不多。圖表資料來源與更詳細 Ivy 的介紹請參見這裡.

有什麼問題嗎

Augury 是個對開發 Angular 應用時非常好用的開發與除錯工具，但 Augury 現在並無法支援 Angular Ivy, 主要是因為 Angular Ivy 拿掉了 ng.probe() 這個 API，Augury 的功能必須要藉由這個 API 讀取 Angular Component 才能正常運作。

網路上許多解決方案都是透過關掉 Angular Ivy 來讓 Augury 的功能恢復正常，或是直接放生 Augury。但真的只能如此二擇一嗎？有可能在專案中讓這兩者都能共存併用嗎？

當 Angular Ivy 功能啟用時，Augury 擴充套件成空白且完全無法顯示內容，且在 console 留下 no.probe() 的錯誤訊息。

解決方案

這邊有個方法能讓你的 Angular 專案在啟用 Ivy 和 AoT 這些功能的同時也能使用 Augury 來進行除錯，而這個解決方案不需要你安裝任何新套件、不需要你更改現有的 Angular 程式碼你只需要對 angular.json, package.json 和 tsconfig 這三個設定檔稍做修改。

1. 複製一份 tsconfig.app.json 這個檔案並命名為 tsconfig.augury.json
2. 將底下的設定參數加到對應的檔案中：

加到 tsconfig.augury.json

加到 package.json 的腳本（scripts）

現在打開 angular.json，複製 project.YOUR_PROJECT_NAME_.architect.build 這底下整塊內容，重新將屬性索引值改為 augury，接著照著底下的範例文件做修改：

修改 angular.json

恭喜！現在你可以透過

$ npm run start:angury

來執行 dev-server 了。

Augury 成功執行，功能運作皆正常。

這個指令會開啟一個沒有 Ivy 與 AoT 功能的 Angular dev-server，所以 Angury 當然可以正確無誤地執行；但對於 production build 來說 Angular Ivy 及 AoT 功能還是會如同預期般地被啟用並運作。你也可以執行 npm run start ，去掉 :angury 這個前綴來執行一個具備 Angular Ivy 和 AoT 功能的 dev-server。

後記

這個解決方案並不是長久之道，但我覺得這個方式已經是目前較為簡單且乾淨的做法。好消息是 Rangle 團隊早已開始開發下一代的 Angury，叫做 Angury Labs，我其實有試著裝來用但他並不 work；不過你也是可以自己試試看，說不定對你來說這是個會動且有幫助的解決方案喔！

Buy me a coffee ☕️