Page components Initiate, but view does not update


Hello there,

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.

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.


As an update,

The Components do Initialize already, I’ve added a at every Page’s constructor, and they get shown when I expect, the view just does not update correctly.



For some reason tick’s are not being executed, please help if you have any knowledge, more info on stackoverflow. I’ve now hacked in manual tick’s including multiple at different intervals when I"m changing tabs. Since it does not trigger events.


Is there any way you could provide a more complete example? It’s a bit hard to tell what is going on without seeing some code :grin:


I fixed it, I have edited the webpack as I’m also using Angular beta 9 in my project (due to libraries I also use in my normal angular2 projects).


var path = require(‘path’);

module.exports = {
  entry: [


As you see here, ionic was already doing stuff with es6-shim, reflect-metadata and zone.js.

Now I’m also adding a polyfills.ts which is in the angular2 project which also includes these:

// Polyfills
// import 'ie-shim';
import 'es6-shim';
// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
import 'es6-promise';
import 'es7-reflect-metadata';
import 'zone.js/dist/zone-microtask';

  // RxJS
  // to include every operator uncomment
  // require('rxjs/Rx');

  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/mergeMap';

Thanks to a comment on stackOverflow I was checking the config.