昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。
先看下ionic3的更新版本,同一天发布了三个版本,后两个版本都是修复一两个小bug的。
ionic3最新版本
首次支持angular5的ionic3版本
然后再看下angular5的版本,同样发布了两个版本,一个是普通稳定版,一个是beta版,其中前者如图所示修复了几个bug,那若升级,当然选择普通稳定版比较好。
angular5普通最新版
angular5的最新beta版
在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的更新说明:
更改内容:
弃用内容:
看上去内容很多,但不要被吓到,因为从内核级别看是改动比较多,但从项目应用上只是个别地方要调整,基本向下兼容,故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