Ionic 2 Super Tab ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getActiveChildNavs' of undefined

Ionic Framework ionic-v3
1 
export class MainPage {
 
  selectedTab = 0;
  pages = [];

  
  // pages = [
  //             { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
  //             { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
  //             { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
  //             { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
  //             { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
  //             { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
  //             { pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'}
  // ];
 
  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private alertCtrl: AlertController,
              private storage: Storage) {

     this.storage.get('role_id').then((role_id) => {
          console.log('role_id', role_id);

          if(role_id==2) {
            this.pages = [
              { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
              { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
              { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
              { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
              { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
              { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
              { pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'}
            ];

          }
          else if(role_id==3) {
            this.pages = [
              { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
              { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
              { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
              { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
              { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
              { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
              { pageName: 'Profile1Page', title: 'Business Profile',id: 'buProTab'}
            ];
          }
     });
  }

In above code when I initialize the pages outside the constructor it working fine but when Iā€™m initializing the pages inside the constructor then it will throw the error
ā€œERROR Error: Uncaught (in promise): TypeError: Cannot read property ā€˜getActiveChildNavsā€™ of undefinedā€

Please help anyone!
Thanks!

2

Hello,

this error means that whatever from whatever.getActiveCildNavs is not or is not at that point in your lifecyle available.

You answerd your question by our self. Put this part of your code to a point in your lifecyle where is it available. For ex supertabs is at the timepoint where constructor is called not available . See more here https://angular.io/guide/lifecycle-hooks and also llok to lifecycle hooks for ionic.

Best reagrds, anna-liebt

3 
export class MainPage {
 
  selectedTab = 0;
  
   pages = [
               { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
               { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
               { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
               { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
               { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
               { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
               { pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'}
  ];
 
  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private alertCtrl: AlertController,
              private storage: Storage) {

     this.storage.get('role_id').then((role_id) => {
          console.log('role_id', role_id);
     });
  }

}

But I write like this itā€™s not throwing the error

4

Hello,

if whatever is at that point in your lifecycle not available, (for example none of related elements in html at the time when page constructoris called) then it will throws this kind of error. Move code of whatever.getActiveā€¦ to point in lifecycle where whatever is available. More is not to do. For further informations see in the deeps of documentation.

Best regards, anna-liebt

1 Like
5

okay
I try to solve it.

6

Hello,

I thought you have solved it? Is there any other issue, why you insist that it should
be in constructor?

Best regards, anna-liebt

7

maybe you want to fill your array in a code block, you can move it for example to a latter point, for example ionviewdidload(){ whateverā€¦}

8 
export class MainPage {
 
  selectedTab = 0;
  
   pages = []
;
 constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private alertCtrl: AlertController,
              private storage: Storage) {
         
this.pages = [
               { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
               { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
               { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
               { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
               { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
               { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
               { pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'}
  ];
  }

I write like this inside the constructor then also it is working.

But I write below like this then it will throw the error

export class MainPage {
 
  selectedTab = 0;
  pages = [];

  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private alertCtrl: AlertController,
              private storage: Storage) {

     this.storage.get('role_id').then((role_id) => {
          console.log('role_id', role_id);

          if(role_id==2) {
            this.pages = [
              { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
              { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
              { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
              { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
              { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
              { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
              { pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'}
            ];

}

}

I knew that the problem, in 2nd code page will initialize when storage gives the role_id. But page initialization priority high as compare of getting data from storage.

9 
export class MainPage {
  
  @ViewChild(SuperTabs) superTabs: SuperTabs;
  selectedTab = 0;

  pages = [
              { pageName: 'HomePage', title: 'Home', id: 'homeTab'},
              { pageName: 'FishIntelPage', title: 'Fishing Intel',id: 'fishIntelTab'},
              { pageName: 'NotificationPage', title: 'Notifications',  id: 'notficationTab'},
              { pageName: 'LiveStreamingPage', title: 'Live Streaming', id: 'liveStreamingTab'},
              { pageName: 'DiscoverPage', title: 'Discovery', id: 'discoverTab'},
              { pageName: 'KyndofishingPopoverPage', title: 'Community Website',id: 'kyndofishingTab'},
         ];
 
 

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private alertCtrl: AlertController,
              private storage: Storage) {

      this.storage.get('role_id').then((role_id) => {
         console.log('role_id', role_id);

        if(role_id==2) {
             this.pages.push({ pageName: 'ProfilePage', title: 'Personal Profile',id: 'peProTab'})
          }
         else if(role_id==3) {
              this.pages.push({ pageName: 'Profile1Page', title: 'Business Profile',id: 'buProTab'})
         }
    });
  }

Above code will be work, when array automatically update after push. (see in the code)

10

Hello,
I guess that pages and selectedTab are bind in html to supertabs.

Maybe I see it wrong, but
In first attemp pages is filled syncronusly in constructor, where supertabs is not available, but at later lifecycle the filled pages is bind to supertabs and can go to index from your variable selectedTab.

Second attemp the variable pages is filled asyncrounously, nobody knows when it is finish, supertabs bind to pages, but if pages has no content at this time, because asyncrounus promise hadnā€™t filled it, than I can not go to selected pages.

If this is the issue, then you can fetch supertabs with ViewChild and set index when it is avaiable and array pages is filled.

Best regards, anna-liebt

additional Iā€™m not really sure that storage.get is always ready at constructor. Same example will hook it at ionviewwillenter