Nav.push/setRoot not taking effect until page interaction


#1

My @App constructor, after platform.ready() checks SqlStorage for authentication data (oauth token data) – if it’s set, I call nav.push (or nav.setRoot) to go to the next page… however it sits on the login screen until I click/tap on something (input field etc) and THEN navigates to the page. I feel like I must be missing some mundane detail… any thoughts?

constructor(platform: Platform, app:IonicApp, menu: MenuController, WAC:WAC) {
        platform.ready().then(() => {

            this.app = app;
            this.menu = menu;
            this.WAC = WAC;
            
            this.HomeTabsPage = HomeTabsPage;
            this.SettingsPage = SettingsPage;

            this.storage = new Storage(SqlStorage, {name:'wod2db'});

            let nav = this.app.getComponent('root-nav');
            this.nav = nav;
            this.storage.get('oauth').then((oauth) => {
                console.log("Are we logged in?");
                if (oauth) {
                    this.WAC.setAuthData(JSON.parse(oauth));
                    console.log("YUP. go to the home page");
                    nav.setRoot(HomeTabsPage); // nothing happens, until user interacts with page
                }
            });
        });
    }

#2

Sounds familiar.


#3

Thank you, I did try to search :frowning:

Unfortunately this didn’t work for me (maybe because my logic is in @App and not a @Page?)… so the search continues.


#4

There’s more than one “this” in that thread. I still think you have a problem whereby whatever you are doing is not being picked up by Angular’s zone-based change detection.


#5

Here’s what I’m trying now… I changed my @App to start on a “DispatchPage” (your semi-related suggestion from yet another thread) which is checking storage for credentials:

import {Page, NavController} from 'ionic-angular';
import {HomeTabsPage} from '../hometabs/hometabs';
import {LoginPage} from '../login/login';
import {NgZone} from 'angular2/core';
import {Storage, SqlStorage} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/dispatch/dispatch.html',
})
export class DispatchPage {
  storage: Storage;
  zone: NgZone;
  
  constructor(public nav: NavController, zone: NgZone) {
    this.nav = nav;
    this.storage = new Storage(SqlStorage, {name:'wod2db'});
    this.zone = zone;
    
    this.zone.run(() => {
          this.storage.get('oauth').then((oauth) => {
            if (oauth) {
                console.log("GO HOME");
                this.nav.setRoot(HomeTabsPage);
            } else {
              console.log("go to login");
              this.nav.setRoot(LoginPage);
            }
        });
    });
  }
}

I can see “GO HOME” in the console, but it’s not updating the UI.

Thanks again!


#6

Is there a chance that the promises coming back from SqlStorage are not zone-aware? First thing I would check is if the angular2-polyfills are being properly loaded (I think the stock Ionic starters do it in index.html before the app bundle), and then I would try to put debugger breakpoints coming out of that get call to see what the underlying type of the returned promise is. I don’t believe you should explicitly be needing to call zone.run there, especially if you’re not inside platform.ready.


#7

Thanks for the pointers, I do have the angular2-polyfills loading (ran into that problem right after beta.4 update). I’m admittedly in over my head at this point, being new to both angular and ionic… I truly appreciate the guidance. I’ll see if I can figure out the SqlStorage promises (zone, promises… all new to me).

Is there any other way to just tell the UI to update as a function call I can make after nav.setRoot? I know it’s hacky, but as we live through these beta stages I’d kind of like to move on to other areas and come back to this when things are more stable.

Thanks again,
Brian


#8

Updated to beta.6 and now it works, no zone necessary. Rage subsiding…

Thanks again for your efforts, you and a few others have helped me several times already.