Angular项目如何升级至Angular6步骤全纪录
时间：2021-01-23 10:14:26|栏目：AngularJS|点击： 次
前言
前段时间将所负责的 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
以上操作完成后，尝试启用项目构建编译，如无报错即已成功升级。
总结：
上一篇：AngularJs expression详解及简单示例
栏 目：AngularJS
本文标题：Angular项目如何升级至Angular6步骤全纪录
本文地址：http://www.codeinn.net/misctech/49683.html
