Angular项目如何升级至Angular6步骤全纪录


Posted in Javascript onSeptember 03, 2018

前言

前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试。总的来说,两次升级过程比较类似,也不算复杂。

2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快。

特性的小改动:

  • animations: 只能使用 WA-polyfill 和 AnimationBuilder
  • animations: 在转换匹配器中暴露元素和参数
  • common: 在 NgIf 中使用非模板元素时更好的错误消息
  • common: 导出函数来格式化数字,百分数,货币和日期
  • compiler: 实现“enableIvy”编译选项
  • core: 添加绑定名称到内容更改错误

0. 项目特点

该项目有如下特点:

  • 历史悠久,项目庞大,源码文件数量近千
  • 业务代码为主,极少应用 Angular 高级特性(升级简单)
  • 采用 pug 编写 html 结构
  • 采用 Less 编写 css 样式
  • 采用 Express 和 http-proxy 实现 server 及后端 API 的代理
  • 采用 compodoc 生成文档
  • 采用自开发的 @lzwme/simple-mock 实现 API mock
  • 采用 Fis3 编译,项目源码中深度使用了 fis3 的一些文件引用特性
  • 采用 webpack 和 karma、jasmine 配置和执行单元测试
  • 采用 styleLint、tsLint、husky 和 prettier 执行编码风格校验及格式化处理

项目升级后也没有使用 @angular/cli,继续采用 fis3 作为编译工具。这一是因为许多历史悠久的代码风格无法通过 tslint 校验,ng build 根本无法执行通过;二是因为项目的部分代码编写和构建与发布流程使用了一些 fis3 的特性,改造成本较大。而且经过比对,@angular/cli 的编译过程并没有比 fis3 好很多。

下面简要介绍一下升级的过程和方法。

1. 更新 package.json 的依赖

将 Angular 依赖库改为 ^6.1.0 版本,并且注意项目依赖的 Angular 组件库的兼容版本更新。如我们的项目依赖有如下变更:

  • @ngx-translate/core 需要更新至 ^10.0.2 版本;
  • angular-tree-component 需要更新至 7.x 版本;
  • @ngrx/store 需要更新至 ^6.1.0 版本;

注意:一些组件库的 API 也会有不兼容更新,相关代码逻辑应作改进(可在升级完成后根据文档和错误提示去调试和修改)。

升级后的项目依赖参考:

{
 "devDependencies": {
 "@compodoc/compodoc": "^1.1.5",
 "@lzwme/simple-mock": "~0.0.8",
 "@types/core-js": "^0.9.46",
 "@types/jasmine": "~2.8.6",
 "@types/jasminewd2": "~2.0.3",
 "@types/node": "~8.9.4",
 "@types/webpack": "~2.2.14",
 "angular2-template-loader": "~0.6.2",
 "awesome-typescript-loader": "~3.2.3",
 "body-parser": "1.17.0",
 "cookie-parser": "1.4.3",
 "cross-env": "^5.1.6",
 "debug": "2.6.1",
 "ejs": "2.5.6",
 "express": "4.15.0",
 "fis-optimizer-htmlmin": "0.1.2",
 "fis-optimizer-png-compressor": "0.2.0",
 "fis-parser-less": "0.1.3",
 "fis-parser-pug": "0.0.1",
 "fis-postpackager-replace": "0.0.3",
 "fis3": "3.4.39",
 "fis3-deploy-local-supply": "0.0.2",
 "fis3-hook-commonjs": "0.1.27",
 "fis3-hook-node_modules": "2.3.1",
 "fis3-hook-relative": "2.0.3",
 "fis3-packager-deps-pack": "0.1.2",
 "fis3-parser-typescript": "^1.2.2",
 "fis3-postpackager-loader": "2.1.11",
 "fis3-preprocessor-cssprefixer": "0.0.2",
 "fis3-preprocessor-js-require-css": "0.1.3",
 "fis3-preprocessor-js-require-file": "0.1.3",
 "fis3-preprocessor-ng2-inline": "0.0.1",
 "fs-extra": "^6.0.1",
 "http-proxy": "1.16.2",
 "husky": "^0.14.3",
 "istanbul-instrumenter-loader": "^3.0.1",
 "jasmine-core": "^3.1.0",
 "karma": "^2.0.2",
 "karma-chrome-launcher": "^2.2.0",
 "karma-coverage": "^1.1.1",
 "karma-coverage-istanbul-reporter": "^2.0.1",
 "karma-jasmine": "^1.1.2",
 "karma-jasmine-html-reporter": "^1.1.0",
 "karma-mocha-reporter": "^2.2.5",
 "karma-remap-coverage": "^0.1.5",
 "karma-sonarqube-unit-reporter": "^0.0.14",
 "karma-sourcemap-loader": "~0.3.7",
 "karma-webpack": "^3.0.0",
 "less": "^3.0.4",
 "less-loader": "^4.1.0",
 "liftoff": "2.3.0",
 "lint-staged": "^7.1.3",
 "minimist": "1.2.0",
 "morgan": "1.8.1",
 "prettier": "^1.13.5",
 "pug": "^2.0.3",
 "pug-html-loader": "^1.1.5",
 "raw-loader": "~0.5.1",
 "serve-favicon": "2.4.1",
 "stylelint": "^9.4.0",
 "stylelint-config-prettier": "^4.0.0",
 "supervisor": "^0.12.0",
 "to-string-loader": "^1.1.5",
 "tslint": "^5.10.0",
 "typedoc": "^0.11.1",
 "typescript": "^2.8.3",
 "webpack": "~3.6.0"
 },
 "dependencies": {
 "@angular/animations": "^6.1.0",
 "@angular/common": "^6.1.0",
 "@angular/compiler": "^6.1.0",
 "@angular/core": "^6.1.0",
 "@angular/forms": "^6.1.0",
 "@angular/http": "^6.1.0",
 "@angular/platform-browser": "^6.1.0",
 "@angular/platform-browser-dynamic": "^6.1.0",
 "@angular/router": "^6.1.0",
 "@ngrx/router-store": "6.1.0",
 "@ngrx/store": "^6.1.0",
 "@ngx-translate/core": "^10.0.2",
 "@ngx-translate/http-loader": "^3.0.0",
 "angular-tree-component": "^7.2.1",
 "buffer": "4.9.1",
 "core-js": "^2.5.7",
 "fis-mod": "1.0.1",
 "is-buffer": "1.1.4",
 "jquery": "1.12.4",
 "moment": "2.18.1",
 "ngrx-store-freeze": "0.2.4",
 "ngrx-store-logger": "0.2.2",
 "process": "0.11.9",
 "reflect-metadata": "0.1.12",
 "rxjs": "^6.0.0",
 "rxjs-compat": "^6.2.2",
 "throttle-debounce": "^2.0.1",
 "zone.js": "0.8.26"
 }
}

2. 添加 rxjs-compat 依赖

为了兼容 rxjs 5 的用法,必须引入 rxjs-compat。

添加依赖:

yarn add rxjs-compat

然后在项目入口文件 main.ts 中引入它:

import 'rxjs-compat';

注意,后续的开发应有意识地以 rxjs6 的新写法去编码。

当然,如决定改掉 rxjs5 的旧写法,可以移除对 rxjs-compat 的引入,参照浏览器错误提示去一一修改即可。

3. 按官方指引和项目实际情况选择性操作

打开 Angular 官方升级指引网站 https://update.angular.io 按提示和项目实际情况操作。

实际上项目没有太多高级的用法,需要修改的内容并不多。大致有以下几点:

  • 如有用到 extends OnInit,应该为 implements OnInit 方式
  • 模板中如有用到 <template> 标签,将它改为 <ng -template>。全局查找和替换即可。
  • HttpModule 和 Http 应分别改用 HttpClientModule 和 HttpClient。HttpClient 支持拦截器,这可以在 http 请求过程中实现注入,实现更自由的逻辑,如角色权限验证等。项目中的 http 请求已经基于 Http 模块进行了封装,所以这一步可以忽略。但应考虑全局改进 http 封装,或者在后续的开发中采用 HttpClient。
  • 全局安装 rxjs-tslint,执行源码级的升级,主要是修改 rxjs@6 废弃的用法。这个操作会修改很多文件。
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

以上操作完成后,尝试启用项目构建编译,如无报错即已成功升级。

总结:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 #Javascript
前后端如何实现登录token拦截校验详解
Sep 03 #Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 #Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 #Javascript
解决vue.js this.$router.push无效的问题
Sep 03 #Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 #Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python 多线程应用介绍
2012/12/19 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
护理学毕业生自荐信
2013/10/02 职场文书
历史学专业求职信
2014/06/19 职场文书
大专生求职信
2014/06/29 职场文书
调解协议书范本
2016/03/21 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL