🐑 👩🏼‍🔧 🍖 Angular 9现在可用-常春藤到了 🔳 🏆 🏏

Angular的版本9已发布，这是涵盖整个平台的主要版本，包括框架本身，Angular材料和CLI。在此版本中，应用程序默认情况下切换到Ivy编译器和运行时，并且还提供了改进的组件测试方法。

这是三年来最大的Angular更新之一，开发团队对允许开发人员创建更好的应用程序并为Angular生态系统做出贡献的机会感到兴奋。

如何升级到版本9

请访问update.angular.io以获取更多信息。为确保更新顺利进行，建议您首先升级到最新版本的Angular8。

升级到最新版本8

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

要熟悉此更新中所做的主要更改，包括不推荐使用的API，请参阅Angular文档中的升级到Angular版本9。

常春藤

默认情况下，版本9将所有应用程序转移到Ivy编译器和运行时。除了数百个固定的错误之外，Ivy编译器和运行时还具有许多优点：

较小的捆束尺寸
更快的测试
最佳调试
改进的CSS类和样式绑定
改进的类型检查
改进的构建错误消息
缩短了构建时间，默认情况下启用了AOT
改善国际化

让我们详细考虑一些改进

较小的捆束尺寸

Ivy编译器旨在删除Angular不与树状交换一起使用的部分，并减少了为Angular组件生成的代码量。

由于有了这些改进，应用程序的大小可以大大减少。

不使用框架的许多功能的小型应用程序可以从树状结构中受益最多。
具有许多组件的大型应用程序可以从减小的工厂规模中受益。
中型应用程序将变得大致相同或略小，因为它们从树状结构中受益较少，并且无需使用许多组件即可从小型工厂中受益匪浅。

更快的测试

常春藤TestBed实现也已更新，变得更加高效。

以前，TestBed会在每次测试运行之间重新编译所有组件，而不管是否对这些组件进行了任何更改（例如，通过覆盖）。
在Ivy中，除非手动重写了组件，否则TestBed不会重新编译组件，这避免了大多数测试之间的重新编译。

进行此更改后，框架的核心测试通过速度将提高约40％。预计用户会注意到测试其应用程序的速度提高了40-50％。

改进的调试

Ivy提供了用于调试应用程序的其他工具。使用Ivy运行时以开发模式启动应用程序时，现在提供了一个用于调试ng的新对象。

Angular , .
, applyChanges

Ivy还改进了堆栈跟踪，以调试诸如ExpressionChangedAfterItHasBeenCheckederror之类的问题。以前，堆栈不是很有用：

使用Ivy，您会看到更多有用的信息，这些信息使您可以直接使用经过修改的表达式进入模板指令。

例如，如果单击上面堆栈中的AppComponent_Template，则可以在生成的代码中看到发生错误的特定行：

如果需要，还可以转到以下任何框架说明，以跟踪框架如何创建或更新组件。

改进了样式和CSS类。

Ivy提供了增强的样式处理能力。以前，如果应用程序包含相互竞争的样式定义，则这些样式可以相互替换。使用常春藤，样式可以合并。

考虑以下模板和组件片段：

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

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

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

以前，将应用最后计算的绑定，这可能取决于对这些表达式进行更改的时间。如果未定义myColor和myOtherColor，则将忽略静态“红色”样式。

在版本9中，您可以以不受时间限制的明确优先级来管理样式。最具体的样式优先。例如，对[style.color]的绑定将覆盖相交的绑定[style]。

但是，出于向后兼容的原因，我们使[ngStyle]和[ngClass]的行为与以前相同。更新捕捉值时，新值将覆盖所有重叠的捕捉。

您可以在模板语法指南中阅读有关样式优先规则的更多信息。在文档中。

作为样式重构的副作用，您现在还可以绑定到CSS变量（CSS自定义属性）。

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

类型检查得到改善

Angular编译器可以检查更多应用程序类型并应用更严格的规则。这些功能将帮助您在开发的早期阶段确定错误。

除标准标记外，还支持两个主要标记用于其他类型检查：

