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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
微信小程序实现签到功能
Oct 31 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
小程序实现列表展开收起效果
Jul 29 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与SQL注入攻击[一]
2007/04/17 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python中统计函数运行耗时的方法
2015/05/05 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
matplotlib实现区域颜色填充
2019/03/18 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
2014元旦晚会策划方案
2014/02/19 职场文书
校园环保标语
2014/06/13 职场文书
租房协议书范文
2014/08/20 职场文书
酒店开业主持词
2015/07/02 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
python 学习GCN图卷积神经网络
2022/05/11 Python