說明
這里的升級不是指ng1如何升級到ng2，僅使用ng2為栗子，說明拿穴，如何升級一個現(xiàn)有的項目削彬。如果想看下如何從ng1升級到ng2全庸，一定要關(guān)注Angular中文社區(qū) （微信號： angularcn）其中 從ng1到ng2的平滑升級 就是答案！
問題
項目經(jīng)過迭代融痛，package文件中的依賴庫有可能不是最新的壶笼，為及時更新依賴庫，就需要修改package中的版本號雁刷。但是覆劈，有些依賴又會依賴其他的依賴庫，如果僅僅是簡單的更新某個依賴庫到最新版本沛励，極有可能出現(xiàn) peer Dependencies 錯誤责语。那該如何處理這個問題呢？ 穩(wěn)步推進(jìn)目派！
package依賴包版本
在講解如何升級之前坤候，先來了解下npm管理依賴包中存在的幾個標(biāo)點符號。
只有版本號
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項目為例子說明棒厘，如何優(yōu)雅升級ng2相關(guān)版本纵穿。
package.json 文件內(nèi)容：
"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的庫不是最新的奢人，那么想升級到最新的庫谓媒，而且不讓他們出現(xiàn)error， 這就需要如下步驟何乎。注意句惯，如果按照上面的package.json文件，npm install會出現(xiàn)問題支救，莫慌抢野，故意為之！
`-- 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, 所以導(dǎo)致出現(xiàn)了錯誤，這就是常見的 peer dependencies 問題贬堵。
npm ERR! peer dep missing: zone.js@^0.6.25, required by angular-in-memory-web-api@0.1.1
只要修改為正確的版本后恃轩，就不會出現(xiàn)問題了。
npm outdated
該命令是查詢當(dāng)前package中有哪些依賴庫是過時了的黎做。 結(jié)果如下
$ 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
一目了然叉跛，當(dāng)前的version， 最新的version引几。
不要猴急把package中的版本號都替換為最新的昧互，要考慮依賴的問題。ng2的core庫依賴rxjs.js, zone.js伟桅， 把ng2升級到2.2.0，是否有必要把rxjs 或 zone.js升級為最新的版本呢叽掘？ 也不一定楣铁。
npm view xxxpackage/xxx@x.x.x peerDependencies
該命令告訴我們，具體某個依賴包 的依賴關(guān)系更扁。
$ 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' }
以上說明溃列，當(dāng)升級ng2相關(guān)庫為 2.2.0的時候劲厌，可以不用升級 ** angular-in-memory-web-api@0.1.1 **
但是，修改完成 ng相關(guān)庫為 2.2.0后听隐，再次執(zhí)行 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相關(guān)庫是2.0.1雅任， 2.2.0無法使用风范，所以需要升級angular/router 為3.2.0
小結(jié)
升級版本是個細(xì)致的活兒，需要按照科學(xué)的方法來做沪么。否則容易出現(xiàn)各種問題硼婿，腦殼都會抓掉。小結(jié)升級會使用到的命令吧禽车！ 總結(jié)為一句話： 看版本寇漫，查依賴，修json殉摔，重復(fù)幾次
step 1 看版本
npm outdated
step 2 查看依賴
npm view xxxpackage/xxx@x.x.x peerDependencies
