Angular 10 – 你必須知道的

已發表: 2020-10-07

Angular 最近於 2020 年 6 月 24 日發布了一個新版本。它在發布 Angular 9.0 版 4 個月後才推出。 最新的 Angular 10 是一個測試版——這意味著 Angular 團隊即將發布這個由谷歌開發的、面向打字稿的框架的最新版本。

如果您是 Web 開發人員或希望為您的企業開發 Web 應用程序的人，您必須知道這個新版本必須提供什麼。 由於測試版是在發布最後一個版本後的 4 個月內推出的，您可能想知道它是成功還是失敗！ 我們在這裡幫助您找到答案。 讓我們仔細看看 Angular 10 的主要特性。

Angular 10 的特點

儘管 Angular 團隊堅持認為最新版本將主要關注質量工具和生態系統，而不是引入過多的新功能，但我們進行了廣泛的研究，並為您提供了您可以從該版本中獲得的價值的完整列表. 那我們來看看吧。

  • 新的日期範圍選擇器

Angular Material UI 組件庫現在配備了新的日期範圍選擇器。 不確定它是什麼？ 可以將日期範圍選擇器附加到網頁。 它會彈出日曆以選擇時間、日期或任何預定義的時間段，如“過去 20 天”。

如果您希望您的用戶選擇一個日期範圍而不僅僅是一個日期，您可以使用 mat-date-range-picker 和 mat-date-range-input 組件。

  • 可選的更嚴格設置

Angular 10 在使用 ng new 創建新工作區時具有更嚴格的項目設置。 啟用此標誌後，它將在您的項目中引入一些新設置，例如提高可維護性、允許 CLI 在您的應用程序中執行高級優化、幫助提前捕獲錯誤等。

這是嚴格標誌的基本工作範圍：

- 將模板類型檢查轉為嚴格
- 在 TypeScript 中啟用更嚴格
- 配置 linting 規則以防止使用“any”作為類型聲明
- 減少默認捆綁預算

  • 關於 CommonJS 導入的警告

使用 CommonJS 打包的依賴項會使包變大，從而減慢應用程序的速度。 一旦構建拉入其中一個這樣的包，Angular 10 就會警告開發人員。 這樣，他們可以讓他們的依賴項知道他們更喜歡 ECMAScript 模塊 (ESM) 包。

  • 更新

對 Angular 的依賴項進行了一些重大更新，以便與 JavaScript 生態系統同步。 這些如下：

-TypeScript 更新到 TypeScript 3.9。 它可以幫助團隊致力於提高性能和穩定性。
-TSLint 更新到 v6
-TSLib 更新到 v2.0

項目佈局也已更新。 因此，您可以在 Angular 10 中看到一個新的 tsconfig.base.json 文件。該文件更好地支持 IDE、構建工具解析類型和包配置。

除此之外，最新的 Angular 版本還支持加速編譯器、編輯體驗、提示修復和完成等功能。

  • 改進的 ngcc 性能

這個 Angular 10 特性促進了基於程序的入口點查找器的實現。 這可以處理只有 tsconfig.json 文件定義的程序才能到達的入口點。 此外，依賴項隱藏在入口點展覽中，無需每次都計算即可讀取。

每個包的基本路徑以及入口點不需要存儲在文件中。 因此應用程序不需要存儲不必要的空數組。 此功能有助於在入口點顯示和減小文件大小，即使對於大型節點模塊也是如此。 這顯著提高了性能。

  • 合併多個文件

最新的 Angular 版本支持合併多個翻譯文檔，沒有任何麻煩。 在以前的版本中，這些只能加載一個文件。 現在，用戶可以為每個區域指定多個文檔，並且所有文件中的事務可以通過消息 ID 合併。 最重要的文檔將放在最前面，稍後再進行後備翻譯。

  • 異步鎖定超時

關於 Angular 10 的另一個有趣的事情是在這個版本中配置了異步鎖定超時。 這支持 ngcc.config.js 文件以調整 AsyncLocker 中的重試延遲和重試嘗試。 集成測試使開發人員能夠監控超時，使用 ngcc.config.js 文件來減少超時跨度並防止測試花費很長時間。 難怪 Web 應用程序開發公司的專業人士欣喜若狂地歡迎最新的 Angular 版本！

  • 路由器

