Back button doesn't work correctly in tab page

Ionic Framework ionic-v3
1

Hi! I have an issue,i try to explain in simple way:
have two pages.
page1(no tabs)----->page2(with 3 tabs)

main.html
here the main-html of the tabs

<ion-content>
  <ion-tabs class="TabsTop" tabsPlacement="top" selectedIndex="1">
   <ion-tab tabTitle="Evento" [root]="eventInfo" [rootParams]="event"></ion-tab>
    <ion-tab tabTitle="Artisti" [root]="artists" [rootParams]="event"></ion-tab>
    <ion-tab tabTitle="Location" [root]="location" [rootParams]="event"></ion-tab>
  </ion-tabs>
</ion-content>

tab1

<ion-header>
   header here
</ion-header>
<ion-content>
   content here
</ion-content>

tab2

<ion-header>
   header here
</ion-header>
<ion-content>
   content here
</ion-content>

tab3

<ion-header>
   header here
</ion-header>
<ion-content>
   content here
</ion-content>

N.B
these 3 tabs have 3 different header because i need to have different icon on the header for each tab( different function,different behaviour)
when i go to page 2 my back button is disappeared,in EVERY tab.I think the problem is that every tab has its own navcontroller.
if i inspect html and i find the back button if i put display block,the back button appears but when i click to it i get this error.

52

While in the console i get

nav-controller-base.js:375 You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times. Tab {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: undefined, parent: Tabs, …} <ion-tab role=​"tabpanel" tabtitle=​"Artisti" ng-reflect-root=​"function ArtistsTabPage(app, n" ng-reflect-root-params=​"[object Object]​" ng-reflect-tab-title=​"Artisti" id=​"tabpanel-t2-1" aria-labelledby=​"tab-t2-1" class=​"show-tab" aria-hidden=​"false">​…​</ion-tab>​
NavControllerBase._postViewInit @ nav-controller-base.js:375
(anonymous) @ nav-controller-base.js:260
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4751
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2

How can i solve this?
thanks in advice!

2

Hi @Bboypluss, Can you tell which page is assigned as rootPage in your app.component.ts?

3

another page called homepage,that has nothing to do with my issue (i think LOL)
in which i do a control :
if is the first visit i show an intro ,
else i show a login page.

4

LOL well it really has nothing to do. I was just wondering about that. Hope you get required help!

5

I think it might have something to do with your issue.

Try using your ‘TabsPage’ as your root page and see if everything works as expected:

  public rootPage: any = 'TabsPage';
6

Do you:

@ViewChild(Nav) private nav: Nav;

...

this.nav.setRoot("TabsPage")

or

this.nav.push("TabsPage")