Angular 9有什么新功能?

发布于2/12/2020 来自:「前端知否」微信公众号

Angular 9终于发布了!这是自Angular 2以来对Angular框架进行的最重要的更新之一。

这篇文章是对版本9中所做主要更改的摘要。您可以在Angular官方博客上从Angular团队获取更多详细信息。

主要变化:Ivy编译器

Angular团队已经从事Ivy编译器/渲染器开发工作超过两年了。这是对Angular渲染器的完全重写,因此,在Angular的底层进行了相当大的改变。

而且,它是向后兼容的,您使用Angular 2到8编写的代码都可以在Angular 9上使用。

仅仅Ivy就可以实现以下目标:

  • 较小的Javascript包大小:最多减少40%的包
  • 测试速度更快:改进了Angular TestBed,使其速度提高了40–50%
  • 更好的调试:ng对象访问组件的实例并调用它们的方法,并触发更改检测
  • 改进的CSS类和样式绑定:关于多个样式属性之间的样式优先级的更好规则
  • 改进了HTML模板的类型检查:您可以自定义对模板类型的严格程度
  • 改进的构建错误:CLI控制台中更有意义的错误消息
  • 缩短了构建时间,默认情况下启用了AOT:更快的构建速度,以及由于Ahead of Time Compiler,从而在Angular CLI控制台中可以捕获所有错误。
  • 改进的国际化:构建过程快10倍

升级到Angular 9后,大多数应用程序的bundle包大小将发生巨大变化。较早的统计数据显示,bundle包大小平均减少了约30%:

xxx

单元测试的组件控制

如果您使用的是Angular Material,版本9会将组件控制引入表格中。通过提供简单易用的API与这些组件进行交互,这些功能可以帮助使用Material组件的代码测试变得更加容易。

例如,这是一个测试示例,该测试使用组件线束在下拉列表中选择一个元素:

it("should select the state of California", async () => {  
const select = await loader.getHarness(MatSelect);
await select.clickOptions({ text: "California" });
}

漂亮,而且易于阅读!上面的语法优于按id或CSS类选择元素。

YouTube和Google Maps组件

Angular主要由Google开发,所以Google自家产品(例如YouTube和Google Maps)应该提供友好易用的Angular组件。

这两个现在只需安装一个npm:

npm install @angular/youtube-player
npm install @angular/google-maps

有关更多信息:Angular YouTube Player组件和Angular Google Maps组件。

TypeScript 3.7

有了Angular 9,我们将获得最新版本的Typescript,其中包括一些不错的新功能,包括类似于Angular模板中可用的null-safe可选链式运算符。

现在我们也可以在我们的Typescript代码中使用它:

const person= {
name: 'Alain',
car: {
make: 'Tesla'
}
};

const truckModel = person.truck?.model;
console.log(truckModel); // expected output: undefined

console.log(person.getCar?.()) // expected output: undefined

如何更新?

这次更新相对简单,大多数项目仅需花费几分钟。我不到5分钟就更新了我的项目。

有关完整说明,请访问update.angular.io。假设您已经在使用最新版本的Angular,则只需执行一个简单命令即可:

ng update @angular/core @angular/cli