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上面寻求帮助，或者咱们一块儿探讨。

　　最后仍是贴上更细事后项目运行的截图吧