明科·格切夫摄

我们带着全新的 Angular v13 版本回来与大家分享！这个最新版本带来了各种更新和功能，可帮助您的团队构建出色的应用程序。

现在通过ng update在您的项目中运行来获取 Angular v13。我们还在update.angular.io上提供了更新指南，以帮助团队获得有关如何更新项目的说明。

对于每个新版本，我们的目标是找到使 Angular 变得更好的实质性方法。在此版本中，我们通过扩展基于Ivy的功能和优化、与我们优秀的 Angular 社区合作并继续为您的团队和项目提供流畅、稳定的更新过程来实现这一目标。

让我们先来看看我们是如何利用 Ivy 的力量推动 Angular 前进的。

将 Angular 渲染推向未来

在 2021 年 5 月的v12 版本中，我们谈到了“Ivy Everywhere”，并提到 Angular 会有一些重要的变化来支持这一举措。我们一直在努力追求这一点，我们非常高兴在 v13 中实现了一些有影响力的变化，因为 Ivy 继续为优化和改进敞开大门。

视图引擎的状态

从 v13 开始，Angular 不再提供View Engine 。这是个好消息，因为 Angular 可以继续创建基于 Ivy 的功能，从而通过该平台提高您的生产力。移除 View Engine 也意味着 Angular 未来可以减少对ngcc（Angular 兼容性编译器）的依赖，团队可以期待更快的编译，因为元数据和摘要文件不再包含在内。

Angular 包格式 (APF) 的更改

Angular包格式 (APF)已经过精简和现代化，以更好地为开发人员服务。为了简化 v13 中的 APF，我们删除了旧的输出格式，包括 View Engine 特定的元数据。

为了使其现代化，我们对更现代的 JS 格式进行了标准化，例如 ES2020。使用最新版本的 APF 构建的库将不再需要使用ngcc. 由于这些变化，库开发人员可以期待更精简的包输出和更快的执行。

我们还更新了 APF 以支持节点包导出。这将帮助开发人员避免在不经意间依赖可能发生变化的内部 API。

组件 API 更新

Ivy 还可以提高开发人员动态创建组件的方式的生活质量。API 现在已经简化。在 Angular v13 发生变化之前，动态创建组件需要大量的样板代码。

新的 API 消除了ComponentFactoryResolver注入构造函数的需要。ViewContainerRef.createComponentIvy 创造了在不创建关联工厂的情况下实例化组件的机会。

下面是使用以前版本的 Angular 创建组件的示例：

使用新的 API，这段代码可以变成：

在 Ivy 将启用的工作中，我们还有更多类似的 API 改进。

结束 IE11 支持

我们听取了您的反馈，并努力为在 Angular v13 中删除 IE11 支持铺平道路。

删除 IE11 支持允许 Angular 通过原生 Web API 利用现代浏览器功能，例如 CSS 变量和 Web 动画。更重要的是，应用程序会更小，加载更快，因为我们可以删除 IE 特定的 polyfills 和代码路径。它还消除了对不同负载的需要。开发人员将受益于改进的 API 和构建基础设施，而应用程序用户将受益于更快的加载和改进的用户体验。

运行ng update将自动删除这些特定于 IE 的 polyfill，并在项目迁移期间减小包大小。

感谢所有参与征求意见 (RFC) 的人。对现有项目仍需要支持 IE11 用户的开发者可以继续使用 Angular v12，它将支持到 2022 年 11 月。

Angular CLI 的改进

关于Angular 工具的更新。Angular 现在默认支持对新的 v13 项目使用持久构建缓存。默认情况下，来自 [RFC] Persistent build cache的宝贵反馈导致了此工具更新，该工具更新可将构建速度提高 68%，并提供更多符合人体工程学的选项。为了使已升级到 v13 的现有项目启用此功能，开发人员可以将此配置添加到angular.json：

在文档中查找更多详细信息。

ESBuild 在此版本中也看到了一些性能改进！我们介绍了esbuild，现在可terser用于优化全局脚本。此外，esbuild支持 CSS sourcemaps 并可以优化全局 CSS，以及优化所有样式表。

