如何优雅升级ng2项目

本文首发简书http://www.jianshu.com/p/b583e6bc6139, 欢迎转载，但请注明转载链接，谢谢！

说明

这里的升级不是指ng1如何升级到ng2，仅使用ng2为栗子，说明，如何升级一个现有的项目。如果想看下如何从ng1升级到ng2，一定要关注Angular中文社区 （微信号： angularcn）其中

从ng1到ng2的平滑升级

就是答案！

问题

项目经过迭代，package文件中的依赖库有可能不是最新的，为及时更新依赖库，就需要修改package中的版本号。但是，有些依赖又会依赖其他的依赖库，如果仅仅是简单的更新某个依赖库到最新版本，极有可能出现

peer Dependencies

错误。那该如何处理这个问题呢？ 稳步推进！

package依赖包版本

在讲解如何升级之前，先来了解下npm管理依赖包中存在的几个标点符号。

只有版本号

package.json中，版本号如下：

“@angular/core”: “2.0.1” ====> 安装指定版本

符号 ^

举栗子： “@angular/core”: “^2.0.1”

====> 安装该版本以及比该版本更新的版本， 如： 2.0.1 , 2.0.2, 2.1.0, 2.7.0

但是，3开头的不可以

符号 ~

举栗子： “@angular/core”: “~2.0.1”

====> 只能安装 2.0.1， 2.0.2， 。。。。 2.0.9

但是, 2.1.0不可以

符号 >= <=

更有者，可以使用如下形式： >= … <=

“@angular/core”: “>=2.0.1<=3.0.0”

常用npm升级命令

以ng2的ng2-starter-webpack项目为例子说明，如何优雅升级ng2相关版本。

package.json 文件内容：

"dependencies": {
"@angular/common": "2.0.1",
"@angular/compiler": "2.0.1",
"@angular/core": "2.0.1",
"@angular/forms": "2.0.1",
"@angular/http": "2.0.1",
"@angular/platform-browser": "2.0.1",
"@angular/platform-browser-dynamic": "2.0.1",
"@angular/router": "3.0.1",
"@angular/upgrade": "2.0.1",
"angular-in-memory-web-api": "0.1.1",
"bootstrap": "3.3.5",
"core-js": "2.4.1",
"reflect-metadata": "0.1.6",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.23"
},
"devDependencies": {
"html-webpack-plugin": "^2.24.1",
"ts-loader": "^0.9.5",
"typescript": "^2.0.6",
"typings": "^1.5.0",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}

很显然，ng2的库不是最新的，那么想升级到最新的库，而且不让他们出现error， 这就需要如下步骤。注意，如果按照上面的package.json文件，

npm install

会出现问题，莫慌，故意为之！

`-- UNMET PEER DEPENDENCY zone.js@0.6.23

原因是 故意降低了 zone.js的版本，正确版本是 0.6.25

npm list –depth 0

简单查看 依赖库 的信息.

$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2\ng2-starter-webpack
+-- @angular/common@2.0.1
+-- @angular/compiler@2.0.1
+-- @angular/core@2.0.1
+-- @angular/forms@2.0.1
+-- @angular/http@2.0.1
+-- @angular/platform-browser@2.0.1
+-- @angular/platform-browser-dynamic@2.0.1
+-- @angular/router@3.0.1
+-- @angular/upgrade@2.0.1
+-- angular-in-memory-web-api@0.1.1
+-- bootstrap@3.3.5
+-- core-js@2.4.1
+-- html-webpack-plugin@2.24.1
+-- reflect-metadata@0.1.6
+-- rxjs@5.0.0-beta.12
+-- ts-loader@0.9.5
+-- typescript@2.0.10
+-- typings@1.5.0
+-- webpack@1.13.3
+-- webpack-dev-server@1.16.2
`-- UNMET PEER DEPENDENCY zone.js@0.6.23

npm ERR! peer dep missing: zone.js@^0.6.25, required by angular-in-memory-web-api@0.1.1

注意，其中的npm Error： angular-in-memory-web-api@0.1.1需要的zone.js版本是

0.6.25

, 所以导致出现了错误，这就是常见的

peer dependencies

问题。

npm ERR! peer dep missing: zone.js@^0.6.25, required by angular-in-memory-web-api@0.1.1

只要修改为正确的版本后，就不会出现问题了。

npm outdated

该命令是查询当前package中有哪些依赖库是过时了的。 结果如下

$ npm outdated
Package                                  Current         Wanted      Latest  Location
@angular/common                            2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/compiler                          2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/core                              2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/forms                             2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/http                              2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/platform-browser                  2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/platform-browser-dynamic          2.0.1          2.0.1       2.2.0  ng2-starter-webpack
@angular/router                            3.0.1          3.0.1       3.2.0  ng2-starter-webpack
@angular/upgrade                           2.0.1          2.0.1       2.2.0  ng2-starter-webpack
angular-in-memory-web-api                  0.1.1          0.1.1      0.1.15  ng2-starter-webpack
bootstrap                                  3.3.5          3.3.5       3.3.7  ng2-starter-webpack
reflect-metadata                           0.1.6          0.1.6       0.1.8  ng2-starter-webpack
rxjs                               5.0.0-beta.12  5.0.0-beta.12  5.0.0-rc.3  ng2-starter-webpack
ts-loader                                  0.9.5          0.9.5       1.2.1  ng2-starter-webpack
typescript                                2.0.10          2.1.1      2.0.10  ng2-starter-webpack
typings                                    1.5.0          1.5.0       2.0.0  ng2-starter-webpack
zone.js                                   0.6.25         0.6.25      0.6.26  ng2-starter-webpack

一目了然，当前的version， 最新的version。

不要猴急把package中的版本号都替换为最新的，要考虑依赖的问题。ng2的core库依赖rxjs.js, zone.js， 把ng2升级到

2.2.0

，是否有必要把rxjs 或 zone.js升级为最新的版本呢？ 也不一定。

npm view xxxpackage/xxx@x.x.x peerDependencies

该命令告诉我们，具体某个依赖包 的依赖关系。

$ npm view @angular/core@2.2.0 peerDependencies
{ rxjs: '5.0.0-beta.12', 'zone.js': '^0.6.21' }

以查看 @angular/core@2.2.0 为例，它依赖 * { rxjs: ‘5.0.0-beta.12’, ‘zone.js’: ‘^0.6.21’ } , 也就是说升级@angular/core* 到 * 2.2.0 * 没有必要升级rxjs, zone.js版本，及时他们有更新的版本。

再看一个依赖库： * angular-in-memory-web-api@0.1.1 *

$ npm view angular-in-memory-web-api@0.1.1  peerDependencies

{ '@angular/core': '^2.0.0',
'@angular/http': '^2.0.0',
'reflect-metadata': '^0.1.3',
rxjs: '5.0.0-beta.12',
'zone.js': '^0.6.25' }

以上说明，当升级ng2相关库为 2.2.0的时候，可以不用升级 * angular-in-memory-web-api@0.1.1 *

但是，修改完成 ng相关库为 2.2.0后，再次执行 npm install， 还是有错误

$ npm list --depth 0
ng2-starter-webpack@0.0.1 E:\Project_Dev\Angularjs2\ng2-starter-webpack
+-- UNMET PEER DEPENDENCY @angular/common@2.2.0
+-- @angular/compiler@2.2.0
+-- UNMET PEER DEPENDENCY @angular/core@2.2.0
+-- @angular/forms@2.2.0
+-- @angular/http@2.2.0
+-- UNMET PEER DEPENDENCY @angular/platform-browser@2.2.0
+-- @angular/platform-browser-dynamic@2.2.0
+-- @angular/router@3.0.1
+-- @angular/upgrade@2.2.0
+-- angular-in-memory-web-api@0.1.1
+-- bootstrap@3.3.5
+-- core-js@2.4.1
+-- html-webpack-plugin@2.24.1
+-- reflect-metadata@0.1.6
+-- rxjs@5.0.0-beta.12
+-- ts-loader@0.9.5
+-- typescript@2.0.10
+-- typings@1.5.0
+-- webpack@1.13.3
+-- webpack-dev-server@1.16.2
`-- zone.js@0.6.25

npm ERR! peer dep missing: @angular/common@2.0.1, required by @angular/router@3.0.1
npm ERR! peer dep missing: @angular/core@2.0.1, required by @angular/router@3.0.1
npm ERR! peer dep missing: @angular/platform-browser@2.0.1, required by @angular/router@3.0.1

本次是angular/router的版本太低了，@3.0.1 要求ng相关库是2.0.1， 2.2.0无法使用，所以需要升级angular/router 为3.2.0

小结

升级版本是个细致的活儿，需要按照科学的方法来做。否则容易出现各种问题，脑壳都会抓掉。小结升级会使用到的命令吧！ 总结为一句话： 看版本，查依赖，修json，重复几次

step 1 看版本

npm outdated

step 2 查看依赖

npm view xxxpackage/xxx@x.x.x peerDependencies

step 3 修改相关版本

step 4 重复来几次