ionic2 Views do not update, code does execute

Question

I've updated my projects and dependancies a little bit. Whenever I render a page for the first time, (Except root) it doesn't work straight away.

F/e I have a root page, which is a login form. Whenever a token is present in the localStorage, this will be provided by an emitter to the login page. Then the injected NavController, pushes my main Page, a TabController.

This doesn't happen straight away, I can pick my nose, go to the bathroom it stays on the root Page. It only pushes the new view when I actually focus my input. (It also shows a bit of black when it can't render a page and ionic crashes when you do something wrong.

Then on the tabs page, The first tab does not render, it does however when I click the first tab, same for other tabs, they need to be clicked twice (the tab bar only becomes active when you click twice as well). After this it's all working fine, but surely, not what we want. Here is a video of what I'm seeing. If you pause the video at 0.0 you see the logs state Token successfull. This is as in code, right before the push. The new page is initiated, the views just don't seem to be updated until I click an element like the input.

ngOnInit() {
    this.sessionService.subscribe(token => {
        if (token && token.length) {
            console.log("token returned success!", token, this.navController);
            setTimeout( () => { this.navController.push(<any>MainTabs); }, 250 );
        } else {
            console.log("token returned", token);
        }
    });
}

Errors in log are angular2 & ionic in browser related.

So as you see, when the Push is triggered which doesn't ;look as it should, the first page keeps showing a loader. This should go away once content is loaded (it is loaded I saw the console.logs trigger which set the value). If I'd click the first tab item 2 times now it'd show the content. I chose to click the "Acties" button, which rendered the first tab (note I was clicking the third). Clicking the fourth renders the third page, after this, they have been rendered once and clicks work as expected.

Wierd?

Answer 1

You can try to add a dirty fix with tick()

@App({
  template: `
    <ion-tabs (change)="_onTabChange()">
      <ion-tab tabIcon="heart" [root]="tab1"></ion-tab>
      <ion-tab tabIcon="star" [root]="tab2"></ion-tab>
    </ion-tabs>`
})
class MyApp {
  constructor(private _applicationRef : ApplicationRef) {
    this.tab1 = Tab1;
    this.tab2 = Tab2;
  }

  private _onTabChange() : void {
     setTimeout(() => {
       this._applicationRef.tick();
     }, 200);
  }
} 

Apparently the none dirty trick is to remove ionic's polyfills