Angular 現代化：Angular 19 的新增功能

Angular 19 已正式發布，它包含一系列旨在提高開發人員體驗、效能和適應性的功能。

在本文中，我將向您介紹主要亮點以及是什麼使 Angular 19 成為現代 Web 開發的關鍵一步。

1. 增量補水：SSR 的遊戲規則改變者

Angular 19 中引入的 增量水化 將伺服器端渲染 (SSR) 提升到了新的高度。與傳統的完全水合方法不同，增量水合允許伺服器渲染的元件僅在進入視窗或變為互動式時才進行水合。

這會帶來更快的載入時間和更好的使用者體驗。此功能目前處於開發者預覽版，但它在優化初始負載和提高 Lighthouse 分數方面顯示出巨大的前景。

為了實現這一目標，Angular 與 Chrome Aurora 合作，帶來了更無縫的 SSR 體驗，可適應現實世界的使用，重點關注惰性水合作用。開發人員現在可以使用 @defer 等指令來準確控制元件何時應進行水合，從而使過程非常有效率。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

2. 事件重播：確保使用者互動流暢

伺服器端渲染應用程式中的一個常見問題是使用者互動和負責處理正在載入的互動的 JavaScript 之間的延遲。

事件重播，現在在 Angular 19 中預設啟用，在初始載入期間捕獲使用者事件，並在必要的 JavaScript 可用時重播它們。即使應用程式仍在保濕過程中，這也可以確保流暢的用戶體驗。

事件調度由 Google 搜尋 (Wiz) 使用的同一庫提供支持，並且已經過數十億用戶的測試。

為了啟用事件重播，Angular 在水合提供者中使用以下設定：

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

這可以確保在 JavaScript 完全載入之前發生的任何使用者互動都不會遺失，從而提供無縫的體驗。

3. 路由級渲染模式：對渲染的細粒度控制

Angular 19 引入了路由級渲染模式，它允許開發人員指定如何渲染應用程式中的各個路由——無論是在伺服器上、客戶端上還是在建置過程中預先渲染。

這提供了對渲染策略的細微控制，讓開發人員可以根據每個路線的特定需求來優化效能和 SEO。

範例： 登入路由可以在伺服器端呈現，以加快初始載入時間，而儀表板路由可以在客戶端呈現，以增強互動性。這種靈活性有助於確保應用程式的每個部分都針對其預期用例進行最佳化。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular 還提供了一種在預渲染期間解析路由參數的簡單方法，允許高度可自訂的預渲染頁面：

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

這個新介面ServerRoute讓開發人員可以更好地控制內容的交付方式，從而改善使用者體驗和 SEO。

4. 即時熱模組更換 (HMR)

Angular 19 引入了即時 HMR，允許更新樣式和模板而無需重新加載整個應用程式。這意味著開發人員可以立即看到更改的效果，從而使開發週期更加順暢和更快。 v19 中預設啟用樣式的熱模組替換！要嘗試模板的 HMR，請使用：

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

要停用此功能，請指定 "hmr": false 作為開發伺服器選項，或使用：

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. 無區域支持：持續發展

六個月前，Angular 引入了實驗性的 zoneless 支援。從那時起，Angular 一直在迭代 API 並對其進行增強——添加對伺服器端渲染的支援並改善測試體驗。

Angular 與 Google Fonts 團隊合作，使其應用程式實現無區域化並評估開發人員體驗。結果超出了預期，但在將此 API 移至開發者預覽版之前，仍有一些改進工作。

Angular 19 繼續推動未來，無區操作成為預設操作，顯著簡化變更偵測並使應用程式更加精簡。

要嘗試無區域，請使用以下設定：

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. 關聯訊號：具有情境意識的反應狀態

最酷的新功能之一是連結訊號。借助此功能，即使資料更新，捆綁在一起的訊號也能保持其關係。這對於多個資料點需要動態保持同步的場景特別有用。例如，維護從另一個反應來源派生的下拉清單或選擇的狀態現在更加簡單，並且需要更少的樣板檔案。

NG_HMR_TEMPLATES=1 ng serve

linkedSignal API 提供了一種簡單的方法來表達有狀態元素之間的依賴關係，而無需借助效果。新的 API 有兩種形式：簡化版本（如圖所示）和進階版本，使開發人員能夠存取連結訊號和來源訊號的先前值。

7. Angular 材質升級

Angular Material 在 Angular 19 中也得到了重大升級。現在有一個新的、更可自訂的主題 API，允許開發人員輕鬆覆蓋樣式並調整 Angular Material 組件的外觀和感覺，而無需深入研究嵌套CSS。每個組件的文件還包括一個樣式選項卡，以便更輕鬆地參考如何進行這些更改。

萬眾期待的拖放元件終於原生添加到了 Angular Material 中，讓開發者無需依賴第三方函式庫即可實現複雜的拖放互動。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

自訂各個元件：

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

8. 訊號遷移腳本

由於內建的遷移腳本，現在將您的應用程式遷移到新的基於訊號的反應性模型變得更加簡單。這些腳本有助於將您現有的輸入、輸出和查詢轉換為使用訊號而不是舊的 Angular 裝飾器，從而確保您的應用程式以最少的努力保持現代化。

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

9. 增強的內容安全策略

安全性是此版本的另一個重點。 Angular 19 引入了對自動 CSP（內容安全策略）的支持，它會自動向您的應用程式添加安全的 CSP 配置，以預設防止 XSS 攻擊和其他漏洞。這是透過更少的手動配置實現更好的安全實踐的重要一步。

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Angular 測試的未來

最後，關於測試的一個重要說明- Karma 已被棄用，取而代之的是更現代的工具，例如Jest 和Web Test Runner 。到 2025 年中期，Karma 將不再受支持，這使開發人員有充足的時間遷移到更可靠的測試設置，該設置與現代 Angular 生態系統的其他部分順利整合。

總結

Angular 19 不只是一個更新；更是一個更新。這是一個具有前瞻性的版本，針對開發人員和使用者體驗進行了最佳化。憑藉增量水合、事件重播、路線級渲染模式、即時HMR、無區域的轉變以及大量生產力增強等功能，該版本使Angular 更接近其理想——一個現代、高性能、開發人員友好的框架.

如果您想遷移或開始一個新項目，Angular 19 提供了堅實的基礎，支援尖端功能和不斷發展的最佳實踐。讓我知道您最感興趣的功能是什麼，或者如果您對在專案中採用 Angular 19 有任何疑問！

以上是Angular 現代化：Angular 19 的新增功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！