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

---

項目比較簡單，遇到的問題不全，歡迎補充！！！