这就是为什么你今天应该使用 Angular 9

我几乎关注了 Angular 9 发布前后的所有动态。在阅读了 Angular 9 速查表、Angular Next 文档以及观看了官方发布会之后，我决定撰写这篇文章，解释为什么你应该立即开始使用 v9。

这不仅仅是一个新版本，Angular 团队所做的远不止于此。我们终于有了 Ivy，从现在开始，它是视图渲染的推荐选项。这对他们来说是一个巨大的挑战，如此多的变化和改进可能会让 Angular 应用的体验变得不同，让开发者更难适应。首要任务之一是确保尽可能减少重大变更的数量。

在深入研究 Ivy 以及它为何如此酷之前，我们将讨论将 Angular 更新到 v9 是多么容易。

更新从未如此简单

Angular 团队竭尽全力减少您需要进行的手动更改。我们创建了新的原理图，以便ng update为您自动完成迁移。

在某些情况下，只需运行 即可ng update @angular/core @angular/cli完成。如果您需要更深入的分步指南，我建议您访问更新 Angular 网站，或者您也可以查看Brian Love编写的Angular 更新指南。

如果你之前用过 AngularJS，你肯定知道到目前为止更新有多难。我个人一直用 AngularJS，直到 Angular 5 才更新，因为我觉得它有太多重大变更。但现在，感觉更容易上手了。

您需要 Typescript 版本 3.7。

艾薇 (Ivy) 怎么样了？

Ivy 是新的视图渲染引擎。如果你和我一样，你可能会想，等等，什么？

我不会深入探讨，但为了清晰起见，我们可以重新表述上面的说法，说Ivy 是一种管理模板和投影的新方法。我知道这并不简单。幸运的是，你不必关心。

现在，你可能有点摸不着头脑了。正如我所说，Angular 团队专注于尊重 Angular 现有的工作方式。他们想在我们察觉不到的情况下完成这项巨大的改变。

更改是在底层进行的，并且我们拥有相同的 API。这意味着对您来说没有任何变化！

我可以告诉你的是，为什么他们做了这么多的改变

• 更小的捆包。
• 更好的运行时性能。
• 模板类型检查。

更小的软件包对用户来说非常有价值。更快的响应速度不仅提升了用户体验，还能更快地为用户提供服务，从而提升 SEO。我的意思并不是说 Ivy 附带了某些特定功能来提升 SEO，而是说更小的软件包确实有助于提升 SEO。如果您想将 SEO 得分提升到一个新的水平，您需要探索其他选项，例如Scully 的 SSG或Angular Universal 的 SSR。

即使 Ivy 改变了模板的渲染方式，e2e 测试中的旧 DOM 选择查询也不会受到影响。

改进的运行时性能堪称完美，因为现在即使在开发模式下也可以启用 AOT。据 Angular 团队成员称，这是本次更新的一大亮点。我都不知道有多少次在推送代码之前忘记启用 AOT 来构建应用程序，导致流水线中出现了一些本可以捕获的错误。

为了提升运行时性能，很多方面都必须改进。所有查询装饰器（例如 ViewChild、ViewChildren 等）都进行了一些改进，使其更加可预测。团队目前正在讨论更好的查询方法，但我们仍然没有注意到。

模板类型检查彻底改变了游戏规则。现在，Angular 可以帮助你确保模板类型安全。这是一个重大改进，因为现在你可以减少测试数量，并更多地依赖平台。如果你想在项目中强制执行此操作，请在tsconfig.json文件中执行以下操作：

{
  // your options,
  "angularCompilerOptions": {
    // your angular compiler options,
    "fullTemplateTypeCheck": true,
    "strictTemplates": true
  }
}

这样，Angular 会在编译时告诉你模板中是否存在任何类型错误。让我们来实际看看。假设你有一个这样的组件：

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-sample",
  templateUrl: "./sample.component.html",
  styleUrls: ["./sample.component.scss"]
})
export class SampleComponent {
  @Input() number: number;
}

你可以这样使用它：

<app-sample [number]="'text'"></app-sample>

编译应用程序时您将收到此错误：

TS2322: Type 'string' is not assignable to type 'number'.

很酷吧？

即使在编译单个组件时，也可以不使用NgModules，从而加快单元测试速度。Angular 团队没有删除 ，以避免改变 Angular 当前的工作方式。他们近期NgModules没有停止支持 的计划，但组件和核心构建块可能会比模块更受青睐。NgModules

这甚至使得以更简单的方式访问延迟加载组件成为可能。如果您想了解更多信息，请务必查看John Papa撰写的《Angular 9：延迟加载组件》。

ViewChild现在，默认情况下，具有。请记住，如果您想在发生变更检测（ngOnInit）之前{ static: false }访问，则使用静态 true 。ElementRef

我们已经发布了新版本的TestBed，它配备了新的编译器，改进了整个流程。执行时间最多可缩短 40%。在未来的版本中，我们将能够使用 AOT 编译的组件进行单元测试。如果您已经更新，请随时分享您的统计数据。

一些功能被移除了。现在你不能使用Renderer，而必须开始使用Renderer2。值得庆幸的是，ng update原理图已经处理好了这个问题。ngForm元素选择器已被移除，现在只能通过使用 来调用ng-form。

提前思考

如果您经常使用entryComponents，那么多亏了 Ivy，您将不再需要这样做。在 v9 中，它已被宣布弃用。此外，我们可以忘记TestBed.get，并开始使用TestBed.inject，它具有相同的行为，但是类型安全。

Ivy 开启了让国际化变得更好、更轻松的可能性，但目前还未实现。我们需要继续等待更强大的 i18n 集成到 Angular 平台。

我们应该从 迁移ts-lint到es-lint。遗憾的是，对于非常大的应用程序来说，它往往会更慢。不过，目前有人正在努力让它变得更好、更快。

我听到有人说它zone.js快要消失了，但事实并非如此。虽然它不是浏览器标准的一部分，但我们仍然需要zone.js它来进行变化检测。

您能提供什么帮助？

• 今天更新！
• 创建复制问题
• 如果你能帮助解决问题，请继续加入讨论

参考

• Angular 9：准备更新到 Angular 9
• Angular 9 官方发布派对
• Angular 9 - 有哪些新功能？有哪些变化？

结论

Angular 团队为此次更新付出了巨大的努力，不仅包含了 Ivy，还让ng update原理图更加完善、更易于使用。现在，我们有机会帮助他们。让我们立即开始使用 Angular v9！让我们一起创建可复现的仓库问题，这将显著提升开发速度。