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

17 Mar 2025 | 6 分钟阅读

Angular 9.0.0 的主要版本现已发布。它于 2020 年 2 月 6 日发布。这个主要版本影响了整个平台，包括框架、组件、Angular Material 和 CLI。

Angular 9 在许多方面与其之前的版本不同。它默认将所有应用程序迁移到使用 Ivy 编译器和运行时，并引入了许多改进的组件测试方法。 Angular 9 现在已更新为支持 TypeScript 3.6 和 3.7 版本。

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

始终建议使用最新版本的 Angular。在这里，我们指定了如何将旧版本的 Angular 升级到 Angular 8。无论您使用的是哪个 Angular 版本，都可以按照以下步骤轻松地将其升级到 Angular 最新版本

按照以下步骤将 Angular CLI 更新到 Angular 9 版本

步骤 1：首先，使用以下命令检查您当前的 Angular CLI 版本。

步骤 2：如果您使用的是旧版本的 Angular，请使用以下命令将您的本地 angular cli 更新到 8.3.17 或 8.x 版本。

步骤 3：将 angular cli 更新到 8 或以上版本后，使用以下命令将 angular cli 更新到 Angular 9 版本。

步骤 4：如果您想专门安装 Angular 9，可以使用以下命令。

将 Angular CLI 更新到最新 Angular 版本的另一种方法

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

npm uninstall -g angular-cli // For Windows Open Powershell on Administrator Mode  
sudo npm uninstall -g angular-cli // For Mac

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

Everything you should know about Angular 9

使用以下命令清除缓存

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

注意：在这里，您可以看到安装的 Angular 版本是 Angular 10。Angular 10 是最新的 Angular 版本，于 2020 年 6 月 24 日发布。

使用 Angular 9 的优点

Angular 9 默认将所有应用程序迁移到使用 Ivy 编译器和运行时。 Ivy 编译器解决了许多 bug 问题并修复了它们。除了这些 bug 修复之外，Ivy 编译器和运行时还提供了许多其他优点。

以下是您在 Ivy 编译器和运行时中获得的一些优点列表

更小的捆绑包大小
测试更快
更好的 bug 修复和调试
添加了改进的 CSS 类和样式绑定
添加了改进的类型检查
添加了改进的构建错误
添加了改进的构建时间，默认启用 AOT
改进的国际化

更小的捆绑包大小

改进和更新的 Ivy 编译器旨在通过 tree-shaking 删除 Angular 的未使用部分，并为每个 Angular 组件生成更少的代码。通过使用这些改进，小型和大型应用程序都将获得很多好处。

不使用许多 Angular 功能的小型应用程序将从 tree-shaking 中获得很多好处。
使用许多 Angular 组件的大型应用程序可以受益，因为这些应用程序的大小减小了。
中型应用程序也可以缩小其大小并变得稍微小一些。但是，它们从 tree-shaking 中获得的好处较少，因为它们没有足够的组件来真正利用较小的工厂。

测试更快

在 Angular 9 中，Ivy 效率更高，因为它实现了 TestBed 的新的和改进的形式、结构和外观。

在以前的版本中，TestBed 会在每次测试运行之间重新编译所有组件，而不管是否对组件进行了任何更改（例如，通过覆盖）。
在 Ivy 中，除非您手动覆盖组件，否则 TestBed 不需要重新编译测试之间的组件，因此它不会在测试之间面临重新编译问题。
因此，在此更改之后，测试速度提高了约 40-50％。

更好的 bug 修复和调试

很难开发完全没有 bug 的程序，因此，您的代码库必须配备工具和技术来自行检查 bug，这一点很重要。为了解决此问题，Ivy 提供了更多工具来调试应用程序并修复 bug。现在，当您在带有 Ivy 运行时的开发模式下运行应用程序时，Ivy 会为调试提供一个新的 ng 对象。

Angular 9 中的 Ivy 现在可以方便您访问组件、指令等的实例。
现在，您可以手动调用方法并更新状态。
当您需要查看更改检测的结果时，可以使用 applyChanges 触发更改检测。

添加了改进的 CSS 类和样式绑定

Ivy 编译器和运行时内置了一些特定的功能，可以预测地处理 CSS 类和样式。在以前的版本中，如果应用程序包含样式的竞争定义，则这些样式会破坏性地相互替换。随着 Ivy 编译器在 Angular 9 中的到来，您可以通过清晰、一致的优先级顺序轻松管理样式，而这并不取决于时间。

请参阅以下模板

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div> 

您可以在上面的代码中看到，最后评估的绑定将获胜，这可能取决于更改这些表达式的时间。如果 myColor 和 myOtherColor 都未定义，则静态“red”样式将被忽略。

在 Angular 9 中 Ivy 编译器到来之后，您可以通过清晰、一致的优先级顺序管理样式，而无需依赖于时间。最具体的样式始终具有最高的优先级。例如，绑定到 [style.color] 会覆盖对 [style] 的冲突绑定。

请看示例

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
... 

添加了改进的类型检查

Angular 9 中的 Ivy 编译器为您提供了许多新功能，可以检查应用程序的更多类型，并且还应用了更严格的规则。这些 Ivy 功能可帮助您和您的团队尽早发现 bug 并在开发过程中对其进行修复。现在，Angular 9 提供了三种模式来实现此功能。除了默认标志外，angular 支持的其他标志为

fullTemplateTypeCheck: 当编译器必须检查模板中的所有内容（ngIf、ngFor、ng-template 等）时，将激活此标志

strictTemplates: 当编译器必须将最严格的类型系统规则应用于类型检查时，将激活此标志。