本文簡單說一下對Angular的升級，因為我們的項目需要與時俱進，各種library都在升級和更新，定期進行npm audit檢查是我們需要保持的好習慣。當然，升級Angular只是一個可選項，因為實際上基本每個stable版本的Angular本身是穩定的，但往往由于其他dependences的升級需要高版本的Angular支持，所以我們還是得對Angular進行升級。

一. 官方Cli update方法（推薦）

    官方的Guide文檔：https://update.angular.io 

    界面如下：

update-guide.png

    使用方法：選擇你當前版本（看你@angular/core的版本），選擇你需要更新的版本，選擇你的App復雜程度，選擇其他附加項（同時包含了Angular1的代碼，使用了material...）。選擇好后下面會自動加載你的升級步驟。

偉大的分界線

如果你無法“科學有效的上網“，我簡單總結一下幾個方面：

1. 確認你的node/typescript版本符合對應Angular版本需求

node -v
npm -v

2. 安裝對應版本的@angular/cli

npm i @angular/cli –save-dev

3. 自動升級

ng update

不出意外你會得到下面的結果：

Fine，挨著執行執行升級命令就好了。

如果你是個急性子，有命令適合你：

ng update --all --force

當然我不推薦這樣做，因為這樣很有可能導致一些break changes讓你的項目down掉，所以我推薦按照方法繼續走

4. 升級部分組件

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

但很有可能你會得到下面這樣的結果：

Error: Repository is not clean.  Please commit or stash any changes before updating.

感覺是不是像你的git報的error？

沒關系，這個基本不影響你的升級，我們只需要加上--allow-dirty就可以了:

ng update @angular/core@8 @angular/cli@8 --allow-dirty

但是即使這樣你基本會遇到這個問題：

update-error.png

這是在提醒你，這些組件需要的dependences的版本和你即將安裝或已經安裝的版本存在差異性，這時你需要保證亮點：

• 所有依賴性的版本 >= 需要的版本

• 高版本的依賴項不存在已使用的breaking changes

那么這時候你就可以加上--force了

ng update @angular/core@8 @angular/cli@8 --allow-dirty --force

等待安裝，然后完成你的工作。

5. 依次升級其他依賴項。

二. Npm方法

其實你也不需要安裝cli，因為實際上它也做的工作也只是check & install。所以你完全可以這樣做：

1. 全局安裝 npm-check

   npm install npm-check -g
   

2. 在項目根目錄下使用npm-check你的升級項

   cd your_project_package.json_location
   npm-check -u
   

3. 根據產生的列表，在控制臺輸入你需要更新的與angular相關的組件，用空格間隔，直接敲回車

4. 此時有個辦法，就是安裝的過程中你按control + c ，停止當前的更新，復制控制臺中自動生成的命令行，比如：

   npm install --save @angular/animations@^10.0.1 @angular/cdk@^10.2.0 @angular/common@^10.2.3 @angular/compiler@^10.1.1 @angular/core@^10.1.1 @angular/forms@9 @angular/platform-browser@^10.1.1 @angular/platform-browser-dynamic@^10.1.1 @angular/upgrade@^10.1.1 --color=always
   

5. 這個時候你需要把具體的version改為你需要更新的@angular版本，以angular 9.x為例

   npm install --save @angular/animations@9 @angular/cdk@9 @angular/common@9 @angular/compiler@9 @angular/core@9 @angular/forms@9 @angular/platform-browser@9 @angular/platform-browser-dynamic@9 @angular/upgrade@9 --color=always
   

6. 等待安裝完成

三. 檢查

    升級完成后一定要檢查一下，至少將`package.json`里面的指令都執行一遍，特別是build和test。另外啟動項目之后，每個節目都測一測，可能有些bug正潛伏在你的代碼里。