移除 View Engine 轉用 Ivy，盤點 Angular 12 的重要更新

作者 | 核子可樂、曉旭

在經歷了多個 beta 與候選版本之後，Angular 12 終於正式發佈了。

Angular 12 版本的最大亮點就是淘汰掉了舊的 View Engine 編譯與渲染管道，轉而採用更爲現代的 Ivy 技術。谷歌將 Ivy 描述爲下一代編譯與渲染管道，能夠顯著提升 AOT（ahead of time）編譯速度。Angular 團隊提到，View Engine 將在後續版本中被徹底移除。目前使用 View Engine 的庫仍可與 Ivy 應用配合使用，但開發團隊建議各位庫作者提早向 Ivy 過渡。

移除 View Engine，轉而使用 Ivy

從去年開始，Angular 就開始默認使用新的渲染和編譯工作管線 Ivy。爲了確保 Angular 能夠提供良好的類型檢查、快速偵測變更，Angular 官方團隊一直在調整靜態檢查和動態構建的平臺。

事實上，從 Angular 9 開始，新的 Angular 應用程序就默認啓用 lvy。爲了支持使用 View Engine 函數庫的應用程序向後兼容，Angular 官方團隊開發了 ngcc 相容編譯器，ngcc 是編譯 View Engine 函數庫的方法，可以讓 Ivy 應用程序方便地使用，ngcc 運作非常高性能，只會在必要的時候被調用。

由於 View Engine 函數庫的存在，Angular 暫時還無法移除舊的實例化，這導致維護成本不斷增加，Angular 整體發展速度也被拖慢。爲了解決這個問題，Angular 官方團隊發佈了 lvy 函數庫發佈計劃，新的應用程序開發可以直接使用 lvy。

據瞭解，目前絕大多數的應用程序都在使用 lvy。仍舊使用 View Engine 函數庫的應用，也可以通過 ngcc 相容編譯器轉換爲 lvy。基於此，Angular 12 啓動了加速轉移計劃，官方移除 View Engine，並且禁止使用 View Engine 創建應用程序的功能，而且新函數庫專案將默認使用 Ivy。

當然大家也不必擔心，爲了確保 Angular 框架和組件的函數庫能夠平滑過渡到 lvy，官網目前還會繼續使用 View Engine，大約會在 Angular 13 徹底完成移除 View Engine。

其它更新亮點

除了移除 View Engine，Angular 12 發行版中還包括其他新功能與重要改進：

• 爲了提高編譯器 CLI 性能，若存在重新定向的源文件，新版本允許進行增量編譯。

• 用於向 TyperScript 類中寫入清晰代碼的 Nullish 合併，現可以與 Angular 模板配合使用。

• Angular CDK 與 Angular Material 共同開放新的 Sass API 接口，可供您通過新的 @use 語法進行使用。在更新至 Angular 12 之後，應用會通過 ng update 進行更新並自動切換爲新的 API。

• 提供相關工具，可使用最新算法將舊版本地化 ID 遷移爲新 ID。

• 各組件現可在 @component 裝飾器的 styles 字段中支持內聯 Sass。

• 現在，運行 ng build 將默認使用生產版本，可節約操作步驟並防止您意外將開發版本部署至應用當中。

• 默認情況下，CLI 將啓用嚴格模式以捕捉開發早期的各種錯誤。

• Webpack 5 模塊捆綁器現已實現生產就緒。

• 不再支持 IE11 瀏覽器。

• 對於編譯器，新版本提供轉換組件樣式資源的支持能力。

• 對於語言服務，新版本僅在模板中提供 Angular 屬性補全功能。

• 對於 compiler-cli，新版本爲請求提供 context 選項以保障屬性數據的類型安全。這項功能可幫助用戶針對各項請求在 HTTP 客戶端中配置攔截器。

• 在動畫方面，當用戶刪除 root 視圖時，現在可以正確刪除其中的 DOM 元素。這是一項重大變化。

• 爲了提高性能，新版本刪除了 DomAdapter 中的多種未使用方法。

• 新版本向 localize-extract 中添加一種新的格式，名爲 legacy-migrate。此格式可用於生成 JSON 文件，進而將舊版消息 ID 映射爲規範 ID。

• 嚴格 null 檢查將報告各可能爲 null 的片段。這同樣是一項重大變化。

• APP-INITIALIZER 令牌的類型有所變更，旨在準確反映 Angular 處理的返回值類型。同樣屬於重大變化。

• 在新版本中，您可以通過 BrowserAnimationsModulewithConfig 禁用動畫。

• 向 FormArray 與 FormGroup 中引入 emitevent 選項。也是一項重大變化。

• 向 routerLinkActiveOptions 中引入更多微調控件。

• 允許您自定義路由器出口實施方法。

• 新版本增加對 TypeScript 4.2 的支持，但對 TypeScript 4.0 與 4.1 的支持功能將被移除。

• 在 HttpParams 上實現了 appendAll() 方法。

• 在表單中，引入最小與最大值驗證器。

• 新版本可導出 HTTP 狀態碼列表。

• 向 Angular 語言服務添加一項功能，允許用戶直接訪問使用模板文件的組件的實際位置。

• 新增的診斷提示將建議您開啓 strictTemplates，藉此在語言服務中獲得檢索編譯器選項診斷程序的方法。

• 新的補丁添加一項 API，用於在文件位置檢索某一模板的模板類型檢查塊（如果有），並選定 TCB 中與發出 TCB 請求的模板節點相對應的 TS 節點。這項功能有助於提高調試效率。

新版本還對大量 bug 做出修復，進一步完善了編譯器、compiler-cli、Bazel 構建工具、路由器以及 Angular 內其他組件的運行質量。

GitHub 鏈接：

https://github.com/angular/angular/blob/master/CHANGELOG.md

參考鏈接：

https://www.infoworld.com/article/3607428/angular-12-arrives-with-pile-of-improvements.html#jump

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/82-N5_piIwItJZtlHXBMWQ