After setRoot(TabsPage), the default tab page appears twice

[chanphillip]

I have a LandingPage before loading TabsPage.
The user can click a button on LandingPage to trigger this.navCtrl.setRoot(TabsPage)

The problem is right after the TabsPage is loaded, there is a back button on the navbar of the default tab page.
Clicking the back button will pop the default page, while another default page will be seen.

As I remember, this happens since RC0.
It seems I couldn’t find similar posts here…
Does anyone have similar issues?

[chanphillip]

BTW, I got a workaround by removing the extra page explicitly.

ionViewDidEnter() {
    this.tabs.getSelected().remove(0);
}

But I would like to know if this is a bug or just me implementing it improperly.

[jeremyyapkylmac]

Hey @chanphillip, I too am having this problem. However, I don’t understand how you got about implementing the workaround.

Do you mind advising on that matter?

Thanks!

[chanphillip]

Hi, glad to hear I’m not the only one having this problem lol.
So hopefully they will fix it or provide a correct way to implement if it was due to improper implementation, because my workaround is really just a quick hack…

What I did is to tell the default active tab to remove once its nav stack when TabsPage is loaded at the first time.

We need to use ViewChild to reference the tabs component on TabsPage

<ion-tabs #tabs>

Add this to TabsPage:

@ViewChild('tabs') tabs;

Because ionViewDidEnter will be called whenever it became active, we need a flag to ensure it will only be called at the first time. By the way, I was testing and found out in some cases this won’t happen…so I check if there are really more than one page. Add this to TabsPage:

private firstLoaded: boolean = false;
ionViewDidEnter() {
    if (!this.firstLoaded && this.tabs.getSelected().length() >= 2) {
        this.tabs.getSelected().remove(0, this.tabs.getSelected().length() - 1);
    }
    this.firstLoaded = true;
}

So far this quick hack works perfectly for me.

[Frozenxis]

i am having the same problem. i use

this.nav.setRoot(TabsPage);

from my LoginPage and my first tab loads twice in this order:

[Log] Hello Home Page (main.js, line 31644)
[Log] Hello Tabs Page (main.js, line 47410)
[Log] Hello Home Page (main.js, line 31644)

this is my TabsPage
import { Component, ViewChild } from ‘@angular/core’;
import { NavController, Tabs } from “ionic-angular”;

import { HomePage } from '../home/home';
import { FriendsPage } from '../friends/friends';
import { SettingsPage } from '../settings/settings';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  private firstLoaded: boolean = false;
  tab1Root: any = HomePage;
  tab2Root: any = FriendsPage;
  tab3Root: any = SettingsPage;
  @ViewChild(Tabs) tabs;

  constructor(public nav: NavController) {}

    ionViewDidLoad() {
      console.log('Hello Tabs Page');
    }

  ionViewDidEnter() {
    if (!this.firstLoaded && this.tabs.getSelected().length() >= 2) {
        this.tabs.getSelected().remove(0, this.tabs.getSelected().length() - 1);
        this.firstLoaded = true;
    }
  }

}

the fix @chanphillip suggested doesn’t seem to work right. the back arrow is still in the header and if i press it, the first tab dissapears.

Edit: For now, I am using the hideBackbutton attribute on the modal’s navbar to hide the back arrow.

[chanphillip]

Can you check if ionViewDidEnter has been fired correctly?

By the way, there was a bug in the logic but this should still be working. firstLoaded = true should be placed outside if block.

    if (!this.firstLoaded && this.tabs.getSelected().length() >= 2) {
        this.tabs.getSelected().remove(0, this.tabs.getSelected().length() - 1);
    }
    this.firstLoaded = true;

[Frozenxis]

i’ve put this.firstLoaded = true; outside of the if and added a console.log in ionViewDidEnter()
this is the order they get executed:

[Log] Hello Home Page (main.js, line 31640)
[Log] Hello Tabs Page (main.js, line 31692)
[Log] Hello Home Page (main.js, line 31640)
[Log] TabsPage.ionViewDidEnter() (main.js, line 31695)

[chanphillip]

So ionViewDidEnter has been fired.

Could you check if the if-condition is true?
Also, try to print this at the end of ionViewDidEnter()

this.tabs.getSelected().length()

[alexandretok]

I’m having the same problem…
While the solution presented works, it looks buggy. I mean, when the app loads I can see that a page is being loaded and then destroyed.

Any permanent solutions yet?

[chanphillip]

I think I found a fix!

I was trying to solve another problem after upgrading to RC4…

Anyone have async rendering problems with RC4

After upgrading to RC4, some of my pages didn’t render after async operations. I can’t show my code here since there are nested functions. But basically I use Observable to retrieve ajax and then show it on the page. I can see the code is all executed and console.log shows the updated variables, but the page didn’t re-render. Any ideas? Or is there a way to force it re-render?

Then I realized the rendering issue happened only on all the tabs at the first level.
So I tried using NgZone to run setRoot(TabsPage)
And some how it solves both the problems…

FYI:

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) { ... }

Where you call setRoot:

this.zone.run(() => {
    this.navCtrl.setRoot(TabsPage);
});

[alexandretok]

Wow, that worked perfectly!! I’ve been struggling with this for a week now!! Thanks a lot, man!!

If it isn’t asking too much, could you explain this solution a little bit?

Thanks again!

[marcsyp]

YESSSSS!!!

Thanks, that finally squashed this bug for me.

Marc

[DonShirley]

Thanks a lot, working great. Could finally resolve this bug.

Best regards,
Don

[rodneyjoyce]

@chanphillip

this.zone.run(() => {
this.navCtrl.setRoot(TabsPage);
});

Thanks - this was an issue in the release version of Ionic2 and this fix worked for me

[rapropos]

Using Zone.run is virtually always papering over a more serious problem. I strongly urge people not to be satisfied with it and instead search for the root cause of their underlying issue.

[BradH]

Trying to implement this in my project but I never setRoot() for the tabs pages, as I use a tabs view inside of my side menu app. Essentially I click a link to navigate to a page that has the tabs views…everything works great other than the double loading when selecting the tabs, not just the default page but all tabs load twice only on first selection…

[neo_split]

any update on this? I am also running into same problem where setRoot() loads the pages twice. The Page load is in following order:

1. App Component
2. Tabs Page
3. Tab1 Page
4. Tabs Page
5. Tab1 Page

[temohpab]

Thanks, this solve a problem to me… After show another page and go to the tabs tabe i lose the selected page (the tab selection), the links was working but i lose the selected tab in the top

[Motoralfa]

Excellent man! This work perfect for me! I’m really thankful!

[DouDzZz]

I had some issues with the getSelected() workaround, but I found another simple workaround for those whose problem persists. I just created a tabCounter in a provider which is incremented by the Tabs_Page, when the counter is equal to 2, you can call your funtion:
myProvider.ts

@Injectable()
export class MyProvider {
    public tabCounter: number = 0;
}

tabs.ts

@IonicPage()
@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {
    constructor(private myProvider: MyProvider) {
        this.myProvider.tabCounter++;
        if (this.myProvider.tabCounter === 2)
            this.myAction();
    }
}

I hope it helped some !