Angular v20发布_架构/框架



 写点什么

本文最初发表于 Medium 网站上 Angular 团队的博客，由 InfoQ 中文站翻译分享。

过去几年对 Angular 来说很具变革性，我们推出了像 Signals 这样的反应性功能和 Zoneless 应用的强大能力。我们希望这些功能可以帮助 Angular 社区构建下一代的 Web 应用，实现快速上市和强大的性能。

我们的旅程才刚刚开始！Angular v20 是最新的发布版本，我们花费了无数个小时打磨一些正在进行中的功能，以便于为你提供健壮的开发体验。

其中，值得关注的亮点包括：

稳定 API，如 effect、linkedSignal、toSignal、增量式 hydration、路由级渲染模式的配置，并将 zoneless 提升到开发者预览级别。
改进了 Angular DevTools 的调试功能，通过与 Chrome 合作，直接在 Chrome DevTools 中提供自定义的 Angular 报告。
通过样式指南更新、host 绑定的类型检查和语言服务支持、提供模板中未标记的模板字面量表达式的支持、默认启用模板热模块替换等特性，提升了开发者体验。
在 GenAI 开发方面取得了进展，提供了 llms.txt 和 angular.dev 指南和视频，用于构建生成性 AI 应用。
为 Angular 的官方吉祥物发起意见征询。

将反应性特性提升到稳定版

过去三年，我们重新思考了 Angular 的反应性模型，使其更加健壮和面向未来。在 Angular v16 中，我们发布了 Angular Signals 的开发者预览版，从那时起，它们在谷歌内外得到了广泛应用。

YouTube 分享了如何组合使用 Angular Signals 与 Wiz，将 Living Room 的输入延迟改善了 35%。与此同时，TC39 启动了一项调查，以将 Signals 引入 JavaScript 语言中，参考实现就是基于 Angular 的 Signals。

在收集 RFC 反馈并对实现进行迭代后，我们将signal、computed、input和视图查询 API 提升到了稳定版。今天，我们宣布effect、linkedSignal和toSignal也进入稳定状态了。

新的实验性 API

为了使用 Angular 管理异步的状态，在 v19 中我们开发了资源 API。从那时起，我们引入了资源流，并创建了一个叫做httpResource新 API，它允许你使用基于 Signal 的反应性 API 进行 HTTP 请求。这两个 API 都是 v20 的一部分，作为实验性功能提供。

资源 API 允许你在 Signal 变化时启动一个异步操作，并将这个操作的结果作为一个 Signal 暴露出来：

const userId: Signal<string> = getUserId();const userResource = resource({  params: () => ({id: userId()}),  loader: ({request, abortSignal}): Promise<User> => {    // fetch 在给定的 AbortSignal 指示的请求已被终止时，会取消未完成的 HTTP 请求。    return fetch(`users/${request.id}`, {signal: abortSignal});  },});

复制代码

上面的代码将在userId signal 变化时获取特定标识符的用户。

现在假设我们要从 WebSocket 获取数据。为了实现这一点，我们可以使用流资源：

@Component({  template: `{{ dataStream.value() }}`})export class App {  // WebSocket 初始化逻辑将在这里...  // ...  // 初始化流资源  dataStream = resource({    stream: () => {      return new Promise<Signal<ResourceStreamItem<string[]>>>((resolve) => {        const resourceResult = signal<{ value: string[] }>({          value: [],        });        this.socket.onmessage = event => {          resourceResult.update(current => ({             value: [...current.value, event.data]          });        };        resolve(resourceResult);      });signal    },  });}

复制代码

在这个最小的示例中，我们声明了一个新的流资源，它返回一个 signal 的 promise。该 signal 具有ResourceStreamItem<string[]>的值类型，这意味着该 signal 可以持有{ value: string[] }类型的值，如果我们想要返回一个错误，则是{error: … }。

我们通过resourceResultsignal发出 WebSocket 接收到的值。

在这个模式的基础上，我们还发布了实验性的httpResource：

@Component({  template: `{{ userResource.value() | json }}`})class UserProfile {  userId = signal(1);  userResource = httpResource<User>(() =>     `https://example.com/v1/users/${this.userId()}`  );}

复制代码

上面的代码片段将在userId变化时，向我们指定的 URL 发送 HTTP GET 请求。httpResource返回HttpResourceRef，它有一个 signal 类型的value属性，我们可以直接在模板中进行访问。userResource还有其他值，如isLoading、headers等。

在幕后，httpResource会使用HttpClient，因此你可以在HttpClient提供者中指定拦截器：

bootstrapApplication(AppComponent, {providers: [  provideHttpClient(    withInterceptors([loggingInterceptor, cachingInterceptor]),  )]});

复制代码

将 Zoneless 提升到开发者预览级别

在过去的六个月里，我们在 zoneless 方面取得了很多进展，特别是在服务器端渲染和错误处理方面。

许多开发者甚至没有意识到自己在使用 Zone.js 来捕获应用中的错误。Zone.js 还能让框架知道我们何时准备好将服务器端渲染的应用推送到客户端。在 zoneless 的世界里，我们需要为这些问题找到稳健的解决方案。

在 v20 中，我们现在在 SSR 期间为 Node.js 中的unhandledRejection和uncaughtException添加了一个默认的处理器，以防止节点服务器在出现错误时崩溃。

在客户端，可以在提供者中包含provideBrowserGlobalErrorListeners。你可以通过更新提供者列表，从今天开始就使用 zoneless：

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

复制代码

此外，确保从 angular.json 中移除 zone.js polyfill。通过我们的文档，你可以了解更多关于 zoneless 的好处以及如何将其过渡到你的项目中。

如果你正在创建一个新的 Angular 项目，可以使用 CLI 从一开始就创建一个 zoneless 的项目：

巩固 Angular 在服务器端的地位

在 v20 中，我们还专注于完善服务器端的渲染功能，即增量式 hydration 和路由级别的渲染模式配置。今天，我们很高兴地将它们都提升到稳定状态！

作为提醒，增量式 hydration 通过在特定触发器上下载和 hydrate 页面的一部分来使应用变得更快。这样，用户就不必下载与特定页面相关的所有 JavaScript，而是可以逐步下载他们所需要的组成部分。

要开始使用增量式 hydration，需要通过指定withIncrementalHydration来配置 hydration：

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

复制代码

现在你可以在组件模板中使用可延迟视图：

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

复制代码

这样，Angular 将下载购物车组件及其传递依赖，并仅在进入视口（viewport）时 hydrate 这部分 UI。

此外，现在可以使用路由级别的渲染模式配置作为稳定的 API！在应用中，如果针对不同路由有不同的渲染需求，那么可以在服务器路由配置中配置它：

export const routeConfig: ServerRoute = [  { path: '/login', mode: RenderMode.Server },  { path: '/dashboard', mode: RenderMode.Client },  {    path: '/product/:id',    mode: RenderMode.Prerender,    async getPrerenderParams() {      const dataService = inject(ProductService);      const ids = await dataService.getIds(); // ["1", "2", "3"]      // `id`用来替代路由路径的`:id`。      return ids.map(id => ({ id }));    }  }];

复制代码

在上面的代码片段中，我们配置了在服务器上渲染登录页面，在客户端渲染仪表板，并预渲染产品页面。

请注意，产品页面需要一个 id 参数。为了解析每个产品的标识符，我们可以使用异步函数getPrerenderParams。它会返回一个对象，其键映射到路由器参数。在/product/:id页面的情况下，我们返回一个具有id属性的对象。

你可以使用大多数云提供商的托管服务器端渲染的应用。我们与 Firebase App Hosting 紧密合作，提供了无缝部署，支持混合渲染（SSR、SSG 和 CSR），并为你提供了 Google Cloud 的安全性和可扩展性。

完善开发者体验

我们在开发 v20 时花了很多时间在工程卓越上，即完善现有 API 以改善开发者体验。我们全面开展了这项工作，涵盖框架、路由器、表单、http 等。下面，我将分享更多我们在方面所做的工作！

Chrome DevTools 中的性能洞察

为了进一步增强开发者体验并提供对应用程序性能的深入洞察，我们与 Chrome DevTools 团队合作，将 Angular 特有的分析数据直接集成到性能面板中。以前，开发者经常需要在框架特定的分析器和浏览器的 DevTools 之间切换，这使得关联信息和确定瓶颈变得很具挑战性，特别是在使用压缩后的生产代码时。这种新的集成旨在通过在同一时间线上显示 Angular 的运行时数据（如组件渲染、变更检测周期和事件监听器执行）和其他的浏览器性能指标来解决这个问题。

这项直接的集成功能从 Angular v20 开始提供，它利用了性能面板可扩展性 API，特别是使用console.timeStamp API 来确保低开销，确保性能分析不会对应用程序性能产生负面影响。开发者现在可以更深入地了解 Angular 的内部工作机制，通过颜色编码的条目区分开发者编写的 TypeScript 代码和 Angular 编译器生成的代码。要启用此功能，只需在应用程序或 DevTools 控制台中运行全局工具ng.enableProfiling()。这一进步提供了更直观和全面的性能分析体验，使开发者能够构建更高性能的 Angular 应用程序。

在上述截图中，你可以看到这一功能的实际效果。请注意，在性能时间线的底部有一个专门用于 Angular 的跟踪。通过不同颜色编码的条形图，你可以预览组件实例化、运行变更检测等过程。Angular DevTools 和 Chrome 性能时间线中的 Angular 跟踪都使用相同的钩子，不同之处在于 Chrome 的性能时间线可以将应用程序生命周期置于框架之外的其他 JavaScript 调用的上下文中。

此外，Chrome 性能时间线中的 Angular 跟踪还显示了一些目前在 Angular DevTools 中尚不存在的数据，例如组件和提供者实例化。

框架添加和改进

要动态地创建 Angular 组件，你可以使用createComponent函数。在 v20 中，我们引入了新功能，让你可以对动态创建的组件应用指令并指定绑定：

import {createComponent, signal, inputBinding, outputBinding} from '@angular/core';const canClose = signal(false);const title = signal('My dialog title');// 创建 MyDialogcreateComponent(MyDialog, {  bindings: [    // 将 signal canClose 绑定到`canClose`输入。    inputBinding('canClose', canClose),    // 对话框上监听`onClose`事件。    outputBinding<Result>('onClose', result => console.log(result)),    // 创建与 title 属性和 title signal 之间的双向绑定    twoWayBinding('title', title),  ],  directives: [    // 在不绑定任何内容的情况下将`FocusTrap`指令应用于`MyDialog`。    FocusTrap,    // 将`HasColor`指令应用于`MyDialog`并将`red`值绑定到其`color`输入上。    // `inputBinding` 的回调在每次变更检测时被调用。    {      type: HasColor,      bindings: [inputBinding('color', () => 'red')]    }  ]});

复制代码

在上面，我们创建了一个对话框组件并指定了如下的行为：

canClose输入绑定，将 signal canClose作为值传递进去
将输出onClose设置为一个回调，记录发出的结果
title属性和title signal 之间的双向绑定

此外，我们还将FocusTrap和HasColor指令添加到了组件中。请注意，我们还可以为应用于MyDialog的HasColor指令指定输入绑定。

扩展模板表达式语法

我们一直在缩小 Angular 模板表达式和完整 JavaScript 语法之间的差距，以实现更高的表达力和更好的开发者体验。今天，我们引入了对指数运算符** 和in运算符的支持：

<!-- n 的平方 -->{{ n ** 2 }}<!-- 检查 person 对象是否包含 name 属性 -->{{ name in person }}

复制代码

在 v20 中，我们还允许直接在表达式中使用未标记的模板字面量：

<div [class]="`layout col-${colWidth}`"></div>

复制代码

扩展诊断

为了防止常见的错误，我们引入了静态检查，以检测无效的空值合并，检测结构化指令的缺失导入，并在没有调用传递给@for的track函数时发出警告：

@Component({  template: `    @for (user of users; track trackFn) {      <!-- ... ->    }  `})class UserList {  users = getUsers();  trackFn() {    // ... body  }}

复制代码

Angular 模板中的@for循环接受一个 track 表达式。实际上，trackFn本身是一个表达式，它返回trackFn函数，这是一个有效的值。同时，我们可能想要调用trackFn，新的诊断功能使捕捉此类错误变得更加容易。

风格指南更新

在过去的十年中，我们看到成千上万的应用程序使用 Angular，我们决定更新我们的风格指南，主要目标是对其进行现代化并消除不必要的复杂性。

在收集了 RFC 的反馈后，我们引入了一系列简化措施：从风格指南中移除了非 Angular 特定的代码健康实践，并将与编码风格无关的 Angular 最佳实践移动到了文档中。我们还将文件名和类名的后缀变成可选的，以鼓励更能体现意图的抽象命名，这减少了样板代码。

从 Angular v20 开始，默认情况下 Angular CLI 不会为组件、指令、服务和管道生成后缀。对于现有项目，ng update将通过更新angular.json来启用后缀生成。要在新项目中启用后缀生成，请使用以下模式配置：

{  "projects": {    "app": {      ...      "schematics": {        "@schematics/angular:component": { "type": "component" },        "@schematics/angular:directive": { "type": "directive" },        "@schematics/angular:service": { "type": "service" },        "@schematics/angular:guard": { "typeSeparator": "." },        "@schematics/angular:interceptor": { "typeSeparator": "." },        "@schematics/angular:module": { "typeSeparator": "." },        "@schematics/angular:pipe": { "typeSeparator": "." },        "@schematics/angular:resolver": { "typeSeparator": "." }      },  ...}

复制代码

Angular 多年来有了很大的发展，我们希望在风格指南中反映出这种演变。因此，我们移除了与NgModules相关的大部分指导，并重新审视了对@HostBinding和@HostListener的使用，转而支持指令元数据中的host对象。为确保新指南不会降低开发体验，我们还解决了host绑定支持中的几项差异。

改进的 host 绑定

在历史上，我们推荐使用@HostBinding和@HostListener的一个原因在于，它们比组件元数据中的host对象具有更好的编辑器支持，因为你可以在特定的绑定或方法上直接使用它们。同时，它们可能难以监视和使用装饰器，并可能导致代码更加繁琐。

在 Angular v20 中，我们引入了host绑定和监听表达式的类型检查和语言支持。

在下面的动态图片中，你可以看到这个功能的实际效果。我们首先因为调用了一个名为getAppTile而不是getAppTitle的函数而出现错误。在我们修复了这个问题之后，语言服务会检测到程序没有类型检查，因为我们向一个不期望任何参数的函数传递了一个参数。

要启用此功能，请在tsconfig.json中的angularCompilerOptions下，将typeCheckHostBindings属性设置为true。我们将在 Angular v21 中默认启用此功能。

Angular DevTools 中的增量式 hydration

为了简化增量式 hydration 和可延迟视图的调试，现在可以直接在 Angular DevTools 中预览它们！

下面的屏幕截图显示了如何检查一个延迟块以及它稍后加载的内容。

当使用带有增量式 hydration 的延迟块时，你还会看到指示 Angular 是否已经 hydrate 了当前组件的图标。

对 vitest 的实验性支持

随着对 Karma 的弃用，我们正与测试框架作者合作，寻找一个维护良好的替代方案，以实现浏览器测试。我们提交了一个拉取请求，创建了一个实验性的游乐场环境，让我们尝试不同的测试运行器。

在 v20 中，Angular CLI 带来了对 vitest 的实验性支持，具有观察模式和浏览器测试！

要在节点环境中尝试 vitest，请在项目中运行：

npm i vitest jsdom --save-dev

复制代码

随后，请更新 angular.json 中的测试配置：

"test": {    "builder": "@angular/build:unit-test",    "options": {        "tsConfig": "tsconfig.spec.json",        "buildTarget": "::development",        "runner": "vitest"    }}

复制代码

接下来，可能需要更新单元测试文件，以包含正确的导入：

...import { describe, beforeEach, it, expect } from 'vitest';...

复制代码

最后，执行ng test以使用 vitest 运行你的单元测试。

Angular Material 中的改进

在此版本中，我们进一步打磨了我们的按钮组件，以更好地符合 M3 规范。

Tonal 按钮

我们实现了一些变更：

实现了 tonal 按钮
与 M3 规范的术语保持一致
增加了设置按钮默认外观的能力
为图标按钮添加了matIconButton选择器以保持一致性

我们实现的一些质量改进包括：

为对话框增加新的 closePredicate，关闭请求并获得了 108 个赞
新的 overlay API，以实现更好的树摇
现在能够自动处理prefers-reduced-motion
新的 DI 令牌以禁用动画
MatButton和MatAnchor合并，用户就不需要同时导入它们了

支持使用 GenAI 的开发者

为了使 LLM 能够产生现代化的 Angular 代码，并使你能够使用 GenAI 构建应用程序，我们启动了两项工作：

维护一个llms.txt文件（请参见 GitHub 上的拉取请求），帮助大语言模型发现最新的 Angular 文档和代码样本
为使用 GenAI 构建应用程序的开发者提供起点

一些语言模型仍然使用旧的 Angular 语法，比如，使用结构性指令而不是最新的控制流，或者使用NgModules而不是独立的组件、指令和管道。解决这个问题是一个多步骤的过程，我们从创建一个llms.txt文件开始。将来，我们会继续提供使用最新 Angular 语法的代码样本，并探索开发系统提示，提示 LLM 使用正确的 API。

我们启动的第二项工作是为构建具有 AI 功能的 API 的开发者提供指南。我们进行了多次直播，展示了如何在 Angular 应用中利用 Genkit 和 Vertex AI。我们开源了示例应用程序，并在 angular.dev/ai 上列出了一些我们发现的最佳实践。

这只是使 Angular 成为你的智能 AI 应用程序解决方案的开始。

弃用 NgIf、NgFor 和 NgSwitch

我们在 v17 中引入了 Angular 的内置控制流，带来了一系列改进：

更直观的语法，更接近 JavaScript
更简单的用法，无需导入另一个模块或独立的指令
通过更新 diffing 算法提高性能
通过减少类型改进类型检查

我们还发布了一个模式，只需一行代码就可以让你的项目从结构性指令转移到内置控制流：

ng generate @angular/core:control-flow

复制代码

目前，超过一半的 Angular v17+ 应用程序在 HTTP Archive 公共数据集中使用了新语法！

根据社区的情绪和采用指标，我们将继续弃用*ngIf、*ngFor和*ngSwitch，并鼓励大家使用最新的内置控制流。这意味着根据我们的弃用政策，我们可以在一年后的版本 22 中移除结构性指令。

官方 Angular 吉祥物

随着 Angular 的不断发展和演变，我们很高兴地宣布一项新举措，这将进一步丰富我们令人赞叹的社区，也就是创建一个官方的 Angular 吉祥物！虽然 Angular 是一个人们熟知且广泛采用的框架，但它一直缺少一个有趣的、视觉化的代表，这是许多其他成功的开源项目所具备的。我们听到了你们对一些有形的东西的请求，比如毛绒玩具或钥匙链，我们很高兴与所有人一起踏上这段创意之旅。我们的团队与 Dart 和 Firebase 吉祥物背后的设计师合作，分享了 Angular 的核心优势和社区精神。这个过程形成了三个初步的吉祥物提案，我们迫不及待地想与大家分享。

为了忠于 Angular 的包容性和社区驱动决策的价值观，我们为每个人都开放了参与过程。在 goo.gle/angular-mascot-rfc 上可以找到官方 Angular 吉祥物的 RFC。

这是初步概念的预览：