ionic-framework: Setting a tabs page as root does not load the first root page

Good night, a solution I found to insert the code in TabsPage:

	ionViewWillEnter() {
		this.tabRef.select(0);
	}

	ionViewDidEnter() {
		this.tabRef.select(0);
	}

Full version in my case

import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, Tabs } from 'ionic-angular';

@IonicPage({
  priority: 'high', segment: 'tab'
})
@Component({
  selector: 'page-tab',
  templateUrl: 'tab.html'
})
export class TabPage {

	@ViewChild('myTab') tabRef: Tabs;

	TabPage1Root = 'TabPage1Page'
	TabPage2Root = 'TabPage2Page'
	TabPage3Root = 'TabPage3Page'


	constructor(public navCtrl: NavController) {

	}

	ionViewWillEnter() {
		this.tabRef.select(0);
	}

	ionViewDidEnter() {
		this.tabRef.select(0);
	}


}

@kensodemann You can find the example repository here (it is based on the ionic2-starter-tabs upgraded to the ionic-angular and ionic-app-scripts nightly version). npm install, ionic serve and then watch. The tabs are switched every 7.5 seconds.

While putting the repo together I noticed that the underlying problem is the naming of the ts-class (and module) of the Tabs component. Naming it tabs.ts works just fine but re-naming it to e.g. TabsContainer.ts creates the problem. I guess this is because the name is used for generating the DeepLink config/the URL.

With tabs.ts after switching the tabs for the first time the the URL is: http://localhost:8100/#/tabs/contact/contact which is correct.

With TabsContainer.ts after switching the tabs for the first time the URL is: http://localhost:8100/#/TabsContainer/contact/about which is incorrect.

I can confirm that the workaround provided by @kensodemann works for me. I tried switching between different versions of ionic-angular mentioned here and at other places without any result. The only thing that fixed the problem for now is

@IonicPage({ priority: 'high', segment: 'tabs' })

In my case it seems to work as expected but it’s too early to say for sure. Thanks.

3.7 nightly builds works for me too. Any Info on when this will be included in a regular release?

Thanks for opening an issue with us, we will look into this.

Using 3.9.2 and still don’t works. Using priority going against lazy loading?, I’m confused.

+1

Is there any info yet on when this will be included in a regular release?

I can confirm that it works with the 3.7 nightly build. I am using 3.8 as well and there it does not work as you mentioned. Thank you @ajonp for pointing that out.

@danbucholtz 3.7.1-201710201922 makes this work…3.8.0 will not work.

You can work around this via the following code in TabsContainer.ts:

@IonicPage({ priority: 'high', segment: 'tabs' })

This bug is sufficiently different from the originally reported issue to justify its own issue if you would like to open one.

@DavidStrausz - actually, not really re-checking this issue so much as trying to see if some other issue is a duplicate of this that could be fixed via the not-yet-released nightly. I’ll have a quick look when I get a chance, though.

@HiranHabiff Thanks for your workaround, it solved my issue.

Update: No this does not work, returning back to nightly. @danbucholtz any chance someone can work through this with me?

I want to upgrade to 3.9.2, but it still breaks tabs, I am sitting at 3.7.1-201710201922 currently.

I am using @gatsinski / @kensodemann solution with

@IonicPage({
  priority: 'high'
})

I can confirm this works so far in my testing.

@Eraldo I tried this and it seems to work https://github.com/ionic-team/ionic/issues/12697#issuecomment-332970073

Hello,

This issue is fixed. Can you try it out and let me know if the issue still exists?

npm install ionic-angular@3.7.1-201710060319

Thanks, Dan