記錄項目版本升級angular4 ~ angular5

前言：

在上一篇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的跨度，實際變化並不大。