fullTemplateTypeCheck-启用此标志告诉编译器检查模板中的所有内容（ngIf，ngFor，tp-template等）
strictTemplates-激活此标志将应用最严格的规则进行类型检查。

→ 有关模板中类型检查的更多信息

修正了构建错误

新的Ivy编译器不仅速度更快，并且提供更高的类型安全性，而且还使读取错误消息更加容易。

在版本8或View Engine中，典型的编译器错误如下所示：

在具有Ivy的版本9中，相同的错误如下所示：

缩短了构建时间，默认情况下启用AOT编译器。

借助Ivy架构，编译器性能得到了显着提高。
根据开销来衡量编译器性能，以简化TypeScript应用程序的编译。对于我们的文档项目（angular.io），使用Ivy的开销从0.8x减少到0，x，提高了近40％。

这意味着AOT的构建可以明显更快。因此，即使在开发模式下，您也可以使用AOT。这意味着“ ng服务”现在具有与发布版本相同的优势，从而改善了Angular的开发体验。

由于编译器和运行时的更改，entryComponents也不再需要。使用这些组件时，将自动检测并编译它们。

增强国际化（i18n）

国际化是Angular的一项功能，您可以为一个语言环境构建一次应用程序，并获得高度优化和本地化的应用程序。9.0版通过在构建过程的后期移动i18n查找来加速了该过程。此更改使其速度提高了10倍。

→ 有关新i18n的更多信息：角度的/ localize和新的angular.json。

ng更新更可靠

已对ng update的操作进行了更改，以使其更加可靠和有用。

始终使用最新版本的CLI。从8.3.19 CLI开始，我们现在使用更新目标版本中的CLI。将来，更新将始终由最后一个CLI处理。
更好的更新进度。ng update现在提供有关幕后情况的更多信息。对于每个迁移，您将看到有关它的信息。
更容易调试更新。默认情况下，ng update将启动所有迁移，并将累积的更改留给磁盘进行验证。版本9升级还引入了一个新标志--create-commits。当您运行ng update --create-commits时，该工具会在每次迁移后捕获代码库的状态，以便您可以逐步进行和调试发布到代码中的更改。

“ providedIn”的新功能

在Angular中创建@Injectable服务时，必须选择将其添加到注入器的位置。除了先前的“ root”和“ module”选项之外，还出现了两个附加选项。

平台-提供者：“平台”指示使该服务可在特殊的单例平台注入器中使用，该注入器由页面上的所有应用程序共享。
任何-为每个模块（包括惰性模块）提供唯一的实例

→ 有关 providerIn的更多信息

组件绑定

组件测试历来依赖于使用实现细节（例如CSS选择器）来查找组件和触发事件。这意味着无论何时更改组件库，都必须更新基于这些组件的所有测试。

版本9引入了组件绑定，它们提供了另一种测试方法。通过从实现细节中抽象出来，可以确保测试定义正确并且不那么脆弱。

现在可以使用这些绑定对Angular Material的大多数组件进行测试，并且合成（CDK）中的任何作者组件也可以使用它们。

这是之前的测试示例：


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

现在，同样的事情：


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

新组件

现在，您可以将YouTube和Google地图中的功能合并到您的应用程序中。

您可以将YouTube播放器与新的youtube播放器一起嵌入到您的应用程序中。
我们还将介绍google-maps组件。这些组件使可视化Google Maps，显示标记和连接互动变得容易，因此它就像常规的角度组件一样工作，从而无需学习Google Maps API。

IDE和语言服务改进

Visual Studio Marketplace平台上的Angular语言服务扩展已进行了重大改进。随着大型建筑的修复，以解决性能和稳定性问题，许多长期存在的错误已得到修复。

模板语法的TextMate语法现在允许您突出显示嵌入式和外部模板中的语法
转到templateUrl和styleUrls的定义
工具提示中的类型和NgModule信息

TypeScript 3.7支持

Angular已更新为可与TypeScript 3.6和3.7一起使用，包括TypeScript 3.7中非常流行的可选绑定功能。为了与生态系统保持联系，我们还更新了其他依赖项的版本，例如zone.JS和RxJS。

Angular 9现在可用-常春藤到了