[译]发布 Angular v21

g 对于开发者来说，这是一个多么令人兴奋的时代！随着 Web 开发中 AI 方面的所有激动人心的发展，感觉我们每天都在开启新的冒险。这与我们 v21 发布活动的主题完美契合，该活动提供了对 Angular v21 最佳功能的概述。

随着 v21 的发布，Angular 成为了您日常冒险的更强大伙伴------为您提供 Angular 框架的稳定性，同时使您能够构建可扩展且适合每个人的强大 AI 驱动应用程序。

Angular v21 为您提供了许多期待已久的工具，以丰富您的工具箱，并确保您拥有最佳的开发者体验，无论是使用代理和 AI 辅助进行编码，还是更喜欢仅与您的 IDE 一起编写、调试和测试代码。

亮点包括：

• 我们正在推出实验性的 Signal Forms，提供一种基于 Signals 的新型可扩展、可组合和响应式表单体验。
• Angular Aria 正式进入开发者预览版，为您提供以可访问性为优先考虑的 headless 组件，您可以自由进行样式定制。
• 您的 AI 代理可以使用 Angular 的 MCP 服务器，现在包含七个稳定和实验性工具------使 LLMs 能够从第一天起就使用新的 Angular 功能。
• Angular CLI 已将 Vitest 集成作为新的默认测试运行器。Vitest 支持现已稳定并可用于生产。
• 新的 Angular 应用程序不再默认包含 zone.js！

还有更多精彩内容------让我们深入探索！

实验性 Signal Forms 已上线

我们自豪地宣布，现在您可以试用 Signal Forms，这是一个实验性库，它基于 Signals 的响应式基础，让您能够管理表单状态！

使用 Signal Forms，表单模型由一个 Signal 定义，该 Signal 会自动与绑定到它的表单字段同步，从而提供一种符合人体工程学的开发者体验，并确保访问表单字段时的完全类型安全。

强大的、基于模式的集中式验证逻辑已内置 🎉

开始使用，创建一个表单模型并将其传递给 form() :

import { form, Field } from '@angular/forms/signals';

@Component({
  imports: [Field],
  template: `
    Email: <input [field]="loginForm.email">
    Password: <input [field]="loginForm.password">
  `
})
export class LoginForm {
  login = signal({
    email: '',
    password: ''
  });
  
  loginForm = form(this.login);
}

现在您可以使用 [field] 指令将字段绑定到模板。电子邮件验证或正则表达式匹配等典型验证模式已经内置，自定义验证器让您能够创建更强大的验证机制。

绑定到自定义组件是基于 Signals 的，比以往任何时候都更容易，不再需要 ControlValueAccessor 。

开始使用，请查看必备的 Signal Forms 指南或完整文档。

我们很高兴您能开始使用 Signal Forms 进行构建。Signal Forms API 目前仍处于实验阶段，我们将根据反馈进行迭代。请尝试使用并告诉我们您的想法。

可访问组件 --- 使用 Angular Aria 打造您的专属风格

我们激动地宣布，我们正在发布我们新的现代库的开发者预览版，该库用于常见的 UI 模式。我们为 Angular Aria 将可访问性作为首要任务。为了开始，您将获得一套包含 8 种 UI 模式、涵盖 13 个组件的集合，这些组件完全未进行样式设置，并且可以自定义您的样式。

Angular Aria 使用现代 Angular 指令，基于 Signals，并建立在我们在构建响应式可访问组件方面的丰富经验之上。

我们推出的 8 种模式是：

• Accordion 手风琴
• Combobox 组合框
• Grid 网格
• Listbox 列表框
• Menu 菜单
• Tabs 选项卡
• Toolbar 工具栏
• Tree 树

Angular Aria 包含你可以自行定制的复杂组件，例如多级独立菜单:

通过运行 npm i @angular/aria 安装这个新库。然后，访问我们的完整 Angular Aria 指南，该指南提供所有组件的使用信息和代码示例，并展示你可以复制粘贴以尝试不同外观的皮肤。

Angular 团队现在提供三种不同的方式来帮助你使用和开发组件：

• 使用 Angular Aria 创建可访问的、headless 组件，你可以根据自己的喜好自由进行样式设计
• 使用 CDK 来包含你可以在自己构建的组件中使用的拖放等行为原语。
• 使用 Angular Material 来获取一套遵循 Material Design 原则的、预先样式化的组件库。你可以通过自定义主题来调整这些组件。

我们期待你使用 Angular Aria 后的反馈，以及你用它将构建出什么。

为您的 AI 代理提供更多工具------借助 Angular 的 MCP 服务器

为了确保您准备好迎接 AI 时代，我们希望确保开发者拥有合适的工具。我们希望提供适合开发者当前工作方式的工具，并助力工作方式的演变。

在 v20.2 版本中，我们推出了 Angular CLI 内置的 MCP 服务器，以确保 AI 代理拥有 Angular 开发所需的所有上下文，我们自豪地宣布，MCP 服务器现已稳定！

Angular MCP 服务器为您提供一套工具，为 AI 代理提供关于现代 Angular 和您应用的正确上下文，甚至帮助您成为更好的开发者。您可以使用 MCP 服务器：

• 获取基本背景 ：get_best_practices 工具提供 Angular 最佳实践指南，而 list_projects 工具会查找工作区中的所有 Angular 项目。
• 获取最新信息 ：search_documentation 工具能够通过查询官方文档来回答 Angular 相关问题，find_examples 工具则提供现代 Angular 模式的最新示例------我们很快将添加更多示例，如基于 Signal 的表单和 Angular Aria，以便您的 AI 代理可以使用新的编码模式。
• 更新您的应用程序 ： onpush_zoneless_migration 工具能够分析您的代码，并提供迁移应用程序到 OnPush 和 zoneless 变更检测的计划。还有一个名为 modernize 的实验性工具，用于使用现有 schematic 进行代码迁移。
• 学习 Angular ：ai_tutor 工具启动一个交互式 AI 驱动的 Angular 导师，可以帮助您学习概念并获得反馈，建议在新的 Angular 应用程序中使用。

使用 MCP 服务器，您可以解决知识截止问题------您的 LLM 是在某个特定日期之前训练的，但通过使用 MCP 服务器，它能够学习使用全新的功能，例如 Signal Forms 和 Angular Aria------您只需要让您的代理去寻找示例并使用它们！

Vitest 作为新的默认稳定测试运行器

由于 Karma 在 2023 年被弃用，Angular 团队已经探索了 Jest、Web Test Runner 和 Vitest 作为新的测试解决方案。

在收到社区的积极反馈后，我们决定将 Vitest 作为新的默认测试运行器，并在 Angular v21 中将其提升至稳定版 🎉

要在新的 Angular 应用程序中使用 Vitest，只需运行 ng test 命令。控制台输出将如下所示：

要了解更多关于使用 Vitest 进行测试的信息，请查看 angular.dev 上的文档。

虽然 Vitest 已成为新项目的默认测试运行器，但 Angular 团队仍然全面支持 Karma 和 Jasmine，因此您无需立即迁移。

如果您已准备好将现有应用程序迁移到使用 Vitest，可以运行一个实验性迁移。在执行链接指南中描述的某些准备工作后，运行:

ng g @schematics/angular:refactor-jasmine-vitest

您的测试将自动重构以使用 Vitest。

由于 Vitest 支持已稳定，我们决定弃用 Web Test Runner 和 Jest 的实验性支持，并计划在 v22 版本中移除它们。对于希望继续使用 Jest 的团队，可以考虑使用现有的社区替代方案，例如 jest-preset-angular 和 Nx Jest 插件。

Zoneless 已准备好正式上线

Angular 传统上使用 zone.js，这是一个修补浏览器 API 的库，用于跟踪应用程序中的变化。这实现了"神奇"的体验，即模板在用户执行应用程序操作时自动更改，然而 zone.js 存在性能问题，尤其是在高复杂度应用程序中

随着 Signals 驱动现代 Angular 状态管理，zone.js 不再需要用于变更检测。Zoneless 变更检测在 v18 中实验性引入，在 v20 中通过开发者预览，并在 v20.2 中达到稳定。

通过我们在 Google 的应用经验，我们越来越确信新的 Angular 应用程序在没有 zone.js 的情况下工作最佳。

• 2024 年，谷歌内部超过一半的新 Angular 应用程序都是使用 Zoneless 变更检测策略构建的，我们在 2024 年中将其设为默认配置。
• 目前谷歌内部已有数百个 Zoneless 应用程序在生产环境中运行。
• 从 The HTTP Archive 外部观察，我们看到超过 1400 个 Angular 应用程序在使用 Zoneless 变更检测，这只是那些无需登录即可公开访问的应用程序数量。

鉴于这些强烈的信号，zone.js 及其功能将不再默认包含在 v21 版本的 Angular 应用程序中。

启用无区域变更检测可带来诸多好处，如改善核心网络指标、原生异步等待、生态兼容性、减少包体积、简化调试和更好的控制。

新应用将自动使用无区域变更检测，现有应用请遵循 angular.dev 上的迁移说明。您也可以在 Angular MCP 服务器中尝试新的 onpush_zoneless_migration 工具，该工具会创建一个逐步计划，指导您将应用迁移到 OnPush 变更检测策略。

虽然无区域是新的默认体验，但我们想承认 zone.js 在塑造 Angular 方面发挥了重要作用，并让开发者多年来能够创造神奇体验。我们向 zone.js 团队致以诚挚的感谢，特别是感谢 Jia Li 对 zone.js 的贡献。

全新的文档体验

如果你最近几周访问过 angular.dev，可能会注意到有一个新的首页。但这还不是 angular 发生的所有变化。

dev --- 我们进行了重大调整，以确保文档体验现代化，并教授最新概念，让你始终能获取最新信息。

在 Google I/O 2025 上，我们推出了 angular.dev/ai --- 你构建基于 Angular 的 AI 应用所需的所有资源。我们包含了最佳实践、代码示例、设计模式等。我们还包含了最佳实践提示和自定义规则文件，以帮助确保你的代码生成体验结果为现代化的 Angular 代码。我们一直在发布大量更新，请继续关注，获取构建 AI 应用的最新技巧和策略，以及利用最佳 AI 辅助编码方法。

