记录项目版本升级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的跨度,实际变化并不大。

时间: 2024-08-29 17:30:05

记录项目版本升级angular4 ~ angular5的相关文章

SpringBoot项目版本升级:从1.5.3升级到2.1.8版本

SpringBoot项目版本升级:从1.5.3升级到2.1.8版本 前言 简单记录一次本人在自己的SpringBoot项目project-template中,把1.5.3版本升级到2.1.8版本时升级的步骤,及遇到的问题. 提升parent版本号 更改pom文件中parent的版本号 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-par

react native 项目版本升级

首先说明一下rn项目的一种相当顺滑升级方法: 1.全局安装react-native-git-upgrade npm i -g react-native-git-upgrade 2. 在项目目录下执行命令: react-native-git-upgrade over!就是这么简单 问题记录: 最近在升级项目rn版本0.57.1->0.58.5时遇到了一些问题,提示Requires Babel "^7.0.0-0", but was loaded with "6.26.3&

记录-项目java项目框架搭建的一些问题(maven+spring+springmvc+mybatis)

伴随着项目框架的落成后,本以为启动就能成功的,but.... 项目启动开始报错误1:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener 这个错百度到说是缺少这个包,但实际在项目中看到maven里面是有这个包的.于是继续百度到[可能包是找到了,但没有依赖在项目中] 项目右击-----project-----deployment assembly , add ,java bui

【node】记录项目的开始与完成——pipeline_kafka流式数据库管理项目

前言: 我始终坚信的一点是,学习的效果80%来自总结,甚至全部都是.总结的好处就是让你能翻出你的过往,指出其中的不足,看到未来的改进方法,好的总结更能让知识产生飞跃,所以在工作之余,部署项目之际,总结一番. 架构处理: 一.背景 公司数据量庞大,万花筒一样的领导随即用上了pipeline_kafka这样的流式数据架构.其实在接手项目之前,作为一个应用开发.我是不太清楚kafka是什么鬼的,还有stream.transform.等等一系列名词,听起来很高大上,但是很懵比=-=. 领导的目标是做一个

电商网站开发笔记记录(-) 项目初始化

新建一个maven -achetype-webapp项目,建好完善后基本的目录,然后配置tomcat,在deployment里引入artifact,第一次建的时候发现没有artifact,可能是module之类的没有初始化好,当时也没有吧maven的依赖import changes,不知道默认的webapp模板会不会自动引入初始的依赖,第二次建的时候import changes,后deployment 加artifact成功,然后启动tomcat成功. 2.为了对项目实行更好的管理,使用git,

记录项目中easyui的运用

1.实现合并列,且文字显示居左,背景为固定颜色 效果图: 实现代码: 1 $('#tab').datagrid({ 2 title : '', //表格标题 3 iconCls : 'icon-list', //表格图标 4 nowrap : false, //是否只显示一行,即文本过多是否省略部分. 5 striped : false, 6 fitColumns : true, //防止水平滚动 7 scrollbarSize : 0, //去掉右侧滚动条列 8 collapsible : f

记录项目中用的laypage分页代码

最终才觉得,好记性不如烂笔头,毕竟已经不是刚毕业时候的巅峰了,精力有所下降,很多时候记不住东西. 参考url:http://www.layui.com/laypage/ 直接上代码了 <script src="/assets/js/laypage/laypage.js"></script> 进入页面时,默认加载第一页:定时器每隔60秒取新数据: $(document).ready(function () { initPaganation(); setInterv

项目部署到服务器过程记录

本文记录项目部署过程. 一.服务器准备 // TODO 服务器环境搭建.工具安装....(如windows/Linux.jetty.mysql.....) 二.DB整理 1.本地连接服务器DB 打开Navicat(或SQLyog),点击"连接"打开新建连接界面: 2.DB迁移 在服务器上新建一个DB 将开发时用的DB迁移到服务器上,需要对DB表进行整理 -- 保留需要的表,保留某些表需要的初始数据,不需要的一律清理掉. 三.项目打包 1.从 git 上取项目最新代码 2.修改项目配置(

wc项目记录

1.Github项目地址:https://github.com/3116004700/ruanjiangongcheng 2.预估时间见PSP表格. 3.解题思路描述: 在看到这个项目的时候我就想到了利用java里面的IO流来实现这个项目,统计文件中的字符数.单词数.和行数,统计行数可以选择利用bufferreader来按行读出文件中的内容,设置一个变量来统计行数,直到整个文件全部读完:字符数可以通过字节流进行统计,相对来说也比较简单,这个项目相对而言难点我认为是对于单词的界定,究竟满足什么条件