前言：

在上一篇ng4文章《angular4——實(shí)際項(xiàng)目搭建總結(jié)》中說(shuō)過(guò)，等到ng5正式發(fā)布，并且螞蟻的NG ZORRO兼容ng5之后，我會(huì)對(duì)ng4項(xiàng)目進(jìn)行升級(jí)。這篇文章就是大概說(shuō)下升級(jí)的折騰過(guò)程吧。下面結(jié)語(yǔ)中有最佳實(shí)踐，整個(gè)過(guò)程中有自己挖的坑，可以選擇忽略，直接看結(jié)語(yǔ)。

升級(jí)（折騰）過(guò)程：

①ng5更新：

訪問(wèn)這個(gè)鏈接是ng的升級(jí)導(dǎo)向https://angular-update-guide.firebaseapp.com/，內(nèi)容如下圖（看起來(lái)還是很簡(jiǎn)單的）：

復(fù)制了導(dǎo)向上的命令，安裝的時(shí)候有問(wèn)題，出現(xiàn)找不到包的情況，后來(lái)把報(bào)錯(cuò)信息里的包鏈接復(fù)制出來(lái)去訪問(wèn)，也確實(shí)是404。

看起來(lái)總覺(jué)得不對(duì)，轉(zhuǎn)義的url。去掉了轉(zhuǎn)義字符訪問(wèn)，就可以了

其實(shí)是安裝命令后面版本多了引號(hào)的問(wèn)題，確實(shí)沒(méi)注意這個(gè)問(wèn)題，因?yàn)橹苯訌?fù)制的升級(jí)導(dǎo)向里的命令，把版本的引號(hào)去掉就可以了

安裝最新版本的時(shí)候，發(fā)現(xiàn)有個(gè)package-lock文件，以前都沒(méi)注意，然后了解了一下這個(gè)文件，不知道的大家可以自己查詢(xún)一下。? node_mouldes里有兩個(gè)不同版本的包，因?yàn)榭绱蟀姹玖?，所以并沒(méi)有刪掉舊版本，項(xiàng)目引用的時(shí)候會(huì)優(yōu)先使用新版本，所以舊版本留在node_modules里也似乎沒(méi)關(guān)系。這塊加深了對(duì) “^” “~” 等版本前綴的認(rèn)識(shí)。

升級(jí)導(dǎo)向上面說(shuō)到替換模塊，實(shí)際我發(fā)現(xiàn)我沒(méi)有替換模塊，5.x版本編譯依然通過(guò)，并且能夠使用。

打開(kāi)了官網(wǎng)，查看了下HttpModule和Http模塊，模塊依然存在，只是多了一行描述，建議替換為另一個(gè)包，看來(lái)angular5依然保留了不被推薦的包，算是平滑過(guò)度嗎？

不僅僅是這兩個(gè)模塊，官方描述@angular/http整個(gè)包都被@angular/common/http替代，在更新ng5的時(shí)候注意對(duì)比這兩個(gè)模塊，以便修改自己的代碼。

新的模塊簡(jiǎn)化了很多，我重新修改了http攔截器，代碼量有所減輕。目前項(xiàng)目能夠編譯通過(guò)并正常運(yùn)行了，但是螞蟻的ng zorro還沒(méi)有更新，目前是ng4版本的支持，所以項(xiàng)目雖然運(yùn)行成功，但是部分ngzorro組件會(huì)報(bào)錯(cuò)。

②NG ZORRO更新：

NG ZORRO 0.5.x更新到0.6.x，螞蟻的0.5.x版本是兼容angular4的，0.6.x之后是angular5版本，文檔也為這兩個(gè)版本做了不同的入口，點(diǎn)個(gè)贊。

目前升級(jí)了之后發(fā)現(xiàn)，編譯出錯(cuò)了，應(yīng)該是有些使用方式發(fā)生了變動(dòng)，先看下最新的文檔

總之讓我刪除多余的副本，我就刪了1.8.4再編譯試試。但是依然會(huì)報(bào)錯(cuò)，而且報(bào)錯(cuò)信息一大串，最后一排是如下，總之問(wèn)題確實(shí)是因?yàn)楦铝?.6.x的ng zorro。我重新安裝回0.5.x的ng zorro，編譯通過(guò)了。那確定應(yīng)該是版本兼容的問(wèn)題了。

實(shí)在有點(diǎn)不解，不知道什么意思。angular/cli 1.5.0升級(jí)到1.5.5，準(zhǔn)備用最新的cli生成一個(gè)新的ng5項(xiàng)目，然后引入螞蟻 看會(huì)不會(huì)報(bào)錯(cuò)。因?yàn)槲浵伖倬W(wǎng)文檔都那么寫(xiě)，說(shuō)明應(yīng)該沒(méi)啥問(wèn)題。

ng new demo項(xiàng)目，npm install，之后再npm install ng-zrrro-antd,出現(xiàn)了一個(gè)不贊成警告，和報(bào)錯(cuò)信息一樣 指向的是@angular/cdk5.0.0這個(gè)包。

先不管，ng serve試試，編譯通過(guò)了，cli生成的是angular 5.0.3。好吧，我目前升級(jí)的是5.0.0版本，那我試試把項(xiàng)目升級(jí)為5.0.3。嗯，還是不行，但我發(fā)現(xiàn)node_modules有些還是5.0.0版本，并沒(méi)有更新5.0.3，而剛才新建的demo項(xiàng)目都是5.0.3。

好吧，我把node_moudles刪了，用cli生成的最新package.json替換原本的package.json再加上ngzorro，重新裝一遍。除了模塊版本號(hào)，5.x的package.json和4.x實(shí)際沒(méi)區(qū)別（angular update guide 上 4.0 升級(jí)到 5.0的文檔里還多了一個(gè)@angular/platform-server，實(shí)際5.0.3沒(méi)有這個(gè)模塊了），然后運(yùn)行就通過(guò)了，目前ng5和ng zorro都升級(jí)成功了。? 感覺(jué)問(wèn)題還是在node_modules里各種版本模塊太多了，有些并沒(méi)有更新到，或者有些依賴(lài)發(fā)生了沖突。? 那還不如一開(kāi)始就直接刪node_modules，不走那么麻煩的升級(jí)流程，不過(guò)也要根據(jù)情況做決定。

順帶提一個(gè)問(wèn)題： 螞蟻官網(wǎng)上文檔替換app.module時(shí)候依然用的是HttpModule這個(gè)模塊，實(shí)際ng官方建議是用 HttpClientModule。也許他們應(yīng)該更新下，但是不更新也不影響項(xiàng)目運(yùn)行，我提了issue，他們很快回應(yīng)了說(shuō)下個(gè)版本會(huì)更新，嗯~那就好。

結(jié)語(yǔ)：

折騰了這么久，實(shí)際最佳實(shí)踐，就是先刪了node_modules文件夾，直接用ng cli 生成的最新的package.json替換4.x的，再加上項(xiàng)目引入的其他模塊，重新npm install一次。其實(shí)一開(kāi)始就知道這么做可能會(huì)方便很多，不停的刪node_modules文件夾，重復(fù)一些步驟來(lái)驗(yàn)證一些問(wèn)題，很廢時(shí)間，但通過(guò)這個(gè)過(guò)程我自己對(duì)一些問(wèn)題的理解要深入一些了?？傊?，下次直接刪node_modules用最新的package.json替換吧，當(dāng)然也要注意新版本和舊版本package.json的變化。

關(guān)于項(xiàng)目發(fā)布有兩種方式，一種是服務(wù)器直接拉取git倉(cāng)庫(kù)，在服務(wù)器安裝node_modules并執(zhí)行編譯任務(wù)更新線上環(huán)境； 一種是本地編譯打包，然后再推送到服務(wù)器上。? 如果是前者，在依賴(lài)包升級(jí)的時(shí)候，就要格外小心了，出意外的話會(huì)直接影響線上環(huán)境。

順便說(shuō)下ng編譯的問(wèn)題，有時(shí)候會(huì)有一些編譯報(bào)錯(cuò)，怎么改都還是報(bào)錯(cuò)，重新執(zhí)行ng serve報(bào)錯(cuò)可能就沒(méi)有了。? 有時(shí)候的報(bào)錯(cuò)是編譯過(guò)程中改錯(cuò)了代碼，但是報(bào)錯(cuò)信息也許沒(méi)有直接說(shuō)明問(wèn)題，這個(gè)時(shí)候重新執(zhí)行一下ng serve 報(bào)錯(cuò)信息可能就不一樣了，也許就是能讓你找到問(wèn)題的報(bào)錯(cuò)。? 其實(shí)ng2+還是很好用的，目前國(guó)內(nèi)用的人比較少，如果要學(xué)還是學(xué)最新版比較好，ng2+以后框架差別其實(shí)并不大，只是版本號(hào)看起來(lái)很?chē)樔硕?，容易讓人想到ng1 - ng2的跨度，實(shí)際變化并不大。