前言
因为公司的项目框架过于老旧，因此进行此次升级，因为依赖过于庞大，使用angular官网的升级指南总是出现依赖的版本不匹配问题，因此直接重新下载最新版angular脚手架，然后把公司项目的代码移到新的脚手架里，根据公司项目的依赖情况再重新安装依赖包，最后完成升级，总结要点如下：
升级步骤
私以为全新安装能得到比升级脚手架较少一些node_modules的体积，并且升级过程中无需考虑过多的版本兼容问题。
- 安装node 10。 新建一个空目录，安装angular CLI,
npm install -g @angular/cli, 初始化一个新项目ng new my-app-t;
注意angular4中的 angular-cli.json 在angular8中更名为 angular.json。
参照原项目的package.json重新安装各项依赖包，我们的项目用到的依赖包主要是kendo的ui控件，echarts图表，rxjs/ngrx, ngx-translate, jquery 等。
把原项目中的modules，styles.scss等代码复制进新项目，修改新项目的默认路由为旧项目的默认路由，修改main.ts中的默认启动模块为旧项目的启动模块，把旧项目引用的js,css，字体图标等添加到新项目的package.json中，注意引用路径有些变化，如在angular4项目中引用一个css字体图标文件，路径为
"./resources/fontIcon/iconfont.css",在angular8中需要改为"src/resources/fontIcon/iconfont.css",具体如下：angular4：
1 | ... |
2 | "assets": [ |
3 | "assets", |
4 | "favicon.ico", |
5 | "resources", |
6 | "config" |
7 | ], |
8 | ... |
9 | "styles": [ |
10 | "./resources/plugin/bootstrap/3.3.7/css/bootstrap.min.css", |
11 | "./resources/fontIcon/iconfont.css", |
12 | "styles.scss" |
13 | ], |
14 | "scripts": [ |
15 | "./resources/plugin/jquery/1.12.4/jquery.min.js", |
16 | "./resources/plugin/bootstrap/3.3.7/js/bootstrap.min.js", |
17 | "./resources/plugin/laydate/laydate.js", |
18 | "./resources/plugin/cookie/jquery.cookie.js", |
19 | "./resources/config/transformation.js", |
20 | "./resources/plugin/turf/turf.min.js", |
21 | "./resources/comp/ws/reconnecting-websocket.min.js", |
22 | "./resources/fontIcon/iconfont.js", |
23 | "./resources/plugin/sha/jquery.sha1.js", |
24 | "./resources/plugin/sha/jquery.sha256.min.js" |
25 | ], |
26 | ... |
angular8:
1 | ... |
2 | "assets": [ |
3 | "src/favicon.ico", |
4 | "src/assets", |
5 | "src/resources", |
6 | "src/config" |
7 | ], |
8 | ... |
9 | "styles": [, |
10 | "src/resources/plugin/bootstrap/3.3.7/css/bootstrap.min.css", |
11 | "src/resources/fontIcon/iconfont.css", |
12 | "src/styles.scss" |
13 | ], |
14 | "scripts": [ |
15 | "src/resources/plugin/jquery/1.12.4/jquery.min.js", |
16 | "src/resources/plugin/bootstrap/3.3.7/js/bootstrap.min.js", |
17 | "src/resources/plugin/laydate/laydate.js", |
18 | "src/resources/plugin/cookie/jquery.cookie.js", |
19 | "src/resources/plugin/turf/turf.min.js", |
20 | "src/resources/fontIcon/iconfont.js", |
21 | "src/resources/plugin/sha/jquery.sha1.js", |
22 | "src/resources/plugin/sha/jquery.sha256.min.js" |
23 | ] |
24 | ... |
- 请求方式的写法发生变化：在angular4中写post/get请求的示例如下：
1 | ... |
2 | getConfig(obj) { |
3 | return this.httpClient.post(API.graphqlQuery, obj) |
4 | .map(res => { |
5 | return res; |
6 | }).catch(this.handleError); |
7 | } |
8 | ... |
在angular8中需要修改为：
1 | ... |
2 | getConfig(obj) { |
3 | return this.httpClient.post(API.graphqlQuery, obj) |
4 | .pipe( |
5 | map(res => { |
6 | return res; |
7 | }), catchError(this.handleError)); |
8 | } |
9 | ... |
- viewChild的写法发生变化
angular4:
1 | ('fileupload') fileupload: ElementRef; |
angular8:
1 | ('fileupload', {static: false}) fileupload: ElementRef; // file dom |
- ngrx写法也发生了一些变化，具体参考：
angular ngrx link
主要是自定义action需要实现Action并添加constructor方法。对payload进行进一步的显式声明，在AppModule中的引入的写法发生变化。
Subscription直接从rxjs引入：import { Subscription, Subject, Observable } from 'rxjs';, 而不是rxjs/Subscription.
说起来很简单，实际上操作起来，我们的项目用到http请求的有几十个service文件，几百个请求，viewChild也有几十个地方用到，订阅几乎每个组件都有用到，因此改起来还是颇费时间。