Ionic native modules typescript strong typing error

Hi everyone. I try to use strong typing with ionic native modules but have an error.

Code example:

import {NavController} from 'ionic-angular';
import {HomePage} from '../../main/home/home.page';

export class SignInPage {
  private navCtrl: NavController;

  constructor(navCtrl: NavController) {
    navCtrl.setRoot(HomePage, {navbarCurrentPage: 'home'});
  }
}

Error message:

Argument type HomePage is not assignable to parameter type Type.

HomePage looks the same as SignInPage class. Both decorated with @page. Has anyone faced this problem?

you should not set a new root in nav in the constructor.
Wait until the current page is loaded via Ionics Page-Lifycylce events or with angular 2 component lifecycle events

import {NavController, Page} from 'ionic-angular';
import {HomePage} from '../../main/home/home.page';

@Page({
  ...
})
export class SignInPage {
  constructor(navCtrl: NavController) {}

  onPageDidEnter() {
    this.navCtrl.setRoot(HomePage, {navbarCurrentPage: 'home'});
  }
}

Sorry, I simplified code. In my case setRoot called outside of constructor. All my code works. The only thing that does not suit me is typescript compile error. Something wrong with type of HomePage.

Yeah, Ionic has same issues with typings. Angular 2 works with Type, but Ionic Page isn’t Type. You could do a casting.

import {Type} from 'angular2/core';

this.navCtrl.setRoot(<Type>HomePage, {navbarCurrentPage: 'home'});
1 Like