ionic3升级适配angular5

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

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

ionic3最新版本
ionic3升级适配angular5_第1张图片
首次支持angular5的ionic3版本

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

ionic3升级适配angular5_第2张图片
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: