正文

Angular v18 正式发布！

admin
admin V管理员 /0 评论 /176 阅读
0530
此篇文章发布距今已超过178天，您需要注意文章的内容或图片是否可用！

原文：https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

今天，我们很高兴与大家分享 Angular 发展的下一个里程碑！在过去的三个版本中，我们引入了许多新功能和改进。这次，我们专注于完善我们交付的工作，将许多新 API 升级为稳定版本，解决常见的开发者请求，并实验性地发布最理想的路线图项目之一：zoneless 域变更检测（zoneless change detection）。

此版本的亮点包括：

  • 对 zoneless 变更检测的实验支持
  • Angular.dev 现在是 Angular 开发人员的新家
  • Material 3、可延迟视图、内置控制流现已稳定并包含一系列改进
  • 服务器端渲染改进，例如 i18n 水合支持、更好的调试、Angular Material 中的水合支持以及由与 Google 搜索相同的库提供支持的事件重播。
 

Angular.dev 的主页

所有对 http://Angular.io 的请求现在都会自动重定向到 Angular.dev。为了确保所有现有链接继续有效，我们将开发人员转发到 http://v17.angular.io。去 angular.dev 看看吧！

Material 3 现已稳定！

几个月前，我们引入了对 Material 3 的实验性支持。在解决了开发人员的反馈并完善了我们的 Material 3 组件后，我们很高兴将它们升级到稳定版本！

与此同时，我们还使用新的 Material 3 主题和文档更新了http://material.angular.io。

 

在 Angular 中使用事件调度来重放事件

 

事件重播功能在 v18 开发者预览版中提供。您可以使用 withEventReplay() 启用它，例如：

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

改进的调试体验

我们更新了 Angular DevTools 以可视化 Angular 的水合过程。在每个组件旁边，您可以找到一个代表组件水合状态的图标。要预览页面上 Angular 水合的组件，您还可以启用叠加模式。如果您的应用程序存在任何水合错误，Angular DevTools 会在组件资源管理器中将其可视化。

动图  

Angular DevTools 水合调试

非常感谢我们的社区贡献者 Matthieu Riegler 添加此功能！

CDK 和 Material 中的水合作用支持

在 v17 中，一些 Angular Material 和 CDK 组件选择退出水合作用，这导致了它们的重新渲染。从 v18 开始，所有组件和基础功能都完全水合兼容。

我们的部分 Hydration 计划

我们在 ng-conf 和 Google I/O 上宣布了部分水合。这是一种允许您在服务器端渲染后逐步补充应用程序的技术。应用程序的增量水合可以预先加载更少的 JavaScript，并提高应用程序的性能。

部分水合与可延迟视图建立在相同的基础之上。您将能够启用一种模式，让 Angular 在服务器上渲染 @defer 块的主要内容，而不是像今天那样在服务器上渲染 @placeholder 块。在客户端，仅当满足模板中指定的触发条件时，Angular 才会下载关联的 JavaScript 并水合延迟块。例如，这是一个假设的 API：

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

上面的块将在服务器上呈现日历组件。一旦到达客户端，Angular 将下载相应的 JavaScript 并水合日历，使其仅在进入视口后才具有交互性。我们一直在积极设计部分水合的原型，并且我们正处于一种可以与交互触发器一起使用的状态。我们目前正在与合作伙伴合作评估数据触发器的重要性，例如传递接收属性或更改绑定值的组件。

如果您正在大规模构建性能关键型应用程序，并且希望加入我们的抢先体验计划来塑造部分水合的未来，请发送电子邮件至 [email protected]。

使用 Firebase 应用托管为您的应用提供强大的托管

随着 Web 平台的复杂性不断增加，应用程序的托管在性能、可靠性、生产力和规模方面发挥着至关重要的作用。使用混合渲染的应用程序对服务器端渲染、预渲染和客户端渲染有不同的托管要求。手动管理这种复杂性可能会很麻烦。Firebase App Hosting 现在可以为开发人员透明地处理所这些！

