@玛酷猫5 年前
首先是更新NodeJS版本，Angular6要求版本不低于8.X，由于之前安装高版本的nodeJS一直有着不可描述的问题，导致node-sass无法安装，无奈只能安装6.X的版本使用本地文件来强行安装node-sass，不过现在貌似没这个问题了。更新也比较方便，卸掉重新安装就好了。
开启一个新的tab项目，详细的安装可以参考官方文档
ionic start myApp tabs --type=angular
provider迁移
项目建好后，先将原来项目中的provider复制到新项目中，这时候会看到满篇的错误提示，一个一个来调整。
1、storage在Ionic4中不再是默认自带，需要单独安装
npm install --save @ionic/storage
2、换用新的http模块
//ionic3 部分代码
import { Http, Headers, RequestOptions } from '@angular/http';
//……中间其他代码……
const headers = new Headers();
let Token: string = '';
headers.append('Token', Token);
this.options = new RequestOptions({ headers: headers });
//ionic4 部分代码
import { HttpClient, HttpHeaders } from '@angular/common/http';
//……中间其他代码……
const headers = new HttpHeaders();
let Token: string = '';
headers.set('Token', Token);
this.options = { headers };
由于需要和数据服务器API通讯，用户的信息token是存放在请求的header中，在Ionic3中使用的Headers, RequestOptions来处理请求头部，这两个组件在3中也属于不推荐使用的，当时因为还能用，图省事就继续使用了。4种更换为HttpClient、HttpHeaders，和以前方法使用变化不大，调整下就好。
3、调整Components用法，这部分也是整个项目变动最多的地方，几乎所有的Controller都有参数变动和使用方法的变动，想像迁移文档说的那样直接复制进来就能用基本没法实现。举个例子，项目中有个全局的顶部消息提示控件
//ionic3
toast(message: string) {
this.toastCtrl.create({
message: message,
duration: 1500,
position: 'top'
}).present();
}
//ionic4
async toast(message: string) {
const toast = await this.toastCtrl.create({
message: message,
duration: 1500,
position: 'top'
});
toast.present();
}
在Ionic3中可以直接创建后接present()来触发使用，而在4中，需要配合async/await来使用。
4、RxJS的调整，官方有个迁移文档，传送门，并且给出了一个迁移工具，不过试了下不是太好用，可能原本的项目写的就不是很规范，只能自动修复一小部分。还是老老实实手动来吧，顺便加深下印象。以下是一个登录的代码片段
//ionic3
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
//……中间其他代码……
PostSignIn(request: PostUserSignInRequest): Observable<any> {
return this.http.post(this.coreService.baseUrl + '/tokens', request)
.map(res => res.json());
}
//ionic4
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
//……中间其他代码……
PostSignIn(request: PostUserSignInRequest): Observable<any> {
return this.http.post(this.coreService.baseUrl + '/tokens', request)
.pipe(map(res => res));
}
首先是引入调整，这个全项目批量替换下就好，然后是原来的链式操作（dot-chained operators）要更换为管道操作（pipeable operators），简单点说就是将原先所有的.xxx操作全部放置到pipe()这个方法中，其他的用法项目中用到的少，可以去查看官方文档。