angular升级最佳实践,angular5升级到angular9

1.angular5升级前要做的准备工作

1.保证你的node版本是8以及8以上。

解决方案:安装nvm。nvm是什么,nvm是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。

安装地址:https://github.com/coreybutler/nvm-windows/releases

具体安装过程请自行百度。

2.全局搜索检查你的项目代码,查看HttpModuleHttp服务 ,请将旧版的HttpModuleHttp服务 升级成为HttpClientModuleHttpClient服务。 (ps:升级之后你可以注意查看,HttpClientModule都会继承,所以如果都是用的同一个拦截器,那么之前的模块里面的HttpClientModule都可以去掉。如果你在不同的模块中多次导入HttpClientModule,那么在你添加的模块中拦截器都不会生效。)

3.要是从@angular/core 导入了动画服务,则改成从 @angular/animations 导入。

4.升级前请把yarn.lock或者package.lock文件删除,不然你的升级命令很有可能失败。

5.要是你有依赖的第三方插件,当你脚手架升级完成之后也要注意同步升级你的第三方依赖。

6.本人的项目ui框架是采用ng-zorroUI框架,脚手架从5升级至6是破坏性升级,其ng-zorro升级也是破坏性的,写法发生了很大变化,具体参照对比官方文档:

https://ng.ant.design/version/9.3.x/docs/introduce/zh

2.angular5升级至angular6步骤

1.运行一下命令:

1
2
3
npm install @angular/cli@6
ng update @angular/cli@6
ng update @angular/core@6

2.angular5用的脚本文件是angular-cli.json,升级到6之后的脚本文件名更改为angular.json

执行以下命令自动更改:

ngupdate @angular/cli –migrate-only –from=1.7.3

3.使用新的 Angular CLI 命令更新 package.json 中的scripts。可以通过控制台输入ng build –help查询。

4.通过执行以下命令来删除不建议使用的rxjs5功能:

npm install-grxjs-tslintrxjs-5-to-6-migrate-psrc/tsconfig.app.json

将所有rxjs的写法升级之后执行命令:

npmuninstall rxjs-compat

rxjs5升级到rxjs6之后其导入写法均发生了变化,其变化可以参考官方文档:

https://github.com/ReactiveX/rxjs/blob/6.x/docs_app/content/guide/v6/migration.md

3.angular6升级至angular9步骤

1.node版本可以升级10以上

2.执行命令:

1
2
ng update @angular/cli@7 @angular/core@7
ng update @angular/cli@8 @angular/core@8

3.脚手架升级到8之后ViewChildContentChild用法发生了改变:

从@viewchild(‘foo’) foo:ElementRef变成@ViewChild(‘foo’,{static:true}) foo:ElementRef。

路由懒加载也发生了改变:

1
loadChildren: 'app/app.module#AppModule';

变成:

1
loadChildren:()=>import('app/app.module').then(m=> m.AppModule)

4.执行命令升级至9:

1
ng update @angular/cli@9 @angular/core@9

4.升级之后的变化

1.当你用webpack-bundle-analyzer进行打包分析的时候,你会发现你现在打的包大小比之前的包小了三分之一左右,这样大大提高了你的网页访问速度。

2.Angular8以及之前的版本使用的是JIT编译(即时编译,也称运行时编译), 而Angular9使用 Ivy 的 AOT 编译(预先编译),能更快的渲染,更少的异步请求等。

3.应用服务端渲染,能够提升在手机和低功耗设备上的性能,以及快速加载首屏,让用户体验更好

好了,看了这么多,可以开始升级啦!

原文链接:https://www.jdkdownload.com/angular/angular_upgrade.html