昨天angular5和ionic3同时发布更新了，为了用上angular5的新特性，还是有必要踩下坑的，当然踩坑的白老鼠建议选用一个最近不用维护的项目。
先看下ionic3的更新版本，同一天发布了三个版本，后两个版本都是修复一两个小bug的。
然后再看下angular5的版本，同样发布了两个版本，一个是普通稳定版，一个是beta版，其中前者如图所示修复了几个bug，那若升级，当然选择普通稳定版比较好。
在ionic3官网建议是更新依赖到angular5.0.0版本，而根据上述说明，优先选择做了做了bug修复的angular5.0.1版。
于是我们升级的步骤如下：
一、更新包依赖
删除package-lock.json和node_modules，然后修改package.json如下：
"dependencies" : {
...
"@angular/common": "5.0.1",
"@angular/compiler": "5.0.1",
"@angular/compiler-cli": "5.0.1",
"@angular/core": "5.0.1",
"@angular/forms": "5.0.1",
"@angular/http": "5.0.1",
"@angular/platform-browser": "5.0.1",
"@angular/platform-browser-dynamic": "5.0.1",
"@ionic/storage": "2.1.3",
"ionic-angular": "3.9.2",
"rxjs": "5.5.2",
"zone.js": "0.8.18"
...
},
"devDependencies: {
"@ionic/app-scripts": "3.1.0"
"typescript" : "2.4.2"
}
接着执行命令重新安装依赖：
npm install
二、修改项目文件
我们可以先看下angular5的更新说明：
更改内容：
- I18n更改；
- 内置管道如Date、Currency、Percent的更改；
弃用内容：
- compiler: ngGetContentSelectors()在v4版本被移除，现在用ComponentFactory.ngContentSelectors代替.
- compiler: <template>在v4版本被弃用，使用 <ng-template>代替，其编译选项enableLegacyTemplate也已经失效；
- compiler: 编译选项useDebug从v4版本已经弃用且无效，现在移除；
- common: NgFor在v4版本被弃用，现用NgForOf代替，但不影响在模版中使用*ngFor；
- common: NgTemplateOutlet#ngOutletContext在v4版本被弃用，使用NgTemplateOutlet#ngTemplateOutletContext代替；
- core: ErrorHandler在v4版本被弃用，现在它不再带参数；
- core: ReflectiveInjector现在被弃用，使用 Injector.create 代替；
- core: Testability#findBindings在v4版本被弃用，现在已经移除，用Testability#findProviders代替；
- core: DebugNode#source在v4版本被弃用，现在已经移除；
- core: OpaqueToken在v4版本被弃用，现在已经移除，用InjectionToken代替；
- core: DifferFactory.create在v4被弃用，现不再把ChangeDetectionRef作为第一个参数。
- core: TrackByFn在v4版本被弃用并移除，现用TrackByFunction代替；
- http: 弃用 @angular/http，转为使用@angular/common/http；
- router: RouterOutlet的两个属性locationInjector、locationFactoryResolver在v4版本被弃用，现移除；
- router: 路由参数initialNavigation的值：true, false, legacy_enabled 、legacy_disabled由于弃用而移除，现使用enabled、disabled代替；
- platform-browser: NgProbeToken自v4版本被弃用，现从@angular/platform-browser移除，换从 @angular/core导入；
- platform-webworker: PRIMITIVE 自v4版本被弃用，现在移除，用SerializerTypes.PRIMITIVE代替；
看上去内容很多，但不要被吓到，因为从内核级别看是改动比较多，但从项目应用上只是个别地方要调整，基本向下兼容，故angular4到angular5的项目升级的过程还是比较平缓的，对于大多数项目，主要应对的是Http模块、Router还有管道的变更。
在本项目中，因为没有用到那几个内置管道，也没有用到路由，所以主要是调整Http模块：
在4.x中HttpClient模块被封装在@angular/common中，新的HttpClient被封装在@angular/common/http中，更新Http模块后，需要使用HttpClientModule替换原有HttpModule，并在使用http服务时，可以去掉map(res=>res.json())的调用，因为新模块中已经不再需要了。
首先app.module.ts中，把import { HttpModule } from '@angular/http';替换为下述内容：
import { HttpClientModule } from '@angular/common/http';
同样在import里替换 HttpModule为HttpClientModule：
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp, {
mode: 'ios',
backButtonText: '',
})
]
接着把调用http的provider换成：
import { HttpClient } from '@angular/common/http';
……
constructor(public http: HttpClient) {
}
若有请求选项，直接用一个any对象（因为原来的RequestOptions已经不用了），如：
let options: any = {headers: new Headers()};
最后删除掉：
map(res=>res.json())
到此就完成了，执行命令看下效果吧：
ionic serve
