記錄項目版本升級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的跨度,實際變化並不大。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM