[從 0 開始的 Angular 生活]No.12 升級 Angular 應用程式到新版的方法

發表於 | 更新於 | 分類於

前言

介紹完如何使用 Angular CLI 部屬 Angular 專案後，緊接著要提到如何更新 Angular CLI 或 Angular 的版本。但是這部分可能只有純介紹，因為我也是最近才剛開始開發 Angular ，所以環境基本上都是最新的，就不提供更新前後的對照圖了。

確認目前版本

使用 VSCode 開啟專案並打開終端機，我們可以輸入 ng v 或是 ng --version 指令確認目前專案的 Angular CLI 的版本。

Image

可知

  • 我的 Angular 目前是 7.2.15 版
  • 而 Angular CLI 則是 7.3.9 版

透過 Angular CLI 進行版本升級

我們可以透過 Angular CLI 提供的指令進行 Angular 專案的升級

1
ng update

透過這個指令可以把 Angular CLI 以及 Angular 甚至 TypeScript 、 Webpack 、 Rxjs 等等直接升級到最新版本。

所以我們不用擔心 Angular 要如何升級版本的問題，可以透過 ng update 輕鬆地把版本升級到最新版，而這個指令也會處理掉一些版本升級時可能會遇到的問題。

而背後的原理就是 Angular CLI 修改了 package.json 內記載的版本號，然後執行 npm update 命令。

當我們執行過 ng update 安裝完畢後，可以確認一次目前的版本，會發現到已經升級到最新了。

延伸讀物：

如何更新 Global 的 Angular CLI 版本

如果想更新全域的 Angular CLI 版本，可以打開命令提示字元，並輸入 npm list -g --depth=0

使用這個指令列出目前全域環境中，安裝了那些 npm 套件，並只顯示第一層目錄。

可以發現全域的 Angular CLI 版本同樣也是 7.3.9 版。

透過 npm outdate -g 指令查詢目前全域環境安裝的套件是否有最新版本

如果沒有任何資訊出現，代表目前已經是最新版。

如有出現訊息，則透過 npm install -g @angular/cli 重新安裝一次即可。

小結

大部分的情況，如果是小幅度的升級，像是小數點後小版本的變更，基本上是不會動到程式碼的。

如果是大幅度的升級，像是 Angular 2 升級到 Angular 4 或者其他情況，可能就需要進行一些評估了。

而這部分 Angular 也很貼心的設有一個網站可以幫助我們快速查詢各個版本的 Angular 升級時需要注意的事項：

0%