Angular 17 的最新改進：您需要了解的一切

根據 Statista 進行的研究，Angular 是最常用的 Web 開發框架，有 17.46% 的受訪者使用^[i] 。 為了保持這一地位、提高效能並簡化編碼，Angular 團隊於 2023 年 9 月 11 日發布了新版本 – Angular 17。

新的 Angular 框架以 Google 工程總監兼 Angular 團隊負責人 Sarah Drashner 的願景為指導。 它帶來了漸進式改進，確保向後相容性，同時符合前端框架的最新趨勢。

借助 Angular 17，企業和開發人員可以想像增強的開發體驗。 在這裡，新的控制流程語法、改進的伺服器端渲染 (SSR) 支援、由 esbuild 增強的 CLI 以及其他更新有助於實現更流暢、更動態的開發工作流程。

在這篇文章中，您可以解讀 Angular 17 Web 開發框架中的新改進和更新。 您還將了解為什麼開發人員應該利用它，促進協作，鼓勵程式碼可重複使用性，並確保創建可擴展和可維護的 Web 應用程式。

讓我們開始吧！

Angular 17 的主要特性與改進

1. 面向未來的文檔

Angular 17 在 angular.dev 上開發了新主頁，對其文件進行了重大增強。 此次改革包括改進的結構、更新的指南、豐富的內容以及促進 Angular 和 Angular 命令列介面 (CLI) 互動式學習之旅的尖端平台。

angular.dev 的 Beta 預覽版標誌著一個新時代的開始，並計劃將其作為 Angular 18 版本的預設網站。其中的亮點包括 WebContainers，使用戶能夠在現代 Web 瀏覽器中直接利用 Angular CLI 的強大功能。 這進一步保證了未來的沉浸式文件體驗。

2. 內建控制流程

在 Angular 17 中，一個顯著的增強是引入了新的控制塊語法，取代了 *ngIf、*ngFor 和 *ngSwitch 等傳統的結構指令。 這種演變為開發人員提供了更大的靈活性並提高了模板程式碼的可讀性。

例如，@if 和 @else 區塊提供了一種使用邏輯表達式有條件地呈現內容的更清晰的方法。 @for 區塊簡化了集合的迭代，使程式碼更具表現力和簡潔。 此外，@switch、@case 和 @default 區塊促進了高效的控制流，增強了對多種條件的處理。

為了接受這些改進，開發人員可以使用提供的原理圖來遷移現有範本。 這將為 Angular 17 中的模板開發帶來更現代、更簡化的方法。

3.內建@for循環

Angular 17 中內建的 @for 循環功能描述了開發人員體驗和渲染速度的顯著改進。 該語法透過強制使用「track」進行有效的更改檢測，解決了依賴 *ngFor 的應用程式中常見的效能瓶頸。 它還確保更快的渲染過程。

與它的前身不同，「追蹤」功能作為表達式無縫地合併到模板中，從而無需在組件類別中使用額外的方法。 值得注意的是，內建的 @for 循環還提供了一種方便的快捷方式，用於透過可選的 @empty 區塊處理具有零項的集合。 此功能不僅簡化了開發，還顯著增強了 Angular 應用程式的效能，標誌著框架發展中的一個值得注意的里程碑。

4. 可延遲視圖

在 Angular 17 中，為了回應 Angular 社群對延遲載入元件、指令和管道的直覺機制的請求，引入了一項名為 Deferrable Views 的重大增強功能。

這個新功能旨在讓依賴延遲載入的過程更加直覺和方便。 可延遲視圖使開發人員能夠以聲明方式延遲載入模板的部分，直到需要它們為止，從而優化初始套件大小並縮短應用程式的初始載入時間。 這是透過在模板中使用新的“@-syntax”控制流語法來實現的。

由於可延遲視圖為延遲載入提供了內建的託管解決方案，因此開發人員可以表達他們的意圖，而無需管理詳細的動態匯入、交叉觀察器或事件處理程序。 此功能還支援預取，以提高資源可用性。

此外，開發人員可以使用整合觸發器和自訂條件來指定延遲載入的時間和方式。 此外，可延遲視圖減少了樣板程式碼，在幕後自動處理依賴關係管理。

5. 增強的伺服器端渲染（SSR）

