首页 > 代码库 > Angular杂谈系列2-Angular2升级Angular4指南

Angular杂谈系列2-Angular2升级Angular4指南

  

  什么什么?Angualr4都发布了,之前不都才Angualr2的么?又要推翻重来,啊?

  那当然不是,Angualr4只是一个版本号而已,本质上还是Angular2;以后,谷歌把新版本的Angualr称为Angualr,而之前的1.x版本叫做AngualrJs1.x。

   Angualr4的更新内容大致包括以下几个方面。  

      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就可以启动原来的项目。
 
  Angualr4原则上是兼容Angualr2的,这也是官方的说法。我自己的项目可以正常运行,如果有读者在使用过程中发现什么问题,可以在github上面寻求帮助,或者我们一起探讨。
  最后还是贴上更细过后项目运行的截图吧
 技术分享
  
  
 

Angular杂谈系列2-Angular2升级Angular4指南