Angular 10 – 你必须知道的

已发表: 2020-10-07

Angular 最近于 2020 年 6 月 24 日发布了一个新版本。它在发布 Angular 9.0 版 4 个月后才推出。 最新的 Angular 10 是一个测试版——这意味着 Angular 团队即将发布这个由谷歌开发的、面向打字稿的框架的最新版本。

如果您是 Web 开发人员或希望为您的企业开发 Web 应用程序的人，您必须知道这个新版本必须提供什么。 由于测试版是在发布最后一个版本后的 4 个月内推出的，您可能想知道它是成功还是失败！ 我们在这里帮助您找到答案。 让我们仔细看看 Angular 10 的主要特性。

Angular 10 的特点

尽管 Angular 团队坚持认为最新版本将主要关注质量工具和生态系统，而不是引入过多的新功能，但我们进行了广泛的研究，并为您提供了您可以从该版本中获得的价值的完整列表. 那我们来看看吧。

  • 新的日期范围选择器

Angular Material UI 组件库现在配备了新的日期范围选择器。 不确定它是什么？ 可以将日期范围选择器附加到网页。 它会弹出日历以选择时间、日期或任何预定义的时间段，例如“过去 20 天”。

如果您希望您的用户选择一个日期范围而不仅仅是一个日期，您可以使用 mat-date-range-picker 和 mat-date-range-input 组件。

  • 可选的更严格设置

Angular 10 在使用 ng new 创建新工作区时具有更严格的项目设置。 启用此标志后，它将在您的项目中引入一些新设置，例如提高可维护性、允许 CLI 在您的应用程序中执行高级优化、帮助提前捕获错误等。

这是严格标志的基本工作范围：

- 将模板类型检查转为严格
- 在 TypeScript 中启用更严格
- 配置 linting 规则以防止使用“any”作为类型声明
- 减少默认捆绑预算

  • 关于 CommonJS 导入的警告

使用 CommonJS 打包的依赖项会使包变大，从而减慢应用程序的速度。 一旦构建拉入其中一个这样的包，Angular 10 就会警告开发人员。 这样，他们可以让他们的依赖项知道他们更喜欢 ECMAScript 模块 (ESM) 包。

  • 更新

对 Angular 的依赖项进行了一些重大更新，以便与 JavaScript 生态系统同步。 这些如下：

-TypeScript 更新到 TypeScript 3.9。 它可以帮助团队致力于提高性能和稳定性。
-TSLint 更新到 v6
-TSLib 更新到 v2.0

项目布局也已更新。 因此，您可以在 Angular 10 中看到一个新的 tsconfig.base.json 文件。该文件更好地支持 IDE、构建工具解析类型和包配置。

除此之外，最新的 Angular 版本还支持加速编译器、编辑体验、提示修复和完成等功能。

  • 改进的 ngcc 性能

这个 Angular 10 特性促进了基于程序的入口点查找器的实现。 这可以处理只有 tsconfig.json 文件定义的程序才能到达的入口点。 此外，依赖项隐藏在入口点展览中，无需每次都计算即可读取。

每个包的基本路径以及入口点不需要存储在文件中。 因此应用程序不需要存储不必要的空数组。 此功能有助于在入口点显示和减小文件大小，即使对于大型节点模块也是如此。 这显着提高了性能。

  • 合并多个文件

最新的 Angular 版本支持合并多个翻译文档，没有任何麻烦。 在以前的版本中，这些只能加载一个文件。 现在，用户可以为每个区域指定多个文档，并且所有文件中的事务可以通过消息 ID 合并。 最重要的文档将放在最前面，稍后再进行后备翻译。

  • 异步锁定超时

关于 Angular 10 的另一个有趣的事情是在这个版本中配置了异步锁定超时。 这支持 ngcc.config.js 文件以调整 AsyncLocker 中的重试延迟和重试尝试。 集成测试使开发人员能够监控超时，使用 ngcc.config.js 文件来减少超时跨度并防止测试花费很长时间。 难怪 Web 应用程序开发公司的专业人士欣喜若狂地欢迎最新的 Angular 版本！

  • 路由器

CanLoad 守卫可以返回到最新 Angular 版本中的 UrlTree。 返回 UrlTree 的 CanLoad 守卫使任何前沿导航无效，进而有助于重定向。 这将当前行为与可用的 CanActivate 守卫相匹配——这些也在此处添加。 但是，这不会对预加载产生任何影响。

  • 编译

Ahead-of-Time (AOT) 在构建时编译应用程序及其库。 这是自 Angular 9 以来的常见做法。它可以在构建期间转换代码，甚至在浏览器下载并随后运行该代码之前。 自然，这可以确保在浏览器中更快地呈现。 编译器通过在应用程序 JavaScript 中内联外部 HTML 模板和 CSS 样式表来消除对源文件的单独 AJAX 请求。

Angular 10 中的 AOT 发生了一些明显的变化：

1. 它的增量编译有助于达到更好的构建时间
2. 生成的代码高度兼容tree shaking，可以达到更好的构建大小
3. 该版本使您能够探索一些新功能，例如延迟加载组件而不是模块、元编程或高阶组件、不基于 Zone.js 的最新变更检测系统等。

  • 错误修复

在这个版本中，已经完成了许多错误修复。 其中包括在编译器中删除任何未寻址的范围实例，在导入不存在的符号时解决与迁移相关的错误，识别受 TestBed 中覆盖影响的模块等。 此外，核心中还有一个解决方法，用于修复 Terser Inlining 错误。

  • 更好的社区参与

Angular 已经拥有一个庞大的全球开发社区，他们始终如一地为整个范围内的 Angular 项目提供价值。 最近，该组织本身正计划采取策略并进行投资以增强社区的力量并使平台变得更好。

  • 弃用和删除

Angular 包格式不再包含 FESM5 或 ESM5 包。 这可以让您在 Angular 库和包中运行 yarn 或 npm install 时节省 119MB 的下载和安装时间。 这些格式可以被丢弃，因为任何支持 ES5 的降级都是在开发过程结束时进行的。

此外，Angular 组织已弃用对旧版浏览器（如 IE9、10 和 Internet Explorer Mobile）的任何支持。

  • 其他变化

Angular 10 带来了一些突破性的变化。 例如，Logic 会根据超出午夜的格式化日期间进行更新。 如果您的应用程序使用 formatDate 或 DatePipe 甚至 b 和 B 格式代码，它将受到此更改的影响。

另一个变化是任何返回 EMPTY 的解析器都将取消导航。 开发人员必须使用一些特定的值更新解析器，例如 default!Empty。

Angular NPM 不包含一些 jsdoc 注释来支持 Closure Compiler 的高级优化。 那些使用 Closure Compiler 的人应该更好地使用直接从源代码构建的 Angular 包，而不是使用 NPM 上发布的版本。 暂时，用户可以使用他们当前的构建管道。

在这个版本中，在从 ServiceWorker 缓存中检索源时会忽略 Vary 标头。 即使它们的标题不相似，这也会导致检索源。 如果应用程序必须根据请求标头区分其响应，请确保将 Angular ServiceWorker 配置为避免缓存任何受影响的资源。

关于任何未知元素的警告现在都被标记为错误。 这不会破坏您的应用程序，但它可以启动期望通过 console.error 记录的工具。

如何更新到 Angular 10

要升级到最新版本的 Angular，您可以使用以下命令：

ng 更新 @angular/cli @angular/core

这是更新到 Angular 10 版的明确指南。但是，如果没有技术专业知识，该命令可能没有任何用处。 聘请专业的 Angular 开发服务以成功更新到 Angular 10。

结论
Angular 10 提供的所有便利可能会说服您升级您的应用程序框架版本。 相信我们，这是值得的。