ionic2 - Supplied parameters do not match any signature of call target

I have 3 pages(adopt, adopt-design, adopt-invite) which I am using navCtrl.push() to go forward and <button ion-fab mini navPop> to pop back to previous page. It works well on browser. but when I want to build for iOS, I get this error:

[10:22:20] Error: Error at /Users/xuanxi/Desktop/bitbuckets/meta/metatest/.tmp/pages/adopt-design/adopt-design.ngfactory.ts:402:29

[10:22:20] Supplied parameters do not match any signature of call target.
[10:22:20] Error at /Users/xuanxi/Desktop/bitbuckets/meta/metatest/.tmp/pages/adopt-invite/adopt-invite.ngfactory.ts:253:29

[10:22:20] Supplied parameters do not match any signature of call target.
[10:22:20] ngc failed

I am using sidemenu template, so I suspect it has something to do with @ViewChild(Nav) nav: Nav; and this.nav.setRoot(page.component); at the app.component.ts but I am not sure how to resolve this. Below are my code for adopt and adopt-design.ts:

adopt.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AdoptDesign } from '../adopt-design/adopt-design';
@Component({ selector: 'page-adopt', templateUrl: 'adopt.html'
})
export class Adopt { selectedItem: any; icons: string[]; items: Array<{title: string, note: string, icon: string}>; constructor(public navCtrl: NavController, public navParams: NavParams) { this.selectedItem = navParams.get('item'); this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane', 'american-football', 'boat', 'bluetooth', 'build']; this.items = []; for (let i = 1; i < 3; i++) { this.items.push({ title: 'Model ' + i, note: 'input : ' + i, icon: this.icons[Math.floor(Math.random() * this.icons.length)] }); } } itemTapped(event, item) { this.navCtrl.push(AdoptDesign, { }); }
}

adopt-design.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AdoptInvite } from '../adopt-invite/adopt-invite';
@Component({ selector: 'page-adopt-design', templateUrl: 'adopt-design.html'
})
export class AdoptDesign { constructor(public navCtrl: NavController, public navParams: NavParams) { } gotoInvite(event) { // That's right, we're pushing to ourselves! this.navCtrl.push(AdoptInvite, { // item: item }); }
}

which adopt-design.ts have similar structure.

How can I resolve this?