Angular v18 现已发布！

今天我们非常激动地宣布 Angular 发展的又一重要里程碑！在过去的三个版本中，我们推出了众多新功能和改进。此次，我们着重于完善现有功能，将许多新 API 升级至稳定版，解决了开发者的普遍需求，并发布了一个备受瞩目的项目：无 zone（Zoneless） 的变更检测。

本次发布的亮点包括：

• 实验性支持无 Zone 变更检测。

• Angular.dev 现已成为 Angular 开发者的新家园。

• Material 3、可延迟视图、内置控制流功能现已稳定，并融入了一系列改进。

• 服务器端渲染功能得到加强，包括 i18n hydration 支持、更优质的调试体验、Angular Material 中的 hydration 支持，以及由与 Google 搜索相同的库驱动的事件重播功能。

想要了解更多信息，请观看我们的发布活动视频：https://youtu.be/DK8M-ZFjaMw

过去，Angular 的变更检测主要依赖于 zone.js 库。然而，这一库在用户体验和性能方面存在一些不足。多年来，我们一直在寻求不依赖 zone.js 的解决方案，如今，我们很高兴地宣布首个无 Zone 实验性 API 的诞生！

从即日起，你可以在 Angular 中尝试这一实验性的无 Zone 支持！只需在应用程序启动时添加provideExperimentalZonelessChangeDetection即可。

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

添加提供者后，请从angular.json的 polyfills 部分中移除 zone.js。

展望未来，无 Zone 将给开发者带来众多新机遇：

• 提升微前端的可组合性和与其他框架的互操作性。

• 加快初始渲染和运行速度。

• 减小包大小，加快页面加载。

• 提供更易读的堆栈跟踪。

• 简化调试流程。

在组件中使用无 Zone 的最佳实践是使用 signals：

@Component({  ...  template: `    <h1>Hello from {{ name() }}!</h1>    <button (click)="handleClick()">Go Zoneless</button>  `,})export class App {  protected name = signal('Angular');  handleClick() {    this.name.set('Zoneless Angular');  }}

在上面的示例中，一旦点击按钮，就会触发handleClick方法，该方法会更新信号值并刷新用户界面（UI）。虽然这看起来与使用 zone.js 的应用程序有些类似，但其中还是存在一些差异。在使用 zone.js 时，每当应用状态可能发生变化时，Angular 都会进行变更检测。然而，在无 Zone 模式下，Angular 将这种检测限制在更少的触发点上，如信号更新时。这一变化还引入了一个新的合并调度器，旨在避免对变化进行连续多次的重复检查。

举例来说，当用户点击上述按钮时，由于调度器的合并机制，Angular 仅会执行一次变更检测。若你想了解更多关于无 Zone 模式的信息，请查阅我们的文档。

Angular 最近经历了令人振奋的发展，而无 Zone 是其中的核心部分。在改进框架的过程中，我们确保所有现有的 API 继续按预期工作，并且与我们引入的所有新功能具有良好的互操作性。

无 Zone 是我们实现互操作性策略的又一个例子。此外，我们希望确保将现有应用程序迁移到无 Zone 尽可能简单。如果你的组件已经兼容 Angular 的 ChangeDetectionStrategy.OnPush 变更检测策略，那么它们应该也能很好地兼容无 zone，从而实现无缝过渡。

自 v18 版本起，我们在无 Zone 应用和启用合并的 zone.js 应用中采用了相同的调度器。为了降低新 zone.js 应用中变更检测周期的频率，我们还默认启用了 zone 合并 功能。

这一行为仅针对新应用启用，因为它可能会使那些依赖于之前变更检测行为的应用出现问题。通过合并，不必要的变更检测周期得到了减少，从而显著提升了部分应用的性能。

如果你想为现有项目启用事件合并，请在bootstrapApplication中配置你的NgZone提供者。

bootstrapApplication(App, {  providers: [    provideZoneChangeDetection({ eventCoalescing: true })  ]  });

Zone.js 通过拦截许多浏览器调用来插入 Angular 的变更检测。然而，不幸的是，async/await 是 zone.js 无法进行补丁的 API 之一，因此过去我们需要通过 Angular CLI 将其降级为 Promise。这种做法并不理想，因为所有现代浏览器都支持 async/await，并且它相较于 Promise 更具表现力，同时还经过了 JavaScript 运行时的优化。

现在，如果你创建一个使用实验性无 Zone 变更检测的应用，Angular CLI 将直接使用原生的 async/await，而不再将其降级为 Promise。这一改变将改善调试体验，并减少你的包大小。

我们在 Angular CDK 和 Angular Material 中启用了无 Zone 支持，这一举措不仅提升了性能，还帮助我们识别并改进了无 Zone 模型中的一些问题。

过去的 18 个月里，我们一直在 angular.dev 上辛勤工作，致力于提供直观、实操性强的入门体验，并不断优化深入指南。今天，我们激动地宣布，angular.dev 正式成为 Angular 的官方文档网站！

除了全新的现代化界面，你还能在此找到基于 WebContainers 的互动实践教程、包含实例的 学习 Angular 教程、由 Algolia 支持的优化搜索、更新后的指南、简化后的导航等功能！

Angular.dev 主页

现在，所有对 angular.io 的访问请求将自动重定向至 angular.dev。为确保现有链接仍然有效，我们已将开发者页面转至 v17.angular.io。

即刻访问 angular.dev，探索更多精彩内容！

数月前，我们推出了对 Material 3 的实验性支持。在充分听取了开发者的反馈并持续优化我们的 Material 3 组件后，我们欣然宣布，这些组件现已升级为稳定版本！

与此同时，我们也更新了 material.angular.io 网站，引入了全新的 Material 3 主题和文档。

如需了解如何在你的应用中使用 Angular Material 3，请查阅我们的指南。

在 Angular 版本 17.1 和 17.2 中，我们宣布了新的信号输入、基于信号的查询和新的输出语法。

你可以在我们的信号指南中了解如何使用这些 API。在接下来的几个月里，我们将根据你的反馈不断迭代这些功能，直到它们升级为稳定版本。

在过去的六个月里，我们收到了大量关于可延迟视图的积极反馈，得知它们如何助力开发者轻松优化应用的核心网络指标。例如，Bill.com 分享道，通过应用 @defer 技术，他们成功将某应用的包大小缩减了 50%。今天，我们高兴地宣布，可延迟视图已经正式进入稳定阶段！现在，你可以放心地在你的应用和库中采用这项技术了。

随着 v17 版本的发布，我们不仅引入了可延迟视图功能，还推出了一套性能更出色的新内置控制流。这一新语法在发布后迅速得到了广泛应用，并且在我们针对社区反馈进行改进后，现在高兴地宣布这一 API 已经稳定！

在预览期间，我们对控制流的类型检查进行了进一步优化，引入了更加人性化的隐式变量别名，并针对某些与性能相关的反模式增设了防护措施，以确保代码的高效运行。

大约一年前，我们推出了 hydration 功能，并在 v17 版本中将其正式稳定化。根据公共 HTTPArchive 数据集，我们发现已有 76% 使用预渲染或服务器端渲染的 Angular v17 应用程序正在采用 hydration 技术。

然而，阻碍更多人利用 hydration 技术的一个主要因素是缺乏 i18n 支持。在与 Chrome Aurora 团队的紧密合作下，我们欣喜地宣布，v18 版本中针对 i18n 块的 hydration 功能现已在开发者预览模式中上线！

不久前，我们宣布了一项长期计划，旨在将 Angular 与谷歌内部框架 Wiz 进行融合。回顾以往，Angular 和 Wiz 一直服务于不同类型的应用——Wiz 主要面向以消费者为中心、对性能要求极高的应用，而 Angular 则专注于提升生产力和开发者体验。

通过这一融合努力，Wiz 在其渲染模型中深度集成了 Angular Signals。在 ng-conf 大会上，我们分享了 YouTube 现在如何使用 Angular Signals 的案例。同时，Angular 也在不断引入更多以性能为中心的特性，比如部分 hydration，我将在后文详细介绍。

在这两项工作中，我们都将你的功能请求和其他需求作为融合这两个框架核心功能的重要动力。

今天，我们激动地宣布，曾在 Google.com 上发挥关键作用的核心库之一——事件分发（先前称为 jsaction），现已并入 Angular 单库管理。自 v18 版本起，事件分发开始为混合渲染过程中的事件重放提供支持。

尽管大多数开发者并不会直接与事件分发库交互，但我们可以来看看为什么事件重放是如此有用。让我们以一个简化的电子商务网站场景为例。假设我们人为地引入加载延迟，以模拟网络速度极慢的情况。此时，当页面正在加载但尚未完成 hydration（即页面尚未完全加载至可交互状态）时，用户想要将多个耳机添加到购物车中。由于页面尚未 hydrated，此时无法响应用户操作，所有用户事件都将被忽略。但自 v18 版本起，Angular 将借助事件分发开始记录这些用户事件。一旦页面完成 hydration，事件分发将自动重放这些事件，最终我们会在购物车中看到六个项目。

