Navigation control (push/setRoot) not working with lazy loaded pages on device

I’m writing a lazy loaded app that works just fine on a browser, but when run on a device/iPhone 7, does not switch pages using NavController

App logic:

  1. rootPage is set to LandingPage
  2. When LandingPage is loaded, it decides which page to go to based on certain conditions

My code:

app.components.ts

 public rootPage: any = "LandingPage";

landing.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LandingPage } from './landing';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [
    LandingPage,
  ],
  imports: [
    IonicPageModule.forChild(LandingPage),
    TranslateModule.forChild() 
  ],
})
export class LandingPageModule {}

Landing.ts

@IonicPage()
@Component({
  selector: 'page-landing',
  templateUrl: 'landing.html',
})
export class LandingPage {
constructor(public navCtrl: NavController, public navParams: NavParams, /*...*/) {

   this.platform.ready().then(() => {
     // lets see what happens when I switch in 5 secs
       setTimeout ( () => {   
      console.log ("MOVE!"); // this prints
      // as you see, I've tried multiple ways
      //this.app.getRootNav().setRoot("SettingsPage", { auth: false }) 
      //this.navCtrl.setRoot("SettingsPage", { auth: false })
      this.navCtrl.push("SettingsPage", { auth: false })
    },5000)
   });
}

settings.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './settings';

@NgModule({
  declarations: [
    SettingsPage,
  ],
  imports: [
    IonicPageModule.forChild(SettingsPage),
  ],
 
})
export class SettingsPageModule {}

settings.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {DatabaseProvider} from '../../providers/database/database'
import {CommonUtilsProvider} from '../../providers/common-utils/common-utils'
import { AuthServiceProvider } from '../../providers/auth-service/auth-service'
import { TranslateService } from '@ngx-translate/core';

@IonicPage()
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})

I know settings’ constructor is not being loaded too as I have prints everywhere.

Any idea what is going on? Whats up with this working in my browser (Safari as well as Chrome) but not my device (iPhone 7).

I don’t see any errors.

ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.0 
    ios-sim           : 5.0.2 
    Node              : v8.4.0
    npm               : 5.3.0 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

Argh never mind. Template had a parse error - and the error was not showing up on safari inspector (I still haven’t figured out why my inspector doesn’t always work)