Angular 19 来了，一大波我看不懂的主版本升级！（长文警告）

00. 前言

Angular 19 主版本正式升级，亮点功能如下：

• 
  
• 控制哪些路由在客户端、服务端或构建期渲染，且在预渲染期解析路由参数
  
• 核心响应性原语稳定，引入 linkedSignal 等新原语
  
• 增量水合预览版，支持追求极致性能的用例
  
• 生活质量提升 - 时间选择器组件、样式 HMR 等等！
  

01. 为速度而构建

01-1. 增量水合预览版

增量水合（incremental hydration）允许你使用 @defer 语法对模板局部进行注释，指示 Angular 在特定触发器上惰性加载和水合。

Angular 19 中，你可以在任何使用了 SSR 和完整应用水合的应用中尝试新的增量水合。

请在客户端 bootstrap 中指定：

要将增量水合应用到部分模板，请使用：

01-2. 默认启用事件重播

SSR 应用中，用户事件与下载并执行处理该事件代码的浏览器之间存在鸿沟。event dispatch 解决了这个问题。

event dispatch 在初始页面加载期间捕获事件，并在负责处理事件的代码可用时重播这些事件。

通过配置水合 provider，你可以启用事件重播功能：

今天，我们将事件重播升级到稳定版，并默认为所有 SSR 新应用启用此功能！

01-3. 路由级别的渲染模式

Angular 19 提供了一个 ServerRoute 新接口，允许你配置各个路由应该在服务器端渲染、预渲染还是在客户端渲染：

上述示例中，我们指定在服务端渲染 login 路由，在客户端渲染 dashboard 路由，并预渲染其他所有路由。

服务器路由配置是一个新的配置文件，但它使用 globs 组合现有的路由声明，因此你不必复制任何路由。

过去，没有符合人体工程学的方法可以在预渲染时解析路由参数。

现在，可以使用服务器路由配置无缝实现：

由于 Angular 在注入上下文中执行 getPrerenderPaths，因此你可以使用 inject 在参数解析中重用业务逻辑。

01-4. SSR + Zoneless Angular

Angular 18 实验性支持 zoneless，允许 Angular 不依赖 zone.js 运行。

等待应用的主要原因是待处理的请求和导航，我们决定引入 HttpClient 和 Router 的原语，来延迟将页面发送给用户，直到应用准备就绪。你现在可以在 Angular 19 中尝试这两个包和 zoneless！

此外，我们还提供了一个 RxJS 运算符，用于通知服务堆栈 Angular 仍未完成渲染：

当 subscription 发出新值时，我们将稳定应用，且服务堆栈会将渲染的标记传递给客户端。

02. DX（开发者体验）

02-1. HMR + 即时编辑/刷新

Angular 19 支持开箱即用的样式 HMR（热模块替换），且实验性支持模板 HMR！

之前，每次更改组件的样式并保存文件时，Angular CLI 都会重建应用，并向通知浏览器刷新。

新 HMR 将编译你修改的样式，将结果发送到浏览器，且在不刷新页面和丢失任何状态的情况下修复应用。

Angular 19 默认启用样式 HMR！要尝试模板 HMR，请使用：

要禁用此功能，请将开发服务器选项指定为 "hmr": false，或者使用：

02-2. standalone 默认为 true

Angular 19 提供了一个 schematic，它将作为 ng update 的一部分运行，并自动删除所有 standalone 指令、组件和管道的 standalone 组件元数据属性，且将所有 non-standalone 抽象的 standalone 设置为 false。

02-3. 严格执行 standalone

为了帮助你在项目中实施现代 API，我们开发了一个编译器标志，如果发现不是 standalone 的组件、指令或管道，它就会报错。

要在项目中启用它，请配置 angular.json：

03. 响应性的进化

03-1. 输入、输出和视图查询稳定

我们观察了新的输入、输出和视图查询 API，并将它们升级到稳定版！

为了简化新 API 的采用，我们开发了 schematics，它将转换你现有的输入、输出和视图查询：

请注意，与传统输入相比，signal 输入是只读的，因此如果要设置输入值，则可能需要手动迁移应用的某些部分。

要一次运行所有迁移，你可以使用：

03-2. 引入 linkedSignal

UI 通常仍需跟踪某些更高级状态的可变状态。举个栗子，选择 UI 具有“当前选择”状态，该状态会随着用户进行选择而变更，但如果选项列表变更，那也需要重置。

新增的 linkedSignal 实验性原语创建了一个可写 signal，捕获了这种类型的依赖关系：

linkedSignal 明确了 options 和 choice 之间的关系，而无需求助于 effect。

新 API 有 2 种形式：一种是上述的简化形式，另一种是高级形式，开发者可以在其中访问之前的 options 和 choice 值。

它还有一个高级 API，允许使用更复杂的逻辑，比如只要用户的 choice 存在于新的 options 列表中，就可以维护用户的 choice。

03-3. 引入 resource

目前，Angular 的 signals 主要集中在同步数据上：在 signals 中存储状态、computed 值等。

Angular 19 新增 resource() 实验性 API，这是 signals 与异步操作集成的第一步。

resource 是参与 signal 图的异步依赖，你可以将 resource 视为具有三个部分：

因为现在许多 Angular 应用都使用 RxJS 来获取数据，我们还在 @angular/core/rxjs-interop 中添加了 rxResource，它从基于 Observable 的 loader 创建 resource。

参考文献

[1] Angular 官方博客: blog.angular.dev/meet-angula…