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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
js控制input输入字符解析
Dec 27 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
详解jQuery中的easyui
Sep 02 jQuery
koa socket即时通讯的示例代码
Sep 07 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP 转义使用详解
2013/07/15 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python正则表达式经典入门教程
2017/05/22 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
大学生文员专业个人求职信范文
2014/01/05 职场文书
晚宴邀请函范文
2014/01/15 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
研发工程师岗位职责
2014/04/28 职场文书
十八大标语口号
2014/10/09 职场文书
学子宴致辞大全
2015/07/27 职场文书
小学中队委竞选稿
2015/11/20 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL