首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ionic3升级适配angular5

ionic3升级适配angular5

作者头像
IT晴天
发布2018-08-20 10:36:45
2.5K0
发布2018-08-20 10:36:45
举报
文章被收录于专栏:ionic3+ionic3+

昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。

先看下ionic3的更新版本,同一天发布了三个版本,后两个版本都是修复一两个小bug的。

ionic3最新版本

首次支持angular5的ionic3版本

然后再看下angular5的版本,同样发布了两个版本,一个是普通稳定版,一个是beta版,其中前者如图所示修复了几个bug,那若升级,当然选择普通稳定版比较好。

angular5普通最新版

angular5的最新beta版

在ionic3官网建议是更新依赖到angular5.0.0版本,而根据上述说明,优先选择做了做了bug修复的angular5.0.1版。

于是我们升级的步骤如下:

一、更新包依赖

删除package-lock.jsonnode_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里替换 HttpModuleHttpClientModule

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
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、更新包依赖
  • 二、修改项目文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档