Angular小博客
分享让你更聪明
我们带着全新版本的 Angular v13 回来与大家分享！此最新版本带来了各种更新和功能，可帮助您的团队构建出色的应用程序。
现在通过在项目中运行ng update来获取 Angular v13。我们还在update.angular.io上提供了更新指南，以帮助团队获取有关如何更新其项目的说明。
对于每个新版本，我们的目标是找到使 Angular 变得更好的实质性方法。在此版本中，我们通过扩展基于Ivy的功能和优化、与我们优秀的 Angular 社区合作并继续为您的团队和项目提供流畅、稳定的更新流程来实现这一目标。
让我们首先看看我们如何利用 Ivy 的力量推动 Angular 向前发展。
在 2021 年 5 月的v12 版本中，我们讨论了“Ivy Everywhere”，并提到 Angular 将会进行一些重要的更改来支持这一计划。我们一直在努力追求这一目标，我们非常高兴在 v13 中实现了一些有影响力的更改，因为 Ivy 继续为优化和改进敞开大门。
视图引擎的状态
自 v13 起， View Engine在 Angular 中不再可用。这是个好消息，因为 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注入到构造函数中。 Ivy 创造了实例化组件的机会 ViewContainerRef.createComponent 无需创建关联工厂。
以下是使用早期版本的 Angular 创建组件的示例：
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver:
ComponentFactoryResolver) {}
createMyComponent() {
const componentFactory = this.componentFactoryResolver.
resolveComponentFactory(MyComponent);
this.viewContainerRef.createComponent(componentFactory);
}
}使用新的 API，此代码可以变为：
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef) {}
createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}我们正在开发更多类似的 API 改进，这些改进将由 Ivy 实现。
我们听取了您的反馈，并努力为 Angular v13 中删除 IE11 支持铺平道路。
删除 IE11 支持允许 Angular 通过本机 Web API 利用现代浏览器功能，例如 CSS 变量和 Web 动画。更重要的是，应用程序将更小并且加载速度更快，因为我们可以删除 IE 特定的填充和代码路径。它还消除了差异加载的需要。开发人员将受益于改进的 API 和构建基础设施，而应用程序用户将受益于更快的加载和改进的用户体验。
运行ng update将自动删除这些特定于 IE 的 polyfill，并在项目迁移期间减少包大小。
感谢所有参与征求意见 (RFC) 的人。现有项目仍需要支持 IE11 用户的开发者可以继续使用 Angular v12，并将支持到 2022 年 11 月。
关于Angular 工具的更新。 Angular 现在默认支持对新的 v13 项目使用持久构建缓存。来自[RFC] 默认情况下持久构建缓存的宝贵反馈导致了此工具更新，使构建速度提高了 68%，并提供了更符合人体工程学的选项。为了让已升级到 v13 的现有项目启用此功能，开发人员可以将此配置添加到angular.json ：
{
"$schema": "...",
"cli": {
"cache": {
"enabled": true,
"path": ".cache",
"environment": "all"
}
}
...
}在文档中查找更多详细信息。
ESBuild 在此版本中还发现了一些性能改进！我们引入了esbuild ，它现在可以与terser一起优化全局脚本。此外， esbuild支持CSS源映射，可以优化全局CSS，以及优化所有样式表。
Angular v13 还提供了一些有用的更新和重要更改。首先，RxJS 7.4 现在是使用ng new创建的应用程序的默认版本。使用 RxJS v6.x 的现有应用程序必须使用npm install rxjs@7.4命令手动更新。要了解有关版本 6 到版本 7 的更改的更多信息，请查看rxjs.dev 上的摘要。
如果这还不够，现在还支持 TypeScript 4.4。通过查看 TypeScript发布博客可以找到更多信息。
我们对TestBed进行了一些重要的改进，现在可以更好地在每次测试后拆除测试模块和环境。现在，每次测试后都会清理 DOM，开发人员可以期待更快、内存占用更少、相互依赖更少且更优化的测试。
自 12.1.0 起，此功能已被选择加入，现在它将成为默认功能，同时保留可自定义功能。具体方法如下 – 可以通过TestBed.initTestEnvironment方法为整个测试套件进行配置：
beforeEach(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true }
}
);
});或者可以通过更新来按模块进行配置 TestBed.configureTestingModule 方法：
beforeEach(() => {
TestBed.resetTestEnvironment();
...
TestBed.configureTestingModule({
declarations: [TestComp],
teardown: { destroyAfterEach: true }
});
});这提供了在对每个项目及其测试最有意义的地方应用这些更改的灵活性。请查看Lars Gyrup Brink Nielsen的博客了解更多信息。
可访问性 (a11y) 必须成为我们在 Angular 社区内外构建的所有内容的基础。我们认真对待这一责任，我们所做的工作已经为Angular Material组件带来了有意义的改进和改变。
所有基于 MDC 的组件都经过评估，以满足对比度、触摸目标、ARIA 等领域的更高标准。
为了更好地了解这些更改如何影响组件，请查看我们对复选框和单选按钮等组件的触摸目标大小所做的调整。
多个组件的高对比度模式也有了一些改进。
在我们有关改进 Angular 组件可访问性的博客文章中了解有关这些更改的更多信息。我们希望这可以帮助大家构建更具包容性的 Angular 应用程序。
随着 2020 年Angular v11的发布，我们引入了对内联 Google 字体的支持。现在，我们正在扩展对Adobe Fonts 的支持。请记住，内联字体可以通过加速首次内容绘制(FCP) 来提高应用程序性能。现在默认对所有人启用此更改！您所需要做的就是ng update 。我们有一个关于字体内联的视频，可能会有所帮助，请在此处查看：我是视频
我们对 angular.io 上的文档进行了重要更改，以便开发人员能够更深入地了解本地化 API。本地化指南已更新，包含更小的部分，使学习之旅更加清晰。我们还为$localize添加了更多 API 文档。
Angular 社区从未停止通过向框架添加功能来大规模地展示。 Angular 团队非常感谢这样一个充满活力、支持性的社区。让我们花点时间重点介绍一下对此版本做出的一些贡献。
动态启用/禁用验证器
该PR由Nirmal Bhagwani提交，允许通过将值设置为null来禁用内置验证器。这在构建动态表单时变得越来越有用。
取消导航后恢复历史记录
Ahmed Ayed贡献了一个PR ，允许canceledNavigationResolution路由器标志在设置为computed时恢复浏览器历史记录的计算值。
RouterModule.forRoot(
routes,
{ canceledNavigationResolution: 'computed' },
);以下是我们重点介绍的一些更新，但更多贡献来自社区：
向社区中所有为该框架做出贡献的人致以崇高的敬意。我们共同推动 Angular 向前发展。
在优秀的 Angular 社区的帮助下，Angular 继续向前发展。感谢大家对存储库的贡献。另外，感谢您在 RFC 中提供的宝贵反馈。您的支持帮助我们塑造 Angular 的未来，通过独立组件向前发展并支持现代 Web 标准。
如需更详细的概述，请查看我们的完整变更日志。获取最新版本的 Angular，并告诉我们您的想法；您可以在update.angular.io找到详细的更新指南。
直到下一次，朋友们，去构建伟大的应用程序吧。
原文链接：https://blog.angular.dev/angular-v13-is-now-available-cce66f7bc296