【Angular】Angular 5 升级到Angular 6 过程实录

             背景

头儿给了一个别的项目的框架,让升级到6。
怎么就算任务完成了呢?我要达到什么效果呢?package.json里的“5”变为“6”,然后项目能正常运行,就算成功了。
【Angular】Angular 5 升级到Angular 6 过程实录
【Angular】Angular 5 升级到Angular 6 过程实录

             参考资料

https://update.angular.io/
这是官方文档,不仅仅是从5升级到6,从任何版本升级到任何版本,都有详细步骤。

             运行步骤

第一步:运行:npm install -g @angular/cli
【Angular】Angular 5 升级到Angular 6 过程实录
报了-4075的错误,网上说应该是依赖的问题,建议由“npm”改为“cnpm”
第二步:运行:cnpm install -g @angular/cli
【Angular】Angular 5 升级到Angular 6 过程实录
成功,接着往下输入命令。
第三步:运行:npm install @angular/cli
【Angular】Angular 5 升级到Angular 6 过程实录
【Angular】Angular 5 升级到Angular 6 过程实录
如图所示,报了-4048的错误,跟echarts有关系。解决办法是把package.json文件中相关的那句代码删除。我当初就卡在这了,不知道咋解决,是请风大神帮忙的。
【Angular】Angular 5 升级到Angular 6 过程实录
删除以后将此命令重新运行一遍,成功。
【Angular】Angular 5 升级到Angular 6 过程实录
第四步:运行:ng update @angular/cli
【Angular】Angular 5 升级到Angular 6 过程实录
报错了,原因是本地脚手架版本较低,解决办法就是升级。
第五步:运行:npm install –save-dev @angular/[email protected]
【Angular】Angular 5 升级到Angular 6 过程实录
第六步:运行:ng update @angular/core
【Angular】Angular 5 升级到Angular 6 过程实录
第七步:运行:ng update @angular/material
【Angular】Angular 5 升级到Angular 6 过程实录
第八步:运行:ng serve,成功
【Angular】Angular 5 升级到Angular 6 过程实录
第九步:分别运行:npm install -g rxjs-tslint、rxjs-5-to-6-migrate -p src/tsconfig.app.json
看样子是把一个已弃用的东西删除。

             小结

这样走下来,发现也没有想象中那么难。最重要的是“以终为始”,要知道自己要达到的效果,然后有一种敢于接触新东西的勇气。