前言：

在上一篇ng4文章《angular4——實際項目搭建總結》中說過，等到ng5正式發布，並且螞蟻的NG ZORRO兼容ng5之後，我會對ng4項目進行升級。這篇文章就是大概說下升級的折騰過程吧。下面結語中有最佳實踐，整個過程中有自己挖的坑，可以選擇忽略，直接看結語。

升級（折騰）過程：

①ng5更新：

訪問這個鏈接是ng的升級導向 https://angular-update-guide.firebaseapp.com/ ，內容如下圖（看起來還是很簡單的）：

復制了導向上的命令，安裝的時候有問題，出現找不到包的情況，後來把報錯信息裏的包鏈接復制出來去訪問，也確實是404。

看起來總覺得不對，轉義的url。去掉了轉義字符訪問，就可以了

其實是安裝命令後面版本多了引號的問題，確實沒註意這個問題，因為直接復制的升級導向裏的命令，把版本的引號去掉就可以了

安裝最新版本的時候，發現有個package-lock文件，以前都沒註意，然後了解了一下這個文件，不知道的大家可以自己查詢一下。 node_mouldes裏有兩個不同版本的包，因為跨大版本了，所以並沒有刪掉舊版本，項目引用的時候會優先使用新版本，所以舊版本留在node_modules裏也似乎沒關系。這塊加深了對 “^” “~” 等版本前綴的認識。

升級導向上面說到替換模塊，實際我發現我沒有替換模塊，5.x版本編譯依然通過，並且能夠使用。

打開了官網，查看了下HttpModule和Http模塊，模塊依然存在，只是多了一行描述，建議替換為另一個包，看來angular5依然保留了不被推薦的包，算是平滑過度嗎？

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

新的模塊簡化了很多，我重新修改了http攔截器，代碼量有所減輕。目前項目能夠編譯通過並正常運行了，但是螞蟻的ng zorro還沒有更新，目前是ng4版本的支持，所以項目雖然運行成功，但是部分ngzorro組件會報錯。

②NG ZORRO更新：

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

目前升級了之後發現，編譯出錯了，應該是有些使用方式發生了變動，先看下最新的文檔

總之讓我刪除多余的副本，我就刪了1.8.4再編譯試試。但是依然會報錯，而且報錯信息一大串，最後一排是如下，總之問題確實是因為更新了0.6.x的ng zorro。我重新安裝回0.5.x的ng zorro，編譯通過了。那確定應該是版本兼容的問題了。

實在有點不解，不知道什麽意思。angular/cli 1.5.0升級到1.5.5，準備用最新的cli生成一個新的ng5項目，然後引入螞蟻 看會不會報錯。因為螞蟻官網文檔都那麽寫，說明應該沒啥問題。

ng new demo項目，npm install，之後再npm install ng-zrrro-antd,出現了一個不贊成警告，和報錯信息一樣 指向的是@angular/cdk5.0.0這個包。

先不管，ng serve試試，編譯通過了，cli生成的是angular 5.0.3。好吧，我目前升級的是5.0.0版本，那我試試把項目升級為5.0.3。嗯，還是不行，但我發現node_modules有些還是5.0.0版本，並沒有更新5.0.3，而剛才新建的demo項目都是5.0.3。

好吧，我把node_moudles刪了，用cli生成的最新package.json替換原本的package.json再加上ngzorro，重新裝一遍。除了模塊版本號，5.x的package.json和4.x實際沒區別（angular update guide 上 4.0 升級到 5.0的文檔裏還多了一個@angular/platform-server，實際5.0.3沒有這個模塊了），然後運行就通過了，目前ng5和ng zorro都升級成功了。 感覺問題還是在node_modules裏各種版本模塊太多了，有些並沒有更新到，或者有些依賴發生了沖突。 那還不如一開始就直接刪node_modules，不走那麽麻煩的升級流程，不過也要根據情況做決定。

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

結語：

折騰了這麽久，實際最佳實踐，就是先刪了node_modules文件夾，直接用ng cli 生成的最新的package.json替換4.x的，再加上項目引入的其他模塊，重新npm install一次。其實一開始就知道這麽做可能會方便很多，不停的刪node_modules文件夾，重復一些步驟來驗證一些問題，很廢時間，但通過這個過程我自己對一些問題的理解要深入一些了。總之，下次直接刪node_modules用最新的package.json替換吧，當然也要註意新版本和舊版本package.json的變化。

關於項目發布有兩種方式，一種是服務器直接拉取git倉庫，在服務器安裝node_modules並執行編譯任務更新線上環境； 一種是本地編譯打包，然後再推送到服務器上。 如果是前者，在依賴包升級的時候，就要格外小心了，出意外的話會直接影響線上環境。

順便說下ng編譯的問題，有時候會有一些編譯報錯，怎麽改都還是報錯，重新執行ng serve報錯可能就沒有了。 有時候的報錯是編譯過程中改錯了代碼，但是報錯信息也許沒有直接說明問題，這個時候重新執行一下ng serve 報錯信息可能就不一樣了，也許就是能讓你找到問題的報錯。 其實ng2+還是很好用的，目前國內用的人比較少，如果要學還是學最新版比較好，ng2+以後框架差別其實並不大，只是版本號看起來很嚇人而已，容易讓人想到ng1 - ng2的跨度，實際變化並不大。

記錄項目版本升級angular4 ~ angular5