Angular 17 的伺服器端渲染功能使開發人員能夠提升應用程式效能和使用者體驗。 Hydration Boost 功能簡化了客戶端 JavaScript 水合過程，最大限度地減少閃爍並確保更平滑地過渡到互動式網頁。

Angular 17 也採用了 SSR 的標準化 EcmaScript 模組 (ESM) 格式，簡化了建置並增強了與流行工具的兼容性。 此外，它還專注於透過程式碼分割技術減少 SSR 套件大小，從而加快伺服器回應速度並增強搜尋引擎優化。 這些進步使 Angular 17 成為建立高效能和 SEO 友善的 Web 應用程式的絕佳選擇。

6. 訊號穩定

Angular 17 引入了一項突破性的開發，提高了 Signals 的穩定性，這是反應性愛好者的關鍵工具。 Signals 擺脫了「開發者預覽」的標籤，現在成為管理狀態和促進元件更新的強大解決方案。

訊號與變化檢測的整合。OnPush 帶來了一定程度的精度。 這可確保元件僅在其特定訊號發生變化時刷新，從而透過避免不必要的重新渲染來優化效能。 停用 mutate 方法以支援不可變更新，進一步增強了維護狀態歷史記錄的可預測性和清潔性。 雖然 Signals 備受關注，但仍在開發者預覽版中的 Effects 讓我們得以一睹 Angular 狀態管理的未來，為非同步操作提供強大的功能。

從本質上講，Angular 17 為開發人員提供了一套完善的工具集，包括穩定的 Signals、OnPush 整合、不可變的更新以及不斷發展的 Effects 潛力。 這最終促進了結構良好的應用程式的創建。

7. 使用 esbuild 進行性能構建

Angular 17 中採用 esbuild 標誌著在增強 Angular 專案建構效能方面取得了重大進步。 Angular CLI 最初依賴 Webpack，現已過渡到利用 esbuild，這是一種新工具，以其用戶友好性和卓越的速度而聞名，每週下載量超過 20,000 次。

esbuild 的整合在 Angular 16 中作為開發者預覽版實現，現已成熟為 Angular 17 中的穩定實現。此整合已成為透過 Application Builder 的新專案的預設建構器。 對於現有項目，鼓勵開發人員考慮透過更新 angular.json 中的建構器條目來切換到 esbuild。

透過這種集成，ng 服務和 ng 建置操作都展示了速度的大幅提升，僅在必要時利用 Vite 開發伺服器進行高效的 npm 套件建置。 CLI 團隊整合了各種效能優化，進一步有助於加速建置流程，ng build 通常可以實現 2 到 4 倍的速度提升。 這項轉變強調了 Angular 致力於為開發人員提供不僅簡化工作流程，還能顯著提高專案建置效率的工具。

8. 獨立組件

「獨立元件」是 Angular 17 中的一項突破性功能，無需父模組即可建立和使用元件。 在這個範式轉移中，根元件（以「AppComponent」為例）使用元件裝飾器中的「standalone: true」屬性標記為獨立元件。 此屬性表示該元件獨立於父模組運作。 此外，此元件不依賴模組，而是利用「imports」數組引入必要的依賴項，例如路由器模組。

然後使用“bootstrapApplication”函數來啟動應用程序，這與傳統的以 NgModule 為中心的方法不同。 獨立元件新發現的靈活性促進了模組化和封裝的開發風格，展示了 Angular 對發展和增強元件架構的承諾。

如何遷移到 Angular 17？

若要將現有的 Angular 應用程式升級至版本 17，請依照下列步驟操作：

• 首先，使用指令「npm install -g @angular/cli@17」將 Angular CLI 全域更新到版本 17。

• 接下來，透過執行「ng update @angular/core」來更新 Angular 核心包。

• 如果您使用其他 Angular 包，請使用程式碼單獨更新它們，例如 Angular Material 的“ng update @angular/material”。

• 然後，徹底測試您的應用程序，以確保其在更新後按預期運行。

您可以在此處遵循一些提示，包括在主要更新之間升級到次要版本、在升級之前備份程式碼和資料庫以及檢查第三方程式庫相容性。 如果升級過程中出現問題，您也應該查閱 Angular 文件和社群論壇以獲取協助。 這些簡化的步驟將確保順利過渡到最新的 Angular 版本，同時最大限度地減少潛在的挑戰。

準備好使用 Angular 創建強大、功能豐富的現代應用程式了嗎？ 與我們的專家交談！

參考：

^[i]統計數據