Angular 现代化：Angular 19 的新增功能

Angular 19 已正式发布，它包含一系列旨在提高开发人员体验、性能和适应性的功能。

在本文中，我将向您介绍主要亮点以及是什么使 Angular 19 成为现代 Web 开发的关键一步。

1. 增量补水：SSR 的游戏规则改变者

Angular 19 中引入的 增量水化 将服务器端渲染 (SSR) 提升到了新的高度。与传统的完全水合方法不同，增量水合允许服务器渲染的组件仅在进入视口或变为交互式时才进行水合。

这会带来更快的加载时间和更好的用户体验。此功能目前处于开发者预览版，但它在优化初始负载和提高 Lighthouse 分数方面显示出巨大的前景。

为了实现这一目标，Angular 与 Chrome Aurora 合作，带来了更加无缝的 SSR 体验，可适应现实世界的使用，重点关注惰性水合作用。开发人员现在可以使用 @defer 等指令来准确控制组件何时应进行水合，从而使该过程非常高效。

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

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

2. 事件回放：确保用户交互流畅

服务器端渲染应用程序中的一个常见问题是用户交互和负责处理正在加载的交互的 JavaScript 之间的延迟。

事件重放，现在在 Angular 19 中默认启用，在初始加载期间捕获用户事件，并在必要的 JavaScript 可用时重放它们。即使应用程序仍在保湿过程中，这也可以确保流畅的用户体验。

事件调度由 Google 搜索 (Wiz) 使用的同一库提供支持，并且已经过数十亿用户的测试。

为了启用事件重放，Angular 在水合提供程序中使用以下设置：

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

这可以确保在 JavaScript 完全加载之前发生的任何用户交互都不会丢失，从而提供无缝的体验。

3. 路由级渲染模式：对渲染的细粒度控制

Angular 19 引入了路由级渲染模式，它允许开发人员指定如何渲染应用程序中的各个路由——无论是在服务器上、客户端上还是在构建过程中预渲染。

这提供了对渲染策略的细粒度控制，允许开发人员根据每个路线的特定需求来优化性能和 SEO。

示例： 登录路由可以在服务器端呈现，以加快初始加载时间，而仪表板路由可以在客户端呈现，以增强交互性。这种灵活性有助于确保应用程序的每个部分都针对其预期用例进行优化。

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular 还提供了一种在预渲染期间解析路由参数的简单方法，允许高度可定制的预渲染页面：

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

这个新界面ServerRoute使开发人员可以更好地控制内容的交付方式，从而改善用户体验和 SEO。

4. 即时热模块更换 (HMR)

Angular 19 引入了即时 HMR，允许更新样式和模板而无需重新加载整个应用程序。这意味着开发人员可以立即看到更改的效果，从而使开发周期更加顺畅和更快。 v19 中默认启用样式的热模块替换！要尝试模板的 HMR，请使用：

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

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

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. 无区域支持：持续发展

六个月前，Angular 引入了实验性的 zoneless 支持。从那时起，Angular 一直在迭代 API 并对其进行增强——添加对服务器端渲染的支持并改善测试体验。

Angular 与 Google Fonts 团队合作，使其应用​​程序实现无区域化并评估开发人员体验。结果超出了预期，但在将此 API 移至开发者预览版之前，仍有一些改进工作。

Angular 19 继续推动未来，无区操作成为默认操作，显着简化变更检测并使应用程序更加精简。

要尝试无区域，请使用以下设置：

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. 关联信号：具有情境意识的反应状态

最酷的新功能之一是链接信号。借助此功能，即使数据更新，捆绑在一起的信号也能保持其关系。这对于多个数据点需要动态保持同步的场景特别有用。例如，维护从另一个反应源派生的下拉列表或选择的状态现在更加简单，并且需要更少的样板文件。

NG_HMR_TEMPLATES=1 ng serve

linkedSignal API 提供了一种简单的方法来表达有状态元素之间的依赖关系，而无需借助效果。新的 API 有两种形式：简化版本（如图所示）和高级版本，使开发人员能够访问链接信号和源信号的先前值。

7. Angular 材质升级

Angular Material 在 Angular 19 中也得到了重大升级。现在有一个新的、更可定制的主题 API，允许开发人员轻松覆盖样式并调整 Angular Material 组件的外观和感觉，而无需深入研究嵌套CSS。每个组件的文档还包括一个样式选项卡，以便更轻松地参考如何进行这些更改。

万众期待的拖放组件终于原生添加到了 Angular Material 中，让开发者无需依赖第三方库即可实现复杂的拖放交互。

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

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

自定义各个组件：

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

8. 信号迁移脚本

由于内置的​​迁移脚本，现在将您的应用程序迁移到新的基于信号的反应性模型变得更加简单。这些脚本有助于将您现有的输入、输出和查询转换为使用信号而不是旧的 Angular 装饰器，从而确保您的应用程序以最小的努力保持现代化。

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

9. 增强的内容安全策略

安全性是此版本的另一个重点。 Angular 19 引入了对自动 CSP（内容安全策略）的支持，它会自动向您的应用程序添加安全的 CSP 配置，以默认防止 XSS 攻击和其他漏洞。这是通过更少的手动配置实现更好的安全实践的重要一步。

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Angular 测试的未来

最后，关于测试的一个重要说明 - Karma 已被弃用，取而代之的是更现代的工具，例如 Jest 和 Web Test Runner。到 2025 年中期，Karma 将不再受支持，这使开发人员有充足的时间迁移到更可靠的测试设置，该设置与现代 Angular 生态系统的其他部分顺利集成。

总结

Angular 19 不仅仅是一个更新；更是一个更新。这是一个具有前瞻性的版本，针对开发人员和用户体验进行了优化。凭借增量水合、事件重播、路线级渲染模式、即时 HMR、无区域的转变以及大量生产力增强等功能，该版本使 Angular 更接近其理想——一个现代、高性能、开发人员友好的框架.

如果您想迁移或开始一个新项目，Angular 19 提供了坚实的基础，支持尖端功能和不断发展的最佳实践。让我知道您最感兴趣的功能是什么，或者如果您对在项目中采用 Angular 19 有任何疑问！

以上是Angular 现代化：Angular 19 的新增功能的详细内容。更多信息请关注PHP中文网其他相关文章！