时间戳

首页 > 技术文章 > angular项目从版本5到10的打怪升级之路

angular项目从版本5到10的打怪升级之路

QueenZhang 2020-09-09 11:15 原文

angular项目升级记录

如果项目当前版本低于6，需要先升级到6，否则无法使用ng update来自动升级，所以推荐先按照下面的方法升级到6

注意事项：
升级的过程中一定要时刻检查下面几个模块的版本，保证它们是兼容的：
node的版本
typescript的版本
angular的版本
antd的版本
以及其他依赖库的版本

angular6以下版本更新到6：

  1. 如果使用旧版HttpModule和Http服务，请切换到HttpClientModule和HttpClient服务。HttpClient简化了默认的人体工程学（不再需要映射到JSON），现在支持类型化的返回值和拦截器。
  2. 确保使用的是Node 8或更高版本。
  3. 通过运行以下命令在本地更新Angular CLI
npm install @angular/cli@6
ng update @angular/cli@6
  1. 迁移配置到当前版本的angular.json ( Angular5以下的配置文件名是angular-cli.json )
ng update @angular/cli --migrate-only --from=<你的旧版本号>

例如：

ng update @angular/cli --migrate-only --from=1.7.4

或者只使用大版本号

ng update @angular/cli --migrate-only --from=1
  1. 升级Angular框架包到v6，升级到对应的TypeScript版本。
ng update @angular/core@6
  1. 使用ng update查看更新情况
  2. 升级RxJS，使用rxjs-tslint自动更新规则删除已弃用的RxJS 6功能，对于大多数应用程序，这将意味着运行以下两行命令：
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
  1. ng-zorro-antd升级到1.8.1，根据编译报错提示更改对应的语法，详见另一篇antd升级。

好啦，目前已经成功升级到angular6版本了，
继续升级有两个方案，保证typescript版本升级到3.1以上

方案一： 直接更新到最新（本次升级到10了）

  1. 运行命令，启动更新程序，查看需要更新的依赖：
ng update
  1. 升级剩下的依赖
ng update --all --force
  1. 升级完成后，需要安装
npm install

当当当当，更新完毕，如果编译有错误，则按照错误提示一一更改。

方案二：一级一级升（6升7,7升8,8升9,9升10）

  1. 将核心框架和CLI更新到v7：
ng update @angular/cli@7
ng update @angular/core@7
  1. 更新并提交更改，更新到核心框架和CLI的版本8 ：
ng update @angular/cli@8
ng update @angular/core@8
  1. 启动angular项目报错的话，需要升级rxjs：
npm uninstall rxjs --save
npm install rxjs@6.3.3 --save

或者使用yarn

yarn remove rxjs
yarn add rxjs@6.3.3
  1. 继续升级的话，确保使用的是Node 10.13或更高版本，确保typescript版本升级到3.4以上。
下面进入Angular版本9
  1. 先更新到最新版本8.x，并提交变更
ng update @angular/core@8
ng update @angular/cli@8
  1. 升级至9
ng update @angular/core@9
ng update @angular/cli@9
  1. 项目现以更新至TypeScript 3.8
  2. 运行以下命令将进入最新版（Angular版本10）
ng update @angular/core @angular/cli

关于报错：

ModuleWithProviders参数报错
  • 解决办法：
    ModuleWithProviders增加类型参数
    ModuleWithProviders = RouterModule.forRoot(routes, { useHash: false });
Can't resolve 'core-js/es6/array'
  • 解决办法：
    在package.json文件中将core-js的版本由‘2.5.4’或者'3.0.0'改为'2.5.7'，重新install
    import ‘core-js/es7/reflect’;替换为 import ‘core-js/es/reflect’
typescript不兼容问题 @angular/compiler-cli@8.0.3 requires a peer of typescript@>=3.4 ❤️.5 but none is installed. You must install peer dependencies yourself.
  • 解决办法：
    安装兼容版本
    运行命令
npm i typescript@3.4.3
node-sass报错
  • 解决办法：
    重新编译node-sass
    运行命令
npm rebuild node-sass

项目比较简单，遇到的问题不全，欢迎补充！！！

推荐阅读