在 Angular 中使用事件分发实现事件重放

事件重放功能已在 v18 版本中以开发者预览模式提供。你可以通过调用 withEventReplay() 方法来启用该功能，例如：

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

我们更新了 Angular DevTools，以可视化展示 Angular 的 hydration 过程。现在，在每个组件旁边，你都能看到一个图标，该图标清晰标注了该组件的 hydration 状态。此外，你还可以启用叠加模式，提前预览 Angular 在页面上已经 hydrated 的组件。若你的应用程序在 hydration 过程中出现任何错误，Angular DevTools 将在组件浏览器中直观地展现这些错误，帮助你迅速定位问题。

Angular DevTools 的 hydration 调试功能

非常感谢社区贡献者 Matthieu Riegler 为我们带来了这一功能！

在 Angular 的 v17 版本中，部分 Angular Material 和 CDK 组件选择不参与 hydration 过程，这导致它们需要在 hydration 后重新渲染。然而，从 v18 版本开始，所有的组件和基础元素都已经完全支持并兼容 hydration 过程。

在 ng-conf 和 Google I/O 会议上，我们宣布了部分 hydration 技术。这是一种可以让你的应用程序在服务器端渲染后逐步进行 hydration 的技术。通过逐步 hydration 应用程序，我们可以减少初始加载的 JavaScript 量，进而提升应用程序的性能。

部分 hydration 是建立在可延迟视图的基础之上的。与当前在服务器上渲染占位符（placeholder）块的做法不同，你可以启用一种新模式。在这种模式下，Angular 将在服务器上渲染 @defer 块的主要内容。而在客户端，Angular 将下载相关的 JavaScript，并且只有当满足模板中指定的触发条件时，才会对延迟块进行 hydration。例如，以下是一个假设的示例：

@defer (render on server; on viewport) {  <app-calendar/>}

上述代码块将在服务器端渲染日历组件。一旦该组件到达客户端，Angular 将会下载相应的 JavaScript，并在日历组件进入用户视口时对其进行 hydration，使其具备交互性。

我们一直致力于开发部分 hydration 功能，并已经实现了利用交互触发器来实现其功能。目前，我们正在与合作伙伴紧密合作，评估数据触发器（如组件接收属性或更改绑定值）的重要性。

如果你正在构建大规模的性能关键型应用，并希望加入我们的早期访问计划，与我们共同推动部分 hydration 的发展，请通过电子邮件联系我们，邮箱地址为 [email protected]。

随着网络平台日益复杂，应用程序托管在性能、可靠性、生产力和规模等方面发挥着举足轻重的作用。混合渲染的应用程序在服务器端渲染、预渲染以及客户端渲染方面均存在不同的托管需求，手动管理这些复杂性无疑是一项艰巨的任务。幸运的是，Firebase App Hosting 现已为开发者提供了透明化处理这些问题的解决方案！

在今年的 Google I/O 大会上，Firebase 正式 推出了 App Hosting。这项服务极大地简化了动态 Angular 应用程序的开发和部署流程，不仅提供了内置框架支持，还集成了 GitHub 以及 Firebase 的其他产品，如 Authentication、Cloud Firestore 和 Vertex AI for Firebase。

我们与 Firebase 紧密合作了约一年的时间，以确保为 Angular 开发者提供顺畅无阻的体验。现在，你可以查看 Firebase 的 快速入门指南，并开始使用 App Hosting 服务！

在积极推进大型计划的同时，我们也不忘关注并满足开发者的日常需求。以下是 Angular v18 版本的一些亮点：

开发者反馈中，为 ng-content 指定默认内容一直是一个热门需求。在 Angular v18 中，这项功能现已正式上线！下面是一个简单的示例：

@Component({  selector: 'app-profile',  template: `    <ng-content select=".greeting">Hello </ng-content>    <ng-content>Unknown user</ng-content>  `,})export class Profile {}

现在，我们可以开始使用这个组件了：

<app-profile>  <span class="greeting">Good morning </span></app-profile>

这将导致：

<span class="greeting">Good morning </span>Unknown user

Angular 表单中的 FormControl、FormGroup 和 FormArray 类现在提供了一个名为 events 的属性，你可以通过这个属性来订阅这些表单控件的事件流。利用这个新特性，你可以轻松追踪值的变化、触摸状态、原始状态以及控件状态等关键信息。

现在，你可以利用这个 events 属性进行如下操作：

const nameControl = new FormControl<string|null>('name', Validators.required);nameControl.events.subscribe(event => {  // process the individual events});

这一功能请求在 GitHub 上收获了超过 440 个点赞。感谢社区贡献者 Matthieu Riegler 的努力，使得这一功能得以面向所有用户开放！

在 Angular v17 版本中，我们宣布“应用程序构建器”已经稳定，并将其设置为新项目的默认启用选项。在底层技术上，我们采用了 Vite 和 esbuild 来取代之前使用的 webpack。

对于大多数应用程序而言，开发者只需更新他们的 angular.json 文件，即可升级到全新的构建系统。过去的六个月里，我们广泛收集了用户反馈，并不断优化更新流程，以确保每位用户都能顺利迁移到新的构建环境，并享受到编辑与刷新效率的显著提升。

为了帮助你更好地完成迁移，我们在 更新指南 中提供了自动化工具，以简化你的更新操作。

由于 webpack 已不再是新构建系统的核心组件，我们已将其依赖关系设置为可选。这一调整使得 Angular CLI 的总依赖项数量大幅减少，降幅超过 50%！这也意味着你的 Angular CLI 安装时间将明显缩短。

为了在处理重定向时提供更大的灵活性，Angular v18 中的 redirectTo 现在支持一个返回字符串的函数。举个例子，如果你希望根据某些运行时状态来决定重定向的路由，你可以在函数中实现更复杂的逻辑判断：

const routes: Routes = [  { path: "first-component", component: FirstComponent },  {    path: "old-user-page",    redirectTo: ({ queryParams }) => {      const errorHandler = inject(ErrorHandler);      const userIdParam = queryParams['userId'];      if (userIdParam !== undefined) {        return `/user/${userIdParam}`;      } else {        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));        return `/not-found`;      }    },  },  { path: "user/:userId", component: OtherComponent },];

最后但同样关键的是，我们更新了 TypeScript 的依赖项，让你能够尽情享受所有最新的 TypeScript 5.4 功能 带来的便利与优势！

随着 Angular 的不断发展，我们也见证了社区中的众多进步！

流行的状态管理库，如 ngrx、ngxs 和 rxAngular，已开始采纳 Angular Signals，并在组件中实现了细粒度的响应性。

两个月前，Angular GDE（Google 开发专家）Brandon Roberts 发布了 Analog.js 1.0 版本——这是一个由社区驱动的 Angular 元框架。它带来了诸如基于文件的路由、API 路由、一流的 Markdown 支持等诸多精彩功能。Analog.js 团队一直在积极尝试使用 单文件组件格式，这一创新受到了社区的热烈欢迎！

此外，看到其他生态系统中知名库纷纷构建其 Angular 适配器，也令人倍感振奋。Chau Tran、Arnoud de Vries 和 Corbin Crutchley 推出了 TanStack Store、TanStack Query 和 TanStack Forms 的 Angular 支持版本，这无疑为 Angular 社区注入了新的活力。

我们非常荣幸能够参与到全球各地的 Angular 社区会议中，并对今年后续的活动充满期待。组织一场拥有数百名与会者和数十名演讲者的会议并非易事，感谢所有让这一艰巨任务成为现实的人们，包括 ng-conf、Angular Belgrade、ng-de、ng-be、NGPoland、ngRome、NG Kenya、ngIndia 和 Angular TLV 等。如果我们遗漏了任何会议，请在评论区告诉我们。

另外值得一提的是，自 v16 版本以来，我们收到了来自超过 290 人的贡献！感谢每一位以不同方式帮助改进 Angular 的朋友，无论是通过编写代码、提出问题、创作内容、组织社区活动，还是其他形式，我们都深感感激。🙏

在过去的两年里，Angular 作为一项复兴计划取得了诸多显著成果，并且未来还将有更多创新。在此，我想回顾一下我们的进展，并共同庆祝这些成果。

在推动 Angular 向真正的响应式框架迈进，并引入先进的混合渲染功能的过程中，我们始终坚守初心，助力开发者自信地交付 Web 应用程序。如今，全球第二大网站 YouTube 已采纳了 Angular 的响应式技术，而我们也在与更广泛的工作组合作，共同将 Signals 引入 Web 平台。

此外，我们与 Vite、Nx、Cypress、Puppeteer、Storybook 等工具的开发者保持紧密合作，共同提升开发者的使用体验。同时，我们非常荣幸拥有这样一个充满热情的开发者社区，包括社区组织者、作者和演讲者，他们一直在探索并推动 Angular 的无限可能。

感谢大家成为 Angular 复兴之旅的一部分！

Minko Gechev，Google Angular 产品和开发关系负责人。

原文链接：

https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0af

声明：本文为 InfoQ 翻译，未经许可禁止转载。