Ionic Tabs not loading content of tab

Hello,

I have been trying to work out the simple ionic tab component since a few days. I have a screen were the user has 3 tabs on the bottom slot. On clicking the tabs, the ngOnInit function fires for the tab but I cant seem to the load the Html associated with the component. Any ideas what could be wrong? I have put a console log message in the ngOnInit method and it shows the message in console so I think the routing is configured correctly. I can also see the URL changing.

My HTML code:

<ion-footer>
    <ion-toolbar>
            <ion-tabs>
                <ion-tab-bar slot="bottom">
    
                    <ion-tab-button tab="journey">
                        <ion-icon name="walk"></ion-icon>
                      <ion-label>Journey</ion-label>
                    </ion-tab-button>
        
                  <ion-tab-button tab="learning">
                      <ion-icon name="book"></ion-icon>
                    <ion-label>Current Learning</ion-label>
                    <ion-badge>6</ion-badge>
                  </ion-tab-button>
              
                  <ion-tab-button tab="profile">
                      <ion-icon name="information-circle"></ion-icon>
                      <ion-label>Profile</ion-label>
                  </ion-tab-button>
                </ion-tab-bar>
              </ion-tabs> 
     </ion-toolbar>
</ion-footer>

I have tried using the ionic page and then also tried using ionic component. Both approaches display the same behaviour of the ngOnInit firing and URL chaning but the HTML associated with the tab does not load.

My routing-module.ts code

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    import { ChildDetailPage } from './child-detail.page';
    import { CurrentLearningPageModule } from '../../current-learning/current-learning.module';
    import { CurrentLearningComponent } from '../../current-learning/current-learning.component';
    import { ProfileComponent } from '../../profile/profile.component'
    
    const routes: Routes = [
      {
        path: '',
        component: ChildDetailPage,
        children:[
          {
            path: 'journey',
            children:
                [
                  {
                    path: '',
                    loadChildren: './child-detail.page'
                  }
                ]
          },
          {
            path: 'learning',
            children:
                [
                  {
                    path: '',
                    //loadChildren: '../../current-learning/current-learning.module#CurrentLearningPageModule'
                   // loadChildren: () => import('../../current-learning/current-learning.module').then( m => m.CurrentLearningPageModule)
                   component: CurrentLearningComponent
                  }
                ]
          },
          {
            path: 'profile',
            loadChildren: () => import('../../profile/profile.component').then( m => m.ProfileComponent)
          },
          
          // {
          //   path: '',
          //   redirectTo: 'journey',
          //   pathMatch: 'full'
          // }
        ]
      },
      {
        //path: '',
        //redirectTo: 'child/child-detail/',
        //pathMatch: 'full'
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class ChildDetailPageRoutingModule {}

Any help would be deeply appreciated!

Guys any help or direction would be greatly appreciated. I cant seem to see the new tab page load. it only seems to execute the ngOnInit function of the tab page.

did you inspect and see if theres any error.

Thanks Pratik, I have seen the developer console there are no errors.

why will the html of the associated component / page not load ? even when the ngOnInit has executed. I also put console log messages in ionViewWillEnter and ionViewDidEnter functions and all the messages are shown in browser console. The view doesnt change!

I figured out the problem!
The issue was in the HTML code. I had put the ion-tab code in the ion-footer tag. The ion-tab code needs to be in the ion-content tab :grinning:
I put the code in the ion-footer so that the tabs appear down in the footer. However to do that all I needed to do was use ion-tab-bar slot=“bottom” which I had not noticed! :face_with_monocle: