NavController#push doesn't change page on iOS emulator

Hi!

I’m having issues making the navigation work in the iOS emulator. This is a simplified code snippet:

import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';

@Component({
  template: `
      <pre>{{ state | json }}</pre>
      <ion-select (ionChange)="selectState($event)">
        <ion-option>State 1</ion-option>
        <ion-option>State 2</ion-option>
      </ion-select>
  `
})
export class StatePage {
  private state;
  constructor(private nav: NavController) {}

  selectState(state) {
    this.state = state;
    console.log("before navigation");
    this.nav.push(BaseCodePage, { state });
    console.log("after navigation");
  }
}

@Component({
  templateUrl: 'build/pages/registration/base-code/base-code.html'
})
export class BaseCodePage {
  constructor(
      private nav: NavController,
      params: NavParams
  ) {
    console.log("initializing BaseCodePage, received", params.get('state'));
  }
}

After selecting State 1 from the interface, and trigerring selectState, all the messages show up: before navigation, initializing BaseCodePage, received State 1 and after navigation, meaning that the next component was instantiated. There is no error message, or any output after this. The selected state also gets rendered in the screen, through the <pre>{{ state | json }}</pre>. However, the application freezes at this point, I can’t click on the select anymore, and the next component doesn’t get rendered.

I’ve tested this in the web version as well as the Android version, and both are working fine. Unfortunately I can’t test it in an iPhone since I don’t own a Mac and I’m doing the debugging remotely for a client, so for now I can only claim that it doesn’t work in the iOS emulator.

Did anyone have this problem? Any tips for further debugging since there’s no error messages?

Thanks!

this.nav.push(BaseCodePage, { state: state });

Thanks for the suggestion, but that’s not it. This works, it’s a syntax enabled in ES2015 called object literals (and notice that I’m using TypeScript, so if there were syntax errors it would not compile). It’s not a syntax error or runtime exception; as I stated, this code works on both web and Android, and there were no error messages.

Ah, you are right. Your code looks good.
I checked your code (without base-code.htm), it works fine in safari.

I think this your problem:

  template: `
  <ion-header>
	<ion-navbar>
		<ion-title>Page</ion-title>
	</ion-navbar>
</ion-header>
<ion-content class="has-header settings-modal">
      <pre>{{ state | json }}</pre>
      <ion-select (ionChange)="selectState($event)">
        <ion-option>State 1</ion-option>
        <ion-option>State 2</ion-option>
      </ion-select>
</ion-content>
  `
1 Like

You mean the <ion-header> and <ion-content>? The version I posted here is actually a simplified one to make the question easier to read, my original template has those tags. Here’s the original version:

<ion-header>
  <ion-navbar>
    <ion-title>Select your state</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="state">
  <pre>{{ state | json }}</pre>
  <ion-list>
    <ion-item>
      <ion-label>Choose your state</ion-label>
      <ion-select (ionChange)="selectState($event)">
        <ion-option *ngFor="let state of states" [checked]="state == selectedState">{{state}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
</ion-content>

The states array is also populated in the controller.

This is working fine in web (both Chrome and Safari) and Android devices, so far I only had this problem with the iOS simulator.

Hm… I tested your code on iOS emulator. It works fine too.

1 Like

Thank you very much, @xr0master! This eliminates the possibility of the problem being related to my code, I’ll talk to my client and ask him to reinstall his simulator, maybe that will solve the issue!