Ionic 2 Tabs Maximum call stack size exceeded

Question

This error seems to be a plague haunting Ionic 2. I've looked at several questions on this topic but none have been of help so far.

I've created this component Layout Component which wraps all my pages:

<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      {{pageName}}
    </ion-title>
  </ion-navbar>
</ion-header>
<ng-content>
</ng-content>
<ion-footer>
  <ion-toolbar>
    <ion-tabs>
      <ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
    </ion-tabs>
  </ion-toolbar>
</ion-footer>

and the TS File looks like so:

export class AstootLayoutComponent {

  @Input() pageName: string;

  usersPage: any = UsersPage;
  profilePage: any = ProfilePage;

}

Then I have a users page which consumes this component which looks like so:

<astoot-layout [pageName]="pageName">
  <ion-content padding>
    <page-list-base [detailPageType]="userDetailType" [baseProvider]="baseProvider" [config]="pageListConfiguration"></page-list-base>
  </ion-content>
</astoot-layout>

When I attempt to start my application I receive an error:

Maximum call stack size exceeded

TypeError: Cannot read property 'getList' of undefined at PageListBaseComponent.set [as baseProvider] (http://localhost:8100/build/main.js:115817:21) at Wrapper_PageListBaseComponent.check_baseProvider (/AppModule/PageListBaseComponent/wrapper.ngfactory.js:38:31) at CompiledTemplate.proxyViewClass.View_UsersPage0.detectChangesInternal (/AppModule/UsersPage/component.ngfactory.js:80:35) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:111894:18) at CompiledTemplate.proxyViewClass.View_UsersPage_Host0.detectChangesInternal (/AppModule/UsersPage/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:111909:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:112104:44) at ViewRef_.detectChanges (http://localhost:8100/build/main.js:77367:20) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:43575:40) at NavControllerBase._transitionInit (http://localhost:8100/build/main.js:43678:18) at NavControllerBase._postViewInit (http://localhost:8100/build/main.js:43531:14) at NavControllerBase._viewTest (http://localhost:8100/build/main.js:43627:25) at NavControllerBase._nextTrns (http://localhost:8100/build/main.js:43370:25)

Through some investigation the cause seems to be the fact that the AstootLayoutComponent references the Users page, where it resides in. Some how the creates a forever loop.

Why is this happening, the documentation doesn't seem to mention that you can't next this component on the page. How can I fix this?

Bounty Edit

I've created a Repository which replicates my issue

Just as a warning since the tabs controller is in a forever loop, and the api is pointed to github, so you may want to switch that before hitting there rate limit, you can change the url in the Environments.ts

I never see component tag inside other component tag before. Could you please provide some document about this? — Duannx
This is common in angular. The '<ng-content> </ng-content>' allows you to nest HTML components. I believe it's referred to as transclusion you can see a tutorial on it here — johnny 5
What do you expect? You are loading nested components like astoot-layout => users-page => astoot-layout => users-page => astoot-layout => users-page => astoot-layout => users-page => astoot-layout => users-page => astoot-layout => users-page => .... — yurzui

seescode seescode · Accepted Answer · 2017-07-10T02:57:11

I think you need to add a Tabs Component. Therefore some of the work you were doing in the astoot layout gets moved to this Tabs Component. I opened a PR: https://github.com/granthoff1107/Ionic-Sample-Max-Exceed/pull/1

I tested this and no more stack errors since you no longer have the recursive relationship between the astoot layout and the ion-tabs.

Remove the tabs component from the Astoot Layout Component:

<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      {{pageName}}
    </ion-title>
  </ion-navbar>
</ion-header>
<ng-content>
</ng-content>

Create a seperate Tabs Component:

<ion-tabs>
   <ion-tab [root]="usersPage" tabTitle="Chat" tabIcon="chat"></ion-tab>
   <ion-tab [root]="profilePage" tabTitle="Profile" tabIcon="person"></ion-tab>
</ion-tabs>

With a type script file that contains the pages from the astoot layout component.

import { ProfilePage } from './../profile/profile';
import { UsersPage } from './../users/users';
import { Component } from '@angular/core';

@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {

    usersPage: any = UsersPage;
    profilePage: any = ProfilePage;

    constructor() {

    }
}

Add your new tabs page the app.module.ts and set your rootPage: any = TabsPage; this will now act as your master page and your content will be transcluded into your view.

Ionic 2 Tabs Maximum call stack size exceeded

1 Answers