Ionic Tabs not loading content of the page

Question

I have been trying to work out the simple ionic tab component since a few days. I have a screen were the 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-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>

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!

Can you please give changed route url after click of tabs. It seems your child routes should be at out of children just like 'childDetailsPage'. — Neha Shah
This is the changed URL after i click on a tab localhost:8100/child/child-detail/learning. The tab page html does not change, only the ngOnInit is fired. i also checked the other ionic lifecycle methods are firing — Aman Mohammed

Aman Mohammed Aman Mohammed · Accepted Answer · 2020-03-11T16:26:59

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 present in the ion-content tab.

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!

Ionic Tabs not loading content of the page

1 Answers