CanLoad 守衛可以返回到最新 Angular 版本中的 UrlTree。 返回 UrlTree 的 CanLoad 守衛使任何前沿導航無效，進而有助於重定向。 這將當前行為與可用的 CanActivate 守衛相匹配——這些也在此處添加。 但是，這不會對預加載產生任何影響。

  • 編譯

Ahead-of-Time (AOT) 在構建時編譯應用程序及其庫。 這是自 Angular 9 以來的常見做法。它可以在構建期間轉換代碼，甚至在瀏覽器下載並隨後運行該代碼之前。 自然，這可以確保在瀏覽器中更快地呈現。 編譯器通過在應用程序 JavaScript 中內聯外部 HTML 模板和 CSS 樣式表來消除對源文件的單獨 AJAX 請求。

Angular 10 中的 AOT 發生了一些明顯的變化：

1. 它的增量編譯有助於達到更好的構建時間
2. 生成的代碼高度兼容tree shaking，可以達到更好的構建大小
3. 該版本使您能夠探索一些新功能，例如延遲加載組件而不是模塊、元編程或高階組件、不基於 Zone.js 的最新變更檢測系統等。

  • 錯誤修復

在這個版本中，已經完成了許多錯誤修復。 其中包括在編譯器中刪除任何未尋址的範圍實例，在導入不存在的符號時解決與遷移相關的錯誤，識別受 TestBed 中覆蓋影響的模塊等。 此外，核心中還有一個解決方法，用於修復 Terser Inlining 錯誤。

  • 更好的社區參與

Angular 已經擁有一個龐大的全球開發社區，他們始終如一地為整個範圍內的 Angular 項目提供價值。 最近，該組織本身正計劃採取策略並進行投資以增強社區的力量並使平台變得更好。

  • 棄用和刪除

Angular 包格式不再包含 FESM5 或 ESM5 包。 這可以讓您在 Angular 庫和包中運行 yarn 或 npm install 時節省 119MB 的下載和安裝時間。 這些格式可以被丟棄，因為任何支持 ES5 的降級都是在開發過程結束時進行的。

此外，Angular 組織已棄用對舊版瀏覽器（如 IE9、10 和 Internet Explorer Mobile）的任何支持。

  • 其他變化

Angular 10 帶來了一些突破性的變化。 例如，Logic 會根據超出午夜的格式化日期間進行更新。 如果您的應用程序使用 formatDate 或 DatePipe 甚至 b 和 B 格式代碼，它將受到此更改的影響。

另一個變化是任何返回 EMPTY 的解析器都將取消導航。 開發人員必須使用一些特定的值更新解析器，例如 default!Empty。

Angular NPM 不包含一些 jsdoc 註釋來支持 Closure Compiler 的高級優化。 那些使用 Closure Compiler 的人應該更好地使用直接從源代碼構建的 Angular 包，而不是使用 NPM 上發布的版本。 暫時，用戶可以使用他們當前的構建管道。

在這個版本中，在從 ServiceWorker 緩存中檢索源時會忽略 Vary 標頭。 即使它們的標題不相似，這也會導致檢索源。 如果應用程序必鬚根據請求標頭區分其響應，請確保將 Angular ServiceWorker 配置為避免緩存任何受影響的資源。

關於任何未知元素的警告現在都被標記為錯誤。 這不會破壞您的應用程序，但它可以啟動期望通過 console.error 記錄的工具。

如何更新到 Angular 10

要升級到最新版本的 Angular，您可以使用以下命令：

ng 更新 @angular/cli @angular/core

這是更新到 Angular 10 版的明確指南。但是，如果沒有技術專業知識，該命令可能沒有任何用處。 聘請專業的 Angular 開發服務以成功更新到 Angular 10。

結論
Angular 10 提供的所有便利可能會說服您升級您的應用程序框架版本。 相信我們，這是值得的。