Angular 升级|使用Cli或Npm

本文简单说一下对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

不出意外你会得到下面的结果：

Name	Version	Command to update
@angular/core	9.1.12 -> 10.0.10	ng update @angular/core
@ngrx/store	9.2.0 -> 10.0.0	ng update @ngrx/store
...	...	...

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正潜伏在你的代码里。