Angular 16 正式发布，抢先体验指南

转载

程序猿DD 2023-05-14 00:32:02

文章标签 angular.js 前端 javascript ecmascript typescript 文章分类 Html/CSS 前端开发

作者 | 丁晓昀、核子可乐

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

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

Angular 16 正式发布，抢先体验指南_javascript

本文将带您了解如何将 Angular 应用程序更新至 v16 版本。

关于本文内容的概括汇总，以及将 Angular 应用程序更新至 v16 的分步过程，请参阅 Angular 更新指南（https://update.angular.io/）。

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

angular/angular changelog：https://github.com/angular/angular/blob/main/CHANGELOG.md

angular/angular-cli changelog：https://github.com/angular/angular-cli/blob/main/CHANGELOG.md

angular/components changelog：https://github.com/angular/components/blob/main/CHANGELOG.md

如有需求，可参考此前发布的“更新至 v15”：https://angular.io/guide/update-to-version-15

Angular v16 中的功能亮点

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

https://blog.angular.io/

Angular Signals 开发者预览

此版本包含 Angular 新响应式基元的首个开发者预览，分别为：signal, computed 和 effect。关于详细信息，请参阅 Signals 指南。

https://angular.io/guide/signals

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

https://github.com/angular/angular/discussions/49685

增强 hydration 开发者预览

此前，当 Angular 在服务器端渲染或编译时预渲染的页面上启动时，该框架会丢弃一切现有 DOM 节点并从头开始重新渲染。借助 v16 的增强 hydration 功能，现在您可以指定 Angular 重用这些现有 DOM 节点。关于更多细节信息，请参阅完整的 hydration 指南。

https://angular.io/guide/hydration

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

v16 带来了基于 esbuild 的全新 Angular CLI 构建器开发者预览版。这种新架构能够在多种场景下显著缩短构建时间。该预览版还与 Vite 相集成以支持 CLI 的开发服务器。

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

content_copy"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",

独立组件迁移与搭建

为了支持开发人员将自己的应用程序转换为独立 API，Angular v16 引入了迁移图表和独立的迁移指南。这些工具大大减少了将代码迁移至独立组件、指令和管道所需要的工作量。关于详细信息，请参阅独立迁移指南。

https://angular.io/guide/standalone-migration

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

ng new --standalone

按需要输入

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

export class ColorPicker {
  @Input({ required: true }) defaultColor: string;
}

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

Angular v16 中的重大变更

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

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

Angular 需要配合 node.js v16 或 v18 版本使用。PR #47730

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

https://angular.io/guide/versions

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

Angular v16 不再支持 4.9 之前的较早 TypeScript 版本。PR #49155

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

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

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

View Engine 已在 Angular v13 中被移除，v16 则最终移除了 ngcc。因此，现在已无法在 Angular v16+ 版本中使用由 View Engine 构建的 Angular 库。

Angular 包格式变更

Angular 包格式（APF）现已更新，具体包含以下变更：

Flattened ESM 2015 (FESM2015) 输出已被移除。
EcmaScript 2020 输出已更新至 EcmaScript 2022（包括扁平化输出）。

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

https://angular.io/guide/angular-package-format

ReflectiveInjector 已被移除

ReflectiveInjector 及相关符号已被移除。请更新代码以避免引用 ReflectiveInjector 符号。作为替代方案，可以使用 Injector.create 创建注入器。

Router.createUrlTree 行为更新

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

Angular v16 即将弃用的功能

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

https://angular.io/guide/releases#deprecation-practices

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

Angular 16 正式发布，抢先体验指南_typescript_02

小结

如果你是 Angular 开发人员，或正在考虑将 Angular 用于下一个项目，了解这些新功能是必不可少的。其中一些功能是社区长期以来的需求。一些功能（如 Signal 和 SSR）让 Angular 与其他现代框架相媲美。随着 v17 中更多功能的推出，Angular 将与目前的版本有很大不同。考虑到 Angular 带来的变化，如果不及时更新，就无法利用这些新功能，你的代码库很快就会过时。