Tabs Disappearing After Navigating Away (Side Menu + Tabs)


#1

I have an app that uses a side menu and tabs based off the Ionic Conference App. The app works as expected at the start and the tabs and side menu are both shown but when you go to a non-tabs page and then back to a tabs page via the side menu the tabs disappear. Here’s my relevant. Any one have any ideas why this may not be working as expected? :x

export class MyApp {


  // Reference to the app's root nav
  @ViewChild(Nav) nav: Nav;
 
  rootPage: any;
  
 
  pages: PageInterface[] = [
    { title: 'Applications', pageName: 'HomePage',  index: 0, icon: 'home' },
    { title: 'New Entries ', pageName: 'JobEntryPage',  index: 1, icon: 'map' },

    { title: 'Statistics', pageName: 'StatisticsPage', index: 2, icon: 'stats'},
    
  ];

  socialPages: PageInterface[] = [

    { title: 'Company List', pageName: 'CompaniesPage', component: 'CompaniesPage', icon: 'log-out'}
    
   

  ];

  accountPages: PageInterface[] = [
    { title: 'Profile', pageName: 'ProfilePage', component: 'ProfilePage', icon: 'person' },
   
    { title: 'Logout', pageName: 'LogoutPage', component: 'LogoutPage', icon: 'log-out'}


    
  ];

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
                private afAuth: AngularFireAuth, public fb: FirebaseProvider,
              public menu: MenuController) {

    this.initializeApp();
                  
    this.afAuth.authState.subscribe(auth => {
      if(!auth)
        this.rootPage = 'LoginPage';
      else
        this.rootPage = 'TabsPage';
    });
    

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }


  openPage(page: PageInterface) {
    let params = {};
    
        // the nav component was found using @ViewChild(Nav)
        // setRoot on the nav to remove previous pages and only have this page
        // we wouldn't want the back button to show in this scenario
        if (page.index) {
          params = { tabIndex: page.index };
        }
    
        // If we are already on tabs just change the selected tab
        // don't setRoot again, this maintains the history stack of the
        // tabs even if changing them from the menu
        if (this.nav.getActiveChildNavs().length && page.index != undefined) {
          this.nav.getActiveChildNavs()[0].select(page.index);
          // Set the root of the nav with params if it's a tab index
        } else {
          console.log(page.pageName)
          this.nav.setRoot(page.pageName, params).catch((err: any) => {
            console.log(`Didn't set nav root: ${err}`);
          });
  }
}
 
  isActive(page: PageInterface) {
    // Again the Tabs Navigation
    let childNav = this.nav.getActiveChildNavs()[0];
 
    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }
 
    // Fallback needed when there is no active childnav (tabs not active)
    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
      return 'primary';
    }
    return;
  }
}