Angular 8之升级和新功能摘要

Angular 8之升级和新功能摘要

Angular 8已经到来,并带来了大量的工作流程和性能改进。就像我们之前发布的几个版本一样,让我们回顾一下Angular 8的新功能,以及如何将Angular 7应用程序升级到Angular 8。

Angular 8中明显的新功能数量有限,但确实还有一些好东西:

Differential loading

由于差异加载,您的Angular 8应用程序现在将自动提高性能。

通过差异加载,在构建生产时会创建两个包:支持ES2015 +的现代浏览器包和仅支持ES5版JavaScript的旧浏览器包。由于新浏览器中ES6模块的支持,浏览器将自动加载正确的捆绑包。

这一新功能为Angular v8带来了最大的单一性能提升。较新的浏览器将能够加载更少的代码并加载更少量的polyfill。

你不需要做任何特殊的事情来从差异加载中受益,带有–prod标志的ng build命令将负责捆绑所有内容,以便差异加载开箱即用:

ng build --prod

惰路由的动态导入

延迟加载的路由现在使用标准动态导入语法而不是自定义字符串。这意味着当模块丢失或拼写错误时,TypeScript和linters将能够更好地进行投诉。

所以一个懒惰加载的导入看起来像这样:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

现在看起来像这样:

{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }

如果您使用ng upgrade命令升级应用程序,则会为您处理语法更改。

CLI工作流程改进

CLI正在不断改进,现在ng build,ng test和ng run可以通过第三方库和工具进行扩展。例如,AngularFire已经使用deploy命令来使用这些新功能。

What about Ivy and Bazel?

我们将不得不再等待Ivy,新的渲染引擎和新的构建系统Bazel,以备Angular正式使用。很快就会提供两者的选择预览。

从Angular 7升级到Angular 8

正如前几个版本的情况一样,将应用程序从Angular 7升级到Angular 8是一件轻而易举的事。如果您已经迁移到使用新的HttpClient和RxJS 6,则尤其如此。

在最简单的情况下,您只需要运行一个命令即可升级到Angular 8:

ng update @angular/cli @angular/core

使用该命令,您的延迟加载路由导入将自动迁移到新的导入语法。

有关升级过程的一些注意事项:

  • 可能会弹出一些新的语法错误。这是由于Angular现在使用的是TypeScript 3.4,它可能会出现一些之前未突出显示的问题。
  • 您需要确保使用的是Node.js版本12或更高版本。您可以通过运行$ node -v来检查您正在使用的Node版本。如果您需要获得最新版本,请转到Node的官方下载页面

升级Angular Material

如果您的应用使用了Angular Material,您将需要使用以下命令:

ng update @angular/material

如果您尝试从与Angular 7不同的版本升级,则可以使用官方Angular升级指南获取有关如何继续操作的说明。

此命令还将处理将Angular Material组件导入更改为每个特定组件,而不是从全局@ angular / material导入。

发布了145 篇原创文章 · 获赞 357 · 访问量 44万+

猜你喜欢

转载自blog.csdn.net/wf19930209/article/details/93380228