您应该了解的关于 Angular 10 的所有信息

Angular 框架的 10.0.0 版本现已发布。 它被称为 Angular 10，并于 2020 年 6 月 24 日发布。Angular 10 是一个主要版本，引入的更改反映在整个平台上，包括框架、Angular Material 和 CLI。

Angular 10 版本比典型的以前版本要小。它在前一个版本Angular 9发布后仅四个月发布。 Google 已经声明我们将尝试每年发布两个主要版本，以使 Angular 与 JavaScript 生态系统的其余部分同步，并拥有可预测的计划，因此不要将 Angular 10 视为最后一个Angular 版本。该公司可能会在年底发布 Angular 11 版本。

Angular 10 中引入的主要更改

让我们看看 Angular 10 是什么，Angular 10 的新功能是什么，以及 Google 开发的 Web 框架 Angular 10 向我们介绍了哪些新功能和重大更改

• 新的日期范围选择器
• 关于 CommonJS 导入的警告
• 可选的更严格的设置
• 与生态系统保持同步
• 新的默认浏览器配置
• 弃用和移除

1. 新的日期范围选择器

Angular 10 引入了一个新的日期范围选择器。 如果你想使用新的日期范围选择器，你可以很容易地通过使用 mat-date-range-input 和 mat-date-range-picker 组件来实现。

示例

输出

2. 关于 CommonJS 导入的警告

在以前的 Angular 版本中，当你使用使用 CommonJS 打包的依赖项时，你会得到以更大和更慢的应用程序的形式的结果。

随着 Angular 10 的引入，当你使用任何这些捆绑包时，它会给你一个警告消息。 如果你的依赖项收到这些警告，你应该为你的项目首选 ECMAScript 模块 (ESM) 捆绑包。

3. 可选的更严格的设置

当你在 Angular 10 中使用 ng new 命令创建一个新的工作区时，Angular 10 提供了一个更严格的项目设置

使用以下命令来启用此严格功能。

启用此功能后，你的新项目会初始化一些设置，这些设置可以提高你的应用程序的整体功能，例如可维护性、提前发现错误并允许 CLI 对你的应用程序执行高级优化。

以下是严格标志具体执行的操作列表

• 当你在你的应用程序中启用严格标志时，它会将应用程序配置为无副作用，以确保更高级的 tree-shaking。
• 它在 TypeScript 中启用严格模式。
• 它将模板类型检查设置为严格。
• 通过启用严格标志，默认捆绑包预算已减少高达 75%。
• 它配置 linting 规则以防止声明 any 类型。

4. 与生态系统保持同步

在 Angular 10 的依赖项中引入了一些更新，以使其保持最新并与 JavaScript 生态系统保持同步。

Angular 10 中最重要的更新的依赖项是

• TypeScript 已更新到 TypeScript 3.9： 在 Angular 10 中，TypeScript 已更新到 TypeScript 3.9 版本，这与之前的版本不同，后者支持 TypeScript 3.6、3.7 甚至 3.8。 Typescript 是 Angular 的父语言。 它建立在 JavaScript 之上，通过添加类型声明和注释的语法，稍后 TypeScript 编译器使用该语法来类型检查代码。 它产生的结果是干净、可读的 JavaScript，可以在许多不同的运行时上运行。
• TSLib 已更新到 v2.0： TSlib 已更新到 2.0 版本。 TypeScript 的运行时库包含 helper 函数，这些函数现在已更新到 TSlib 2.0。
• TSLint 已更新到 v6：TSLint 是 TypeScript 的静态分析工具。 除了 TSlib 之外，TSLint 也升级到了 6 版本。

5. 新的默认浏览器配置

Angular 10 更新了新项目的浏览器配置。 在这个更新的版本中，现在排除了较旧和使用较少的浏览器。 通过比较 Angular 9 版本和 Angular 10 版本，你可以清楚地看到默认支持浏览器的差异。

版本 9 中的默认浏览器列表

• and_chr 81
• and_ff 68
• and_qq 10.4
• and_uc 12.12
• android 81
• baidu 7.12
• chrome 83
• chrome 81
• chrome 80
• edge 83
• edge 81
• edge 18
• firefox 78
• firefox 77
• firefox 76
• firefox 68
• ie 11
• ios_saf 13.4-13.5
• ios_saf 13.3
• ios_saf 12.2-12.4
• kaios 2.5
• op_mini all
• op_mob 46
• opera 69
• opera 68
• safari 13.1
• safari 13
• samsung 12.0
• samsung 11.1-11.2

你可以使用 npx browserslist 命令来检查它。

版本 10 中的默认浏览器列表

• chrome 83
• edge 83
• edge 81
• edge 18
• firefox 76
• firefox 68
• ios_saf 13.4-13.5
• ios_saf 13.3
• ios_saf 13.2
• ios_saf 13.0-13.1
• ios_saf 12.2-12.4
• ios_saf 12.0-12.1
• safari 13.1
• safari 13
• safari 12.1
• safari 12

你可以看到，在新版本中，默认情况下许多支持的浏览器现在被排除在外。 这都是因为默认情况下为新项目禁用 ES5 构建。 如果你想为浏览器启用 ES5 构建和差异加载，你可以简单地在 .browserslistrc 文件中添加你需要支持的浏览器。

6. 弃用和移除

Angular 10 进行了许多更改，其中新版本完成了几个弃用和移除。

• 在新的 Angular 10 版本中，Angular 包格式不再包含 ESM5 或 FESM5 捆绑包，因此，Angular 10 已弃用包含 ESM5 或 FESM5 捆绑包。
• 它使新版本非常轻巧，并且在运行 yarn 或 npm install Angular 包和库时，至少节省 119MB 的下载和安装时间。
• Angular 10 具有 TypeScript 3.9。 与之前的版本相反，之前的版本支持 typescript 3.6、3.7 甚至 3.8。
• 在 Angular 10 中，任何降级以支持 ES5 的操作都将在构建过程结束时完成。
• 基于与社区的大量协商，Angular 10 还弃用了较旧的浏览器，例如 IE 9、10 和 Internet Explorer Mobile。

7. 已解决的问题和错误修复

更新后的新 Angular 10 版本已解决了许多问题并修复了我们在以前版本中遇到的错误。

在 Angular 10 中进行了大量错误修复。 以下是一些错误修复和已解决问题的列表

• 路由器： 在更新后的 Angular 10 版本中，现在允许 UrlMatcher 返回 null。
• 核心： 如果你有具有装饰字段的未装饰类迁移，它不会装饰派生类。
• 服务工作者： 防止 SW 注册策略影响应用程序稳定性。
• 模块： 在 Angular 10 中，你可以正确识别受 TestBed 中覆盖影响的模块。
• 编译器： 当你导入不存在的符号时，编译器将避免空洞数组中的未定义表达式，并且核心将避免迁移错误。

如何从以前的版本更新到 Angular 10 版本

始终最好使用任何软件的更新版本。 同样，你应该使用最新的 Angular 版本。 在这里，我们将指定如何将你的旧版本 Angular 升级到最新版本。 无论你使用的是哪个 Angular 版本，你都可以使用以下步骤轻松地将其升级到 Angular 最新版本

• 首先，使用 ng --serve 检查你的 Angular CLI 的当前版本
• 现在，运行以下命令来卸载你的旧版本 Angular。

• 现在，使用以下命令验证并清除缓存。

• 使用以下命令清除缓存

• 现在，使用以下命令安装最新的 Angular CLI。