框架更改和依赖项更新

Angular v13 还具有一些有用的更新和重要更改。首先，RxJS 7.4 现在是使用ng new. 使用 RxJS v6.x 的现有应用程序必须使用该npm install rxjs@7.4命令手动更新。要了解有关从版本 6 到版本 7 的更改的更多信息，请查看rxjs.dev 上的此摘要。

如果这还不够，现在还支持 TypeScript 4.4。更多信息可以通过查看 TypeScript发布博客找到。

Angular 测试的改进

我们已经对此进行了一些重要的改进TestBed，现在可以更好地在每次测试后拆除测试模块和环境。现在，每次测试后都会清理 DOM，开发人员可以期待更快、更少内存密集、更少相互依赖和更优化的测试。

此功能自 12.1.0 起已启用，现在它将成为默认功能，同时仍可自定义。方法如下 - 可以通过以下TestBed.initTestEnvironment方法为整个测试套件配置：

或者可以通过更新TestBed.configureTestingModule方法为每个模块配置：

这提供了在对每个项目及其测试最有意义的地方应用这些更改的灵活性。查看Lars Gyrup Brink Nielsen的博客以了解更多信息。

所有关于组件

可访问性（a11y）必须是我们在 Angular 社区内外构建的一切的基础。我们认真对待这一责任，我们所做的工作已经对Angular Material组件进行了有意义的改进和更改。

所有基于 MDC 的组件都经过评估，以满足对比度、触摸目标、ARIA 等领域的更高 a11y 标准。

为了更好地了解这些更改如何影响组件，请查看我们对复选框和单选按钮等组件的触摸目标大小所做的调整。

触摸目标大小的比较。右边的尺寸是新尺寸。

多个组件的高对比度模式也有一些改进。

高对比度模式下的材料组件

在我们关于改进 Angular 组件可访问性的博文中了解更多关于这些变化的信息。我们希望这可以帮助每个人构建更具包容性的 Angular 应用程序。

其他值得注意的更新

随着2020 年Angular v11的发布，我们引入了对内联 Google 字体的支持。现在，我们正在扩展对Adob​e Fonts的支持。请记住，内联字体可以通过加速First Contentful Paint (FCP) 来提高您的应用程序性能。现在默认情况下为所有人启用此更改！你需要做的就是ng update。我们有一个关于字体内联的视频，它可能会有所帮助，请在此处查看：

我们对 angular.io 上的文档进行了重要更改，以使开发人员对本地化 API 有更多的了解。本地化指南已更新为包含更小的部分，以使学习过程更加清晰。我们还为$localize.

社区贡献

通过向框架添加功能，Angular 社区永远不会停止以巨大的方式出现。Angular 团队非常感谢这样一个充满活力的支持社区。让我们花点时间来强调一些在此版本中做出的贡献。

动态启用/禁用验证器

由Nirmal Bhagwani提交，此PR允许通过将值设置为来禁用内置验证器null。这在构建动态表单时变得越来越有用。

取消导航后恢复历史记录

Ahmed Ayed贡献了一个PR，允许canceledNavigationResolution路由器标志在设置为 时恢复浏览器历史的计算值computed。

这些是我们强调的一些更新，但更多的贡献来自社区：

使 SwUpdate API 更符合人体工程学语言服务配置以启用可空符号上的自动应用可选链接当插座连接/分离时，路由器会发出激活/停用事件和更多！

向社区中为框架做出贡献的所有人大声疾呼。我们一起推动 Angular 前进。

结束的想法

在一流的 Angular 社区的帮助下，Angular 继续前进。感谢大家对存储库的贡献。另外，感谢您在 RFC 中提供的宝贵反馈。您的支持帮助我们塑造 Angular 的未来，通过独立组件向前发展并支持现代 Web 标准。

有关更详细的概述，请查看我们的完整变更日志。获取最新版本的 Angular，让我们知道您的想法；您可以在update.angular.io找到详细的更新指南。

直到下一次，朋友们，去构建伟大的应用程序。