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导入。