如果你刚开始构建响应式应用的旅程，可以查看新的 Signals 教程，它提供了所有稳定 Signal API 的完整概述，包括 model()、linkedSignal() 等。

我们在 angular.dev 上投入了大量精力更新开发者指南：

• 路由文档已完全改版，提供了关于路由所有方面的详细信息。
• 依赖注入指南已大幅改进，并使希望掌握这一强大功能核心概念的开发者更容易理解。
• 我们新增了一份关于 Material 组件主题化方法的全面指南
• 最后但同样重要的是，我们提供了一份完整指南，介绍如何使用 Angular 与 Tailwind CSS！

我们致力于提升文档使用体验。对于使用 Angular MCP 服务器的开发者，新的 search_documentation 工具将使您的 AI 代理能够获取 angular.dev 上最新、最全面的信息。

还有更多......

我们一直很忙碌！除了我们之前重点介绍的优秀功能外，我们团队还交付了许多值得特别提及的其他成果：

• CLDR 库支持已从 v41 更新至 v47，改进了货币格式、日期格式等。
• 我们现在支持在模板中使用正则表达式：

@let isValidNumber = /\d+/.test(someValue);

@if (!isValidNumber) {
  <p>{{someValue}} is not a valid number!</p>
}

• Angular 现在内置了 Signals 格式化器。启用自定义格式化器（Chrome、Firefox）以使用此功能。

• 您现在可以自定义与视口相关的 @defer 触发器的 IntersectionObserver 选项，例如：

@defer (on viewport({trigger, rootMargin: '100px'}) {
  <section>Content</section>
}

• SimpleChanges 现在是泛型的，允许对 SimpleChanges 中的值进行更好的类型检查，解决了高度点赞的问题。
• KeyValue 管道现在支持具有可选键的对象
• 作为 CSS 变量的替代方案，您现在可以使用一套新的实用类直接在模板中应用 Material Design 的系统标记。有关详细信息，请参阅主题指南！
• CDK 悬浮层现在使用浏览器内置的弹出框，有助于解决一些可访问性问题。

如果你错过了------这些只是自 Angular v20.2 以来的更新。如果你只关注每个主要版本，你可能错过了：

• 用于在元素进入和离开 DOM 时进行动画的新 API
• CDK 拖放改进，允许在列表之间复制项目
• Angular DevTools 中的路由可视化和 Signals 图
• 而且还有更多------详情请查看我们的夏季更新博客文章

一如既往，完整的变化列表在我们的 Changelog 中。

Angular ❤️ 我们卓越的社区

没有我们开源社区，这个卓越的发布将不可能实现。

我们社区中有许多人通过大小不一的贡献推动着 Angular 的发展，无论是为其他开发者解答问题，组织聚会和会议，改进文档，还是通过提交 pull-request。

如果你是我们的贡献者------非常感谢！如果你还不是，我希望这能激励你！即使只是回答一个问题或帮助你的同事也是非常有帮助的!!

自 v20 以来，已有 215 人贡献了 Angular 代码库，我们想要突出一些具体的贡献：

• Jaime Burgos 改进了多个迁移和诊断：
  • standalone 迁移现在支持 CommonModule
  • 新增对已弃用的 RouterTestingModule 的迁移
  • 对无法访问或冗余的@defer 触发器的诊断
• Angelo Parziale 创建了两个迁移：
  • 将 NgClass 指令转换为类绑定
  • 将 NgStyle 指令转换为样式绑定
• Hyrhoori Avcharov 为 DevTools 添加了 Transfer State 标签，允许检查服务器端和客户端应用程序之间的 TransferState。
• Luke Beach 创建了 CDK overlay 功能，允许每侧设置独立的视口边距
• Ruslan Lekhman 创建了一个 pull 请求，允许将注入器传递给 MatBottomSheetConfig
• Cédric Exbrayat 为 Vitest 运行器贡献了一个名为 outputFile 的选项
• Younes Jaaidi 为 Vitest 运行器贡献了多个改进

非常感谢您参与 Angular v21！

您可能还记得我们在 Angular v20 版本中征求过您对吉祥物的意见！我们的吉祥物 RFC 收到了创纪录数量的提交，因此我们需要向您更新。我们知道您想见到我们的新吉祥物，请务必在 2025 年 11 月 20 日上午 9 点太平洋时间观看我们的发布活动，以获取正式宣布⭐

构建下一波应用程序的时刻

我们对这次发布感到无比自豪，但这只是 Angular 旅程中的一步。我们密切关注着未来 Web 应用程序开发中的新兴模式。

我们已经看到了 AI 的力量，并希望尽我们所能为您提供适合您工作方式的工具。无论是通过 vibe 编程、AI 代理还是传统开发。

我们的最新功能，如 Signal Forms 和 Angular Aria，是我们继续改进 API 表面，使 Angular 成为构建可扩展 Web 应用的信心之地的证明。

请务必运行 ng update 并创建您的用户会喜爱的应用程序。