ionic3升级适配angular5

昨天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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

Redis过期key的删除策略

key的过期时间都保存在过期字典中,如果一个键过期了,那么redis什么时候会被删除呢? 删除策略 (1)惰性删除 对key进行操作时才进行过期检查,对CPU最...

51570
来自专栏互联网研发闲思录

elasticsearch5.5.3 源码学习 idea下源码编译

  1、学习elasticsearch 源码,通过搜索“elasticsearch源码”,进行相关搜索。      2、因源码gradle编译,选择gradle...

46060
来自专栏杨建荣的学习笔记

vi的补充学习(r4笔记第25天)

今天突然发现vi虽然用了些日子了,但是常用的一些命令之外,还是有些命令比较生疏,简单总结了一下,然后自己在vi里面编辑了一把,效果还不错。 对于大家比较熟悉且常...

340100
来自专栏JavaEdge

Redis Cluster流程原理

Redis 3.0之后,节点之间通过去中心化的方式,提供了完整的sharding、replication(复制机制仍使用原有机制,并且具备感知主备的能力)、fa...

19820
来自专栏后端技术探索

Nginx从学会到精通(5.关于connection)

在nginx中connection就是对tcp连接的封装,其中包括连接的socket,读事件,写事件。利用nginx封装的connection,我们可以很方便的...

13520
来自专栏Albert陈凯

linux目录结构和常用命令

一、Linux目录结构 你想知道为什么某些程序位于/bin下,或者/sbin,或者/usr/bin,或/usr/sbin目录下吗?例如,less命令位于/us...

28040
来自专栏大学生计算机视觉学习DeepLearning

c++ 网络编程(八)TCP/IP LINUX-epoll/windows-IOCP下 socket opoll函数用法 优于select方法的epoll 以及windows下IOCP 解决多

原文链接:https://www.cnblogs.com/DOMLX/p/9622548.html

38540
来自专栏大内老A

ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程

从《ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求》我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从...

22990
来自专栏维C果糖

IntelliJ IDEA 中的版本控制介绍(中)

由于 IntelliJ IDEA 支持的版本控制工具非常的多,但咱们真正能够用到的也就两三个而已,因此在本篇博文中,咱们主要介绍 SVN、Git 和 GitHu...

21560
来自专栏Nian糕的私人厨房

WebPack 模块化打包工具(上)

本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内...

12150

扫码关注云+社区

领取腾讯云代金券