angular專案從版本5到10的打怪升級之路
阿新 • • 發佈：2020-09-09
angular專案升級記錄
如果專案當前版本低於6，需要先升級到6，否則無法使用ng update來自動升級，所以推薦先按照下面的方法升級到6
注意事項：
升級的過程中一定要時刻檢查下面幾個模組的版本，保證它們是相容的：
node的版本
typescript的版本
angular的版本
antd的版本
以及其他依賴庫的版本
angular6以下版本更新到6：
- 如果使用舊版HttpModule和Http服務，請切換到HttpClientModule和HttpClient服務。HttpClient簡化了預設的人體工程學（不再需要對映到JSON），現在支援型別化的返回值和攔截器。
- 確保使用的是Node 8或更高版本。
- 通過執行以下命令在本地更新Angular CLI
npm install @angular/cli@6
ng update @angular/cli@6
- 遷移配置到當前版本的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
- 升級Angular框架包到v6，升級到對應的TypeScript版本。
ng update @angular/core@6
- 使用ng update檢視更新情況
- 升級RxJS，使用rxjs-tslint自動更新規則刪除已棄用的RxJS 6功能，對於大多數應用程式，這將意味著執行以下兩行命令：
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
- ng-zorro-antd升級到1.8.1，根據編譯報錯提示更改對應的語法，詳見另一篇antd升級。
好啦，目前已經成功升級到angular6版本了，
繼續升級有兩個方案，保證typescript版本升級到3.1以上
方案一： 直接更新到最新（本次升級到10了）
- 執行命令，啟動更新程式，檢視需要更新的依賴：
ng update
- 升級剩下的依賴
ng update --all --force
- 升級完成後，需要安裝
npm install
噹噹噹當，更新完畢，如果編譯有錯誤，則按照錯誤提示一一更改。
方案二：一級一級升（6升7,7升8,8升9,9升10）
- 將核心框架和CLI更新到v7：
ng update @angular/cli@7
ng update @angular/core@7
- 更新並提交更改，更新到核心框架和CLI的版本8 ：
ng update @angular/cli@8
ng update @angular/core@8
- 啟動angular專案報錯的話，需要升級rxjs：
npm uninstall rxjs --save
npm install [email protected] --save
或者使用yarn
yarn remove rxjs
yarn add [email protected]
- 繼續升級的話，確保使用的是Node 10.13或更高版本，確保typescript版本升級到3.4以上。
下面進入Angular版本9
- 先更新到最新版本8.x，並提交變更
ng update @angular/core@8
ng update @angular/cli@8
- 升級至9
ng update @angular/core@9
ng update @angular/cli@9
- 專案現以更新至TypeScript 3.8
- 執行以下命令將進入最新版（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/[email protected] requires a peer of typescript@>=3.4 ❤️.5 but none is installed. You must install peer dependencies yourself.
- 解決辦法：
安裝相容版本
執行命令
npm i [email protected]
node-sass報錯
- 解決辦法：
重新編譯node-sass
執行命令
npm rebuild node-sass
專案比較簡單，遇到的問題不全，歡迎補充！！！