Angular 19 RC is now available for preview, with the official release scheduled for November 19, 2024. This article covers the most important new features based on the RC version — Incremental Hydration and Template HMR — as well as further refinements to route-level rendering modes.

This article is based on Angular 19 RC; the API may differ slightly from the final release.

Incremental Hydration

Angular 17 introduced non-destructive SSR hydration, but it was still full hydration — all components on the page are activated simultaneously. Angular 19 introduces Incremental Hydration: components can hydrate on-demand and lazily, similar to @defer block lazy-loading logic.

// app.config.ts：开启增量水合（需要同时开启 SSR + 非破坏性水合）
import {
  provideClientHydration,
  withIncrementalHydration,
} from "@angular/platform-browser";

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      withIncrementalHydration(), // 开启增量水合
    ),
  ],
};

在模板中使用 @defer 控制水合时机：

<!-- 服务端渲染，但客户端仅在可见时才水合 -->
@defer (hydrate on viewport) {
<heavy-analytics-chart [data]="chartData" />
}

<!-- 用户交互时才水合 -->
@defer (hydrate on interaction) {
<rich-text-editor [(content)]="body" />
}

<!-- 立即水合（默认行为）-->
@defer (hydrate immediately) {
<critical-header />
}

<!-- 永不水合（纯静态内容）-->
@defer (hydrate never) {
<static-footer />
}

增量水合的好处：

• 服务端输出完整 HTML（SEO 友好）
• 客户端只水合用户可见/交互的部分
• 首次交互时间（TTI）大幅缩短
• 对于内容密集型页面（新闻、博客）效果最明显

Template HMR (Hot Module Replacement)

Angular 19 officially supports hot update of component templates — after modifying a .html template file, only the corresponding component's view is updated without refreshing the entire page, preserving application state:

ng serve
# 修改 app.component.html → 仅更新 AppComponent 的视图，状态保留
# 修改 product-card.component.html → 仅更新所有 ProductCard 实例
# 修改 .ts 文件 → 仍然全页刷新（组件逻辑变更，状态重置）

这对表单密集型应用特别有价值——开发中反复调整表单布局时，不再因 HMR 导致已填写的数据丢失。

Route-Level Rendering Modes (Stabilized)

Angular 18 引入、19 进一步稳定的路由级渲染模式：

// app.routes.server.ts
import { RenderMode, ServerRoute } from "@angular/ssr";

export const serverRoutes: ServerRoute[] = [
  {
    path: "", // 首页：预渲染（构建时生成静态 HTML）
    renderMode: RenderMode.Prerender,
  },
  {
    path: "blog/:slug", // 博客文章：预渲染（需要提供所有可能的 slug）
    renderMode: RenderMode.Prerender,
  },
  {
    path: "dashboard", // 仪表盘：服务端渲染（每次请求动态生成）
    renderMode: RenderMode.Server,
  },
  {
    path: "profile", // 个人主页：纯客户端渲染
    renderMode: RenderMode.Client,
  },
  {
    path: "**", // 其余路由：SSR 兜底
    renderMode: RenderMode.Server,
  },
];

linkedSignal Officially Stable (Expected)

Angular 18.2 引入的实验性 linkedSignal() 预计在 19 中稳定：

// Angular 19 中 linkedSignal 预计去掉实验标记
import { linkedSignal } from '@angular/core';

@Component({ standalone: true, ... })
export class TabsComponent {
  tabs = input.required<Tab[]>();

  // 当 tabs 变化时自动重置到第一个 tab，但用户切换后本地状态有效
  activeTab = linkedSignal(() => this.tabs()[0]);
}

Zoneless Change Detection: From Experimental to Recommended

Angular 19 中 Zoneless 模式从"实验性"提升为"开发者预览"：

// Angular 18：provideExperimentalZonelessChangeDetection()（实验性）
// Angular 19：provideZonelessChangeDetection()（开发者预览，去掉 Experimental）
import { provideZonelessChangeDetection } from "@angular/core";

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

Summary

Angular 19 的增量水合是 SSR 性能的重大提升，结合 @defer 语法，开发者可以精细控制哪些内容需要立即激活、哪些延迟激活。模板 HMR 则是对开发体验的直接改善。如果你在关注 Angular 的 SSR 能力，Angular 19 值得认真评估。正式版 11 月 19 日发布，RC 阶段可以开始在测试环境中验证。