⭐Angular 13 功能⭐

如何更新到版本 13

嘿，

13.0.0 版本现已发布，它为世界各地的 Angular 开发者带来了一些重大更新。🎉🎉

TL;DR🙌

✅从 v13 开始，Angular 中不再提供视图引擎

✅ Angular 包格式（APF）的变更

✅组件 API 更新

✅ IE11 支持终止

✅ Angular CLI 的改进

✅ 框架变更和依赖项更新（TypeScript 4.4、Rxjs 7.4）

✅ Angular 测试的改进

✅ Angular Material 组件更新

✅ PR 与社区合并

✅ 文档已更新 | 文档正在更新 | 文档将会更新

如何更新到版本 13

请访问update.angular.io获取详细信息和指导。为了获得最佳更新体验，

更新至 13

ng update @angular/cli @angular/core

为了更新你的全局角度，

npm i -g @angular/cli

✅ Ivy 是 v13 中可用的默认引擎👌

• Angular 团队已经提到他们将从未来的主要版本中删除 View Engine。
• 点击此处阅读 Minko Gechev 的文章
• 👉 删除视图引擎也意味着 Angular 可以减少对 ngcc (Angular 兼容编译器)的依赖

✅ Angular 包格式（APF）的变更

• 👉 由于 ES2020 等更现代的 JS 格式的标准化，使用最新版本的 APF（Angular 包格式）构建的库将不再需要使用 ngcc。
• 由于这些变化，库开发人员可以期待更精简的包输出和更快的执行速度
• 删除了较旧的输出格式，包括 v13 中 APF 的 View Engine 特定元数据
• 在 APF 中更新以支持 Node Package Exports，这有助于开发人员避免无意中依赖可能发生变化的内部 API。

✅ 组件 API 更新

• 在 Angular v13 发生变化之前，动态创建组件需要大量的样板代码。
• 👉 新的 API 消除了将ComponentFactoryResolver注入构造函数的需要。
• 👉 Ivy 创造了使用ViewContainerRef.createComponent实例化组件的机会，而无需创建关联工厂。

使用旧版本的 Angular 创建组件

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

✅ IE11 支持终止 🎉

• 这使得 Angular 能够通过原生 Web API 利用现代浏览器功能，例如CSS 变量和 Web 动画。
• 👉 应用程序将更小、加载更快，因为我们可以删除IE 特定的 polyfill 和代码路径。
• 它还消除了对差异负载的需要
• 运行 ng update 将自动删除这些特定于 IE 的 polyfill，并在项目迁移期间减少包大小
• 👉 仍需要为现有项目支持 IE11 用户的开发人员可以继续使用 Angular v12，并且将支持到2022 年 11 月

✅ Angular CLI 的改进

• 👉 Angular 现在默认支持在新的 v13 项目中使用持久构建缓存。点击此处阅读
• 为了启用此功能，开发人员可以将此配置添加到angular.json：

• 点击此处了解更多

✅ 框架变更和依赖项更新

• 👉 支持TypeScript 4.4 。点击此处阅读🎉
• 👉 RxJS 7.4现在是 v13 的默认版本
• 使用 RxJS v6.x 的现有应用必须使用命令手动更新。迁移说明可在此处npm install rxjs@7.4阅读。
• 从 Angular 11 开始引入对内联 Google 字体的支持
• 👉 现在在 v13 中支持扩展到 Adob​​e Fonts
• 内联字体可以通过加速首次内容绘制(FCP)来提高应用程序的性能
• 此更改现已默认对所有人启用！您只需ng update

✅ Angular 测试的改进

• 👉 TestBed 现在可以更好地在每次测试后拆除测试模块和环境
• 现在，每次测试后都会清理 DOM，开发人员可以期待更快、更少内存占用、更少相互依赖和更优化的测试

✅ Angular Material 组件更新

• 所有基于 MDC 的组件均经过评估，以满足对比度、触摸目标、ARIA 等领域的更高 a11y 标准
• 👉 关于可访问性（a11y）标准的 Pull 请求可以在这里阅读

✅ PR 与社区合并

• 👉 动态启用/禁用验证器 - #42565 🎉
• 👉 使 SwUpdate API 更加符合人体工程学 - #43668 🎉
• 👉 语言服务配置，启用对可空符号的自动应用可选链接 - #1469 🎉
• 👉 当插座连接/断开时，路由器发出激活/停用事件 - #4333 🎉
• 👉 取消导航后恢复历史记录 - #38884 🎉
  • 路由器标志设置为计算时恢复浏览器历史记录的计算值

欲了解更多信息，请听创作者讲述

鸣谢：官方公告😄

变更日志：存储库