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/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] --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上面寻求帮助,或者我们一起探讨。

  最后还是贴上更细过后项目运行的截图吧

  

  

时间: 2024-08-04 15:41:11

Angular杂谈系列2-Angular2升级Angular4指南的相关文章

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用

Angular2升级到Angular4

angular4终于在两天前发布了正式版本,那么怎么升级呢?其实angular2和angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. npm uninstall -g @angular/cli npm cache clean npm install -g @angular/[email protected] rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt;

Angular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一. Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构. 对于成熟的开发人员来说,有以上两种选择是一件很棒的事情:但是,对于处于学习阶段的新晋开发人员来说,可能有点不知如何选择. 那么,本文将会对Angular2和Angular4进行深度对比,以便帮助大家更好的了解这两个版本. Angular2 Angular2是在2015年底发布的.接下来

Angular 2 系列: 简介

Angular 2 Series: Introduction By Max on April 2, 2015 現在, Angular 2 和 Ionic 2 呼之欲出.我們超讚的小隊正在為下一個大版本的 Ionic 和 Angular 2 在努力工作.我為我們在那麽短的時間內取得那麽大的進展感到興奮,而且我相信,Ionic 社區,肯定會愛死它的. 對許多人來說, Angular 2 把他們所鐘愛框架改得太多了(這就是相愛相殺吧).大家花了太多時間去學習 v1 的術語了(directive,有的舉

一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘

我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌握Power BI的功能要点,熟练的利用一些新功能来提高效率,同时还需要合理的利用仪表盘,以及合理的调整对象,同时作为一个完整的应用,必须掌握数据刷新和同步的技巧,避免做重复工作. 本文原文地址:一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘 Power BI系列文章地址:微软

一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel

今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单的翻译. 本文原文地址:一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel Power BI系列文章地址:微软Power BI技术文章与资源目录 1.系列文章说明 一起学微软Power BI系列 文章将分为 官方文档,文档翻译,中文入门教程,中文视频教程和案例等内容

一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化

在前面的系列文章中,我们介绍了官方有关获取数据,以及建模的原始文档和基本介绍.今天继续给大家介绍官方文档中,有关可视化的内容.实际上获获取数据和建模更注重业务关系的处理,而可视化则关注对数据的解读.这是我的理解,因为可视化的手段非常丰富,在面对大量的数据和模型,如何从中提取重要的关系,发现重要的数据趋势,并来指导生产和业务开展,这个才是体现数据价值的地方.可视化虽然很简单,但过程非常体现你对业务的理解和发现问题的思路,并不是一个拖动图表的过程.这一块内容非常多,以后有机会再根据实际案例来一步步掌

一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模

我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家介绍官方文档中,最核定的一个步骤,建模,不管是在Power BI还是在Tableau中,建模都是一个必不可少的步骤,包括传统的Power Privot中,也需要建模这个过程.建模的过程是一个不断演变和需要不断总结经验的过程,和我们传统的关系类型数据库设计有一些类似. 本

MySQL 升级方法指南大全

MySQL 升级方法指南大全 http://blog.sina.com.cn/s/blog_5a8b8eb80100ld7a.html 通常,从一个发布版本升级到另一个版本时,我们建议按照顺序来升级版本.例如,想要升级 MySQL 3.23 时,先升级到 MySQL 4.0,而不是直接升级到 MySQL 4.1 或 MySQL 5.0. 如果都是比较新的版本的升级可以参考下面的文章, MySQL数据库的版本更新很快,新的特性也随之不断的更新,更主要的是解决了很多影响我们应用的BUG,为了让我们的