Angular雜談系列2-Angular2升級Angular4指南

　　

　　什麼什麼？Angular4都發布了，以前不都才Angular2的麼？又要推翻重來，啊？

　　那固然不是，Angualr4只是一個版本號而已，本質上仍是Angular2；之後，谷歌把新版本的Angular稱爲Angular，而以前的1.x版本叫作AngularJs1.x。

 　　Angular4的更新內容大體包括如下幾個方面。　 

      1.更小、更快

　　　　新的版本下，打包的文件將更小，運行也更快。

　　 2.AngularUniversal

 

     AngularUniversal也就是在服務器端渲染Angular

 　

　　 3.TypeScript2.1,2.2的支持

 

　　最近TypeScript的發展也是很是快，其中也有Angular的緣由，新版本老是會有一些新的東西或改進。

 

　　 4.Animation模塊

 

　　從4.x版本開始，animation再也不是@angular/core裏面的一部分，它被移到單獨的模塊@angular/animations裏

    

　　Angular更新還增長了一些語法加強，不過具體內容就讀者本身去看了。本文講講解如何從Angular2.X升級到Angular4.X。若是你不是使用Angular-cli生成的項目，那麼接下來的內容也不用繼續看了，你能夠直接使用原來的方式對Angualr4進行依賴的升級與打包。

　　Angular-cli進行了一次更新，也就是說，之前的Angular-cli在以後的某一段時間點將再也不得到支持，因此，能遷移的儘快遷移吧。咱們的更新分爲如下幾個步驟

 

　　 1.卸載之前的Angular-cli 工具

 　　

　　npm uninstall angular-cli

　　npm cache clean

　　

 　  2.安裝新的cli工具

 

　　npm install -g @angular/cli

 　 筆者這裏通過了一次比較長時間的編譯，若是遇到這種狀況，請耐心等待。

 

 　  3.更新到最新的Angular版本和最新的依賴

 　　到你的工程目錄下

　　npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

 

　　

　　這個比較快

 

　　 4.修改Angular-cli.json的環境依賴

　　

　　在json文件中找到如下內容

　　　　"environments": {
　　　　"source": "environments/environment.ts",
　　　　"dev": "environments/environment.ts",
　　　　"prod": "environments/environment.prod.ts"
　　　　}

　　替換爲

　　　　"environmentSource": "environments/environment.ts",
　　　　"environments": {
　　　　"dev": "environments/environment.ts",
　　　　"prod": "environments/environment.prod.ts"
　　　　}

 

　　執行了以上內容以後，咱們就能夠正常使用咱們的新項目了。使用ng serve或者ng start就能夠啓動原來的項目。

 

　　Angular4原則上是兼容Angular2的，這也是官方的說法。我本身的項目能夠正常運行，若是有讀者在使用過程當中發現什麼問題，能夠在github上面尋求幫助，或者咱們一塊兒探討。

　　最後仍是貼上更細事後項目運行的截圖吧