苹果版pr全屏预览:Angular 16 正式发布，抢先体验指南

太平洋在线下载 2023年05月12日 22:45 113 5

作者 | 丁晓昀、核子可乐

上周，Angular 正式发布了 v16 版本苹果版pr全屏预览。这个版本带来了许多功能和变化，比我们之前看到的任何一个主要版本都要多（当然，不包括从 Angular 到 Angular 2 的转变）。Angular 正在经历一种复兴，而 v16 只是个开始。

Angular v16 的新特性包括：全新 Reactivity 模型的开发者预览，完全向后兼容，Angular Signals 库，RXS 互操作性；服务器端渲染和 hydration 增强；改进独立组件、指令和管道的工具等苹果版pr全屏预览。

苹果版pr全屏预览:Angular 16 正式发布<strongalt=

苹果版pr全屏预览，抢先体验指南" >

本文将带您了解如何将 Angular 应用程序更新至 v16 版本苹果版pr全屏预览。

关于本文内容的概括汇总，以及将 Angular 应用程序更新至 v16 的分步过程，请参阅 Angular 更新指南（全屏预览。

本文列出的 Angular 更新指南及相关信息，摘录自以下变更日志

苹果版pr全屏预览。

angular/angular changelog：

angular/angular-cli changelog：

angular/components changelog：

如有需求

苹果版pr全屏预览，可参考此前发布的“更新至 v15”：

Angular v16 中的功能亮点

展开全文

全面的新功能列表，请参阅关于 v16 Angular 博文更新

苹果版pr全屏预览。

Angular Signals 开发者预览

此版本包含 Angular 新响应式基元的首个开发者预览，分别为：signal, computed 和 effect

苹果版pr全屏预览。关于详细信息，请参阅 Signals 指南。

更多背景信息，请参阅 Angular Signals RFC

苹果版pr全屏预览。

增强 hydration 开发者预览

此前，当 Angular 在服务器端渲染或编译时预渲染的页面上启动时，该框架会丢弃一切现有 DOM 节点并从头开始重新渲染

苹果版pr全屏预览。借助 v16 的增强 hydration 功能，现在您可以指定 Angular 重用这些现有 DOM 节点。关于更多细节信息，请参阅完整的 hydration 指南。

使用 esbuild 开发者预览版加快构建速度

v16 带来了基于 esbuild 的全新 Angular CLI 构建器开发者预览版

苹果版pr全屏预览。这种新架构能够在多种场景下显著缩短构建时间。该预览版还与 Vite 相集成以支持 CLI 的开发服务器。

更新 angular.json 即可体验这一全新构建设置：

独立组件迁移与搭建

为了支持开发人员将自己的应用程序转换为独立 API，Angular v16 引入了迁移图表和独立的迁移指南

苹果版pr全屏预览。这些工具大大减少了将代码迁移至独立组件、指令和管道所需要的工作量。关于详细信息，请参阅独立迁移指南。

通过以下命令生成具有独立组件的新 Angular 应用程序：

按需要输入

按照需要标记组件和指令输入：

如果模板中包含一个组件，但没有指定其所有必需输入，Angular 会在构建过程中报告错误

苹果版pr全屏预览。

Angular v16 中的重大变更

关于重大变更的完整列表，请参阅 GitHub 上的完整变更日志

苹果版pr全屏预览。

Angular v16 需要配合 node.js v16 或 v18 使用

Angular 需要配合 node.js v16 或 v18 版本使用

苹果版pr全屏预览。PR #47730

关于兼容性的完整说明信息，请参阅版本兼容性页面

苹果版pr全屏预览。

Angular v16 需要配合 Type 4.9 或更高版本使用

Angular v16 不再支持 4.9 之前的较早 Type 版本

苹果版pr全屏预览。PR #49155

关于兼容性的完整说明信息，请参阅版本兼容性页面

苹果版pr全屏预览。

Angular 兼容性编译器（ngcc）已被移除

Angular 兼容性编译器（ngcc）是一种构建工具，用于促进 Angular 之前的编译器及渲染架构（View Engine）与其新架构（Ivy）之间的兼容性

苹果版pr全屏预览。

View Engine 已在 Angular v13 中被移除，v16 则最终移除了 ngcc

苹果版pr全屏预览。因此，现在已无法在 Angular v16+ 版本中使用由 View Engine 构建的 Angular 库。

Angular 包格式变更

Angular 包格式（APF）现已更新

苹果版pr全屏预览，具体包含以下变更：

Flattened ESM 2015 (FESM2015) 输出已被移除

苹果版pr全屏预览。

Ecma 2020 输出已更新至 Ecma 2022（包括扁平化输出）

苹果版pr全屏预览。

关于背景信息，请参阅 Angular 包格式页面

苹果版pr全屏预览。

ReflectiveInjector 已被移除

ReflectiveInjector 及相关符号已被移除

苹果版pr全屏预览。请更新代码以避免引用 ReflectiveInjector 符号。作为替代方案，可以使用 Injector.create 创建注入器。

Router.createUrlTree 行为更新

由于 Router.createUrlTree 现可在更多场景中正确起效，因此需要对模拟 ActivatedRoute 实例的测试做相应调整

苹果版pr全屏预览。具体来讲，这意味着使用无效 / 不完整的 ActivatedRoute 模拟进行的测试可能引发与此前不同的行为。另外，测试现可导航至真实 URL，不同于之前只能导航至根目录的情况。请确保在测试中提供相应的预期路由。虽然几乎不会对生产造成影响，但我们发现此前如果使用未出现在当前路由程序状态中的 ActivatedRoute，相关导航可能会被忽略。在创建正确的 URL 之后，应用程序中的导航行为可能会有所不同。在大多数情况下，仅使用空命令数组更新查询参数的导航时会引发这个问题，例如 router.navigate([], {relativeTo: route, queryParams: newQueryParams})。要加以解决，应移除其中的 relativeTo 属性。

Angular v16 即将弃用的功能

以下 API 在 v16 中仍然可用，但可能会在未来版本中被移除，具体请参阅 Angular 弃用实践

苹果版pr全屏预览。

为了保持 Angular 应用程序的可靠性，请尽可能始终快速更新应用程序

苹果版pr全屏预览。

苹果版pr全屏预览:Angular 16 正式发布<strongalt=

苹果版pr全屏预览

，抢先体验指南" >

小结

如果你是 Angular 开发人员，或正在考虑将 Angular 用于下一个项目，了解这些新功能是必不可少的

苹果版pr全屏预览。其中一些功能是社区长期以来的需求。一些功能（如 Signal 和 SSR）让 Angular 与其他现代框架相媲美。随着 v17 中更多功能的推出，Angular 将与目前的版本有很大不同。考虑到 Angular 带来的变化，如果不及时更新，就无法利用这些新功能，你的代码库很快就会过时。