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

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

4. 迁移配置到当前版本的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

5. 升级Angular框架包到v6，升级到对应的TypeScript版本。

ng update @angular/core@6

6. 使用ng update查看更新情况
7. 升级RxJS，使用rxjs-tslint自动更新规则删除已弃用的RxJS 6功能，对于大多数应用程序，这将意味着运行以下两行命令：

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

8. ng-zorro-antd升级到1.8.1，根据编译报错提示更改对应的语法，详见另一篇antd升级。

---

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

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

1. 运行命令，启动更新程序，查看需要更新的依赖：

ng update

2. 升级剩下的依赖

ng update --all --force

3. 升级完成后，需要安装

npm install

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

---

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

1. 将核心框架和CLI更新到v7：

ng update @angular/cli@7
ng update @angular/core@7

2. 更新并提交更改，更新到核心框架和CLI的版本8 ：

ng update @angular/cli@8
ng update @angular/core@8

3. 启动angular项目报错的话，需要升级rxjs：

npm uninstall rxjs --save
npm install rxjs@6.3.3 --save

或者使用yarn

yarn remove rxjs
yarn add rxjs@6.3.3

4. 继续升级的话，确保使用的是Node 10.13或更高版本，确保typescript版本升级到3.4以上。

下面进入Angular版本9

1. 先更新到最新版本8.x，并提交变更

ng update @angular/core@8
ng update @angular/cli@8

2. 升级至9

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

3. 项目现以更新至TypeScript 3.8
4. 运行以下命令将进入最新版（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

---

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