Tab bar Maximum call stack size exceeded

Ionic Framework ionic-v3
1

i follow:

but when i try to add tab bar in my application, he shows me a “Maximum call stack size exceeded”

I did just that:

  <ion-content class="home">
    <ion-tabs tabbarPlacement="top">
      <ion-tab tabTitle="Dash"></ion-tab>
    </ion-tabs>
  </ion-content>

Does anyone know what can it be?
Thx!

2

Ion-tabs should go outside ion-content. See http://ionicframework.com/docs/v2/components/#tabs

3

@bea i tried that too. But the error continues. I will have to import something?

4

Have you import this?

import {Tabs} from 'ionic-angular';

5

Could you share a more detailed example?
I’ve tested a tabs based app and have not been able to see this issue.

ionic start temp tabs --v2 --ts
cd temp
1 Like
6

I’ve run into the same issue. I have an <ion-tabs> in my @App template and it works fine, but when I try to add a tab bar to a @Page, I get the error. Copying the working tabs from the app or just adding a simple <ion-tabs><ion-tab></ion-tab></ion-tabs> to a page’s template causes the error. (Adding just an <ion-tabs></ion-tabs> with no tab doesn’t error in the console but causes the whole page to return empty.)

What I’m trying to do is have a tab bar on a page under a page header. It isn’t a global tab bar, but rather one that is only for this specific page.

The layout I’m trying to accomplish seems to be possible if I use the <ion-segment> object instead of <ion-tabs>…

2 Likes
7

Error happens to me when i don’t add the [root] attribute

  • ok : <ion-tab *ngFor="let tab of tabs" [root]="tab.page"></ion-tab>
  • error : <ion-tab *ngFor="let tab of tabs"></ion-tab>

if it can help someone…

1 Like
8

Which is unfortunate since the documentation cleary states that it is possible to omit the root binding and use an onSelect function instead. And this throws the same recursion error.

<ion-tabs preloadTabs="false">
    <ion-tab tabIcon="document" tabTitle="Einzelaufträge" (ionSelect)="filterWorkorders(1)"></ion-tab>
    <ion-tab tabIcon="time" tabTitle="Fixtermine" (ionSelect)="filterWorkorders(0)"></ion-tab>
    <ion-tab tabIcon="folder" tabTitle="Sammelaufträge" (ionSelect)="filterWorkorders(3)"></ion-tab>
    <ion-tab tabIcon="checkmark-circle" tabTitle="Abgeschlossen" (ionSelect)="filterWorkorders(2)"></ion-tab>
</ion-tabs>

I am on Angular 2 rc.4 and ionic-angular 2 beta10 (beta11 has other grave issues).