项目基于angular8 + ng-zorro + ng-alain的后台管理系统,开发有些年头, 一直没有升级angular框架,当前正好有时间,上司要求升级框架到最新(当前ng15),现已升级完成(8升级到15),说一下升级要点和感受
整本升级思路
一级一级的升
8升到9,再9升到10 直至到15
升级前看下相关文档:
angular升级参考网站 update.angular.io/
ng-zorro 升级参考 github.com/NG-ZORRO/ng… 在issue里面搜索对应的升级issue,如从8升到9可 关键字v9就可以搜索出来
ng-alain升级参考github.com/ng-alain/ng… 在issue里面搜索对应的升级issue,同上
为啥只能一级一级的升,不能从8直接干到15?
angular、ng-zorro等每一级都可能有破坏、废弃更改,使用ng update 骤步升级时里面做了一些自动修复, 减少手动替换,不能自动修复的也会给修改提示,而直接跨版本升级是无法做到的
升一级的详细步骤
以8升到9为例
angular
先看下 angular升级指导 选择当前项目版本升级8 => 9 下面会出现相关的文字,告诉你如何更新 如下图
这里主要看更新前的提示,只看可能用到的需要手动的部分,照要求处理完后, 更新到9到步骤处理如下图
还有一个更新后的注意点如下
8升到9是一个很大的更新,主要是和lvy有关,一般版升级其实很少要手动的,如手动要改的地方在执行 ng update @angular/cli@9 @angular/core@9 后也会在后台打印项目中哪些地方要改动要怎么改动,所以很是方便,不用但心漏改,
ng-zorro
打开ng-zorro的issues搜索v9找到升9的指南如下图
最后执行指令 ng update ng-zorro-antd@9
如果控制台出现警告消息请按提示修改对应代码
ng-alain
同ng-zorro一样的处理
每升一级后,项目要能正常运行才能进行下一个版本升级
其它问题
升级过程中报库的类型错误
1、tsconfig设置"skipLibCheck": true或"skipDefaultLibCheck": true(4.5后用的),跳过库的类型定义检查,具体可以到typescript官网查看这些属性具体含义 2、将库的类型在node_modules中直接修改为any,先让项目正常进行,等后面angular升级到最新,最后再处理
ng-alain在10升级到11的文档中, 可选项使用新的基础布局、空白布局
虽然是可选,但这里一定要改用新 基础布局、空白布局 ,原因是旧的写法在升级上会报错
命令执行
在执行ng update指令时 1、依赖对不上时会退出更新,这里可以在 ng update 后面加 --force 强制更新 2、git本地有更改没有commit时,ng update也会退出,后面可以加 --allow-dirty
安装ng-alain系列时canvas库一直下不动
- 方法一:按canvas库官方方法下载
- 方法二:要是没有用ng-alain里面pdf组件,可以不用下载此依赖,查看lock文件可以看到 pdfjs-dist库依赖了canvas库,但是为可选依赖 optionalDependencies,所以可以在安装时添加参数--no-optional, 即:npm i --no-optional 这样就会阻止可选依赖安装
特别注意点
1、如果有升级的打算,不要在项目中使用复制UI库(ng-zorro)的组件在项目中魔改以满足需求,可能会使后面升级变的无比困难 2、升级时不用提前修改变更点,因为很多在执行ng update 会自动修复,要手动更改的点也会在控制台输出相关要改动的文件和内容
如有升级上的问题,欢迎留言交流