Angular 11——你需要知道的一切

已發表: 2021-03-31

Angular 版本 11 就在這裡，它為開發人員帶來了一些很棒的更新。 從框架到組件和 CLI——一切都更新了。 Angular 團隊嘗試在每次更新中帶來一些重大變化。 比如 Angular 9 發布了 iVY，Angular 9.1 提供了對 Typescript 3.8 的支持，Angular 10 對 Angular Material UI 組件庫進行了修改。今天，我們將探索 Angular 11 的特性。讓我們深入了解然後。

Angular 11 – 功能和更新

這個版本的亮點是更嚴格的類型、字體的自動內聯和路由器性能的改進。 將為更新的應用程序啟用默認的自動字體內聯。 改進的路由器性能確保應用程序更快。 除此之外，我們將在下面列出 Angular 11 的更多內容。

#Component 測試工具

在 Angular 版本 9 中，社區引入了組件測試工具。 這些提供了一個強大的 API 表面來幫助測試 Angular Material 組件。 它允許開發人員使用支持的 API 與組件進行交互。

在版本 11 中，每個組件都有一個組件線束。 它帶來了許多性能改進、更新甚至新的 API。 現在，parallel 函數可以輕鬆處理測試中的異步操作，因為開發人員可以與組件並行運行多個異步交互。 例如，手動更改檢測功能只需在單元測試中禁用自動更改檢測，就可以更好地控制檢測。

#更新熱模塊更換支持

熱模塊替換或 HMR 是一種允許在不刷新完整瀏覽器的情況下替換模塊的機制。 這是一個古老的概念，但 Angular 11 增加了更多。

Angular 11 通過所需的代碼更改和配置提供對 HMR 的支持。 它允許 CLI 在使用 ng serve 啟動應用程序時啟用 HMR。 需要以下命令才能開始：

 ng服務-hmr

因此，CLI 命令顯著減少了配置 HMR 所需的工作量。 開發人員插入此命令後，只要本地服務器確認 HMR 處於活動狀態，控制台就會顯示一條消息。

在開發過程中，模板、樣式和組件的最新更改將自動更新到正在運行的應用程序中。 它不需要刷新整個頁面，從而提高了開發人員的工作效率。

#更新的語言服務預覽

Angular 語言服務提供了各種有用的工具，根據任何網站開發公司的專業人士的說法，這些工具可確保輕鬆進行 Web 開發。 更新後的語言服務將為開發者提供更準確的體驗。 他們可以通過更好的渲染器和視圖引擎檢查事情將如何工作的預覽。 語言服務將能夠正確推斷模板中的泛型類型，就像 TypeScript 編譯器所做的那樣。

#自動內聯字體

Angular 11 提供自動字體內聯，有助於將 Google 圖標和字體轉換為索引 HTML 中的內聯。 在編譯期間，Angular CLI 將下載並嵌入應用程序中鏈接和使用的內聯字體。 默認情況下啟用這些以進行配置。

這在使用版本 11 構建的應用程序中是默認設置。因此，為了利用這種優化的優勢，開發人員必須首先更新應用程序。

#Webpack 5 支持

Webpack 用於將大量文件編譯成單個小文件或包。 它的最新版本——Webpack 5 是幾個月前發布的。

Angular 11 為 webpack 5 提供實驗性支持，開發人員可以使用它來嘗試新事物。 一旦 webpack 變得更加穩定，Angular 團隊可能會擴展實驗支持以實現更小的包和更快的構建。

這是使用 webpack 5 的命令。將以下行添加到 package.json 文件中：

“決議”：{
 “網絡包”：“5.4.0”
 }

#Shift 到 ESLint

TSLint 一直是 Angular 開發服務提供商使用和推薦的最流行的列表工具之一。 最近，職責交給了 ESLint。

在 Angular 11 中，Codelyzer 和 TSLint 已被正式棄用，它們將在未來的版本中被刪除。 最新版本引入了從 TSLint 遷移到 ESLint 的 3 步方法：

第 1 步 - 運行 ng add @angular-eslint/schematics
第 2 步 – 現在，運行命令 ng g @angular/schematics:convert-tslint-to-eslint {{YOUR PROJECT NAME}}
第 3 步 – 刪除根級 tslint.json。

#更快的構建

Angular 11 帶來了根本性的速度改進。 NGCC 更新過程現在比以前快 2-4 倍。 因此，開發人員無需花費很長時間等待完成構建和重建。

#TypeScript 4.0 支持

Angular 11 支持 TypeScript 4.0。 現已放棄對 TypeScript 3.9 的支持。 這背後的主要原因之一是提高構建速度。 最新版本確保比以前的版本更快、更流暢的構建。

#更好的記錄和報告

最新的 Angular 版本對構建器階段報告進行了各種更改，使其在開發過程中更加有用。 CLI 輸出包含更多用戶友好和可讀的信息。

#其他變化

除了上面提到的之外，最新的 Angular 版本還帶來了其他一些變化，比如：

  • 服務工作者改進
  • 新的自動化原理圖和遷移
  • 對各種命名插座的延遲加載支持
  • 完全刪除對 Internet Explorer 9,10 和 IE 移動支持的支持
  • preserveQueryParams在路由器中被刪除。 相反，開發人員可以使用queryParamsHandling=”preserve”
  • 更嚴格的類型現在內置在管道中
  • Angular CLI 可以生成解析防護
  • formatDate 函數支持 ISO 8601 週編號年份格式
  • ICU 中的表達式現在再次進行類型檢查
  • 對於任何類型為未定義的輸入，異步管道不再返回未定義。

如何更新到 Angular 11

您可以聘請 Angular 開發人員將您的應用程序更新到 Angular 11。開發人員需要運行以下命令：

ng 更新 @angular/cli @angular/core

覺得這篇文章有用嗎？ 與您的熟人分享，讓他們了解有關 Angular 11 的所有信息。