Firebase 在今年的 Google I/O 上宣布了应用托管。应用托管简化了动态 Angular 应用程序的开发和部署，提供内置框架支持、GitHub 集成以及与其他 Firebase 产品（如身份验证、Cloud Firestore 和 Vertex AI for Firebase）的集成。我们已经与 Firebase 合作了一年多的时间，以确保 Angular 的开发者获得流畅的体验。立即查看他们的快速入门，开始使用应用程序托管！

还有更多……

除了我们正在推进的大型计划之外，我们始终花时间解决常见的开发人员需求。以下是 v18 的一些亮点：

为 ng-content 指定默认内容

我们遇到的投票最多的问题之一是为 ng-content 指定默认内容。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 的属性，它允许您订阅事件流对于这个表单控件。使用它您可以跟踪值、触摸状态、原始状态和控制状态的变化。

现在您可以使用：

 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 来更新到新的构建系统。在过去的 6 个月中，我们从人们那里收集了更多反馈并完善了更新体验，以使每个人都能转向新的构建体验并获得编辑/刷新的提升。

您可以在我们的更新指南中找到我们开发的用于自动化您的更新体验的工具。

由于 webpack 不在新构建系统的关键路径上，因此我们将对 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 5.4

最后但并非最不重要的一点是，我们更新了对 TypeScript 的依赖关系，让您可以利用所有最新的 TypeScript 5.4 功能！

社区亮点

随着 Angular 的创新，我们也看到了社区的大量进步！

ngrx、ngxs 和 rxAngular 等流行的状态管理库已经采用 Angular 信号并在组件中实现细粒度的反应性。

两个月前，Angular GDE Brandon Roberts 发布了 Analog.js 的 1.0 版——一个社区驱动的 Angular 元框架。它提供了一些简洁的功能，例如基于文件的路由、API 路由、一流的 Markdown 支持等等。Analog.js 团队一直在尝试社区一直喜爱的单文件组件格式！看到来自其他生态系统的流行库构建他们的 Angular 适配器也令人兴奋。Chau Tran、Arnoud de Vries 和 Corbin Crutchley 为 Angular 提供了 TanStack Store、TanStack Query 和 TanStack Forms 支持！

我们也很高兴能够参加世界各地如此多的 Angular 社区会议，并期待今年晚些时候会发生什么。组织一场有数百名与会者和数十名演讲者的会议并不是一件容易的事，向今年成功实现这一艰巨任务的所有人大声喊叫，包括 ng-conf、Angular Belgrade、ng-de、ng-be、NGPoland、 ngRome、NG 肯尼亚、ngIndia、Angular TLV！如果我们错过了任何会议，请在评论中分享。

除此之外，自 v16 以来，我们还收到了超过 290 人的贡献！感谢所有通过代码、问题、内容、组织社区或以他们认为可能的方式帮助使 Angular 变得更好的人

反思我们的进步

作为 Angular 复兴的一部分，我们在过去两年中交付了很多成果，并且还会有更多创新。在本节中，我想借此机会回顾一下现在并庆祝我们所处的位置。

在将 Angular 发展为具有信号的真正反应式框架并引入先进的混合渲染功能的同时，我们始终恪守我们的使命，让开发人员能够充满信心地交付 Web 应用程序。全球第二大网站 YouTube 使用 Angular 的反应原语，我们正在作为一个更大的工作组的一部分进行合作，将 Signals 添加到网络平台。

我们还与 Vite、Nx、Cypress、Puppeteer、Storybook 等工具的作者密切合作，以改善每个人的开发者体验。与此同时，我们非常幸运地拥有一个由充满热情的开发人员、社区组织者、作者和演讲者组成的社区，他们不断突破 Angular 的可能性界限。

感谢大家参与 Angular 复兴！

宙飒天下