ionic tab view gone when clicking on a tab

Question

I searched for the solution, but didn't find any match in this case.

I have created a page called "entertainment" and inside that I have created two other pages called "monthly" and "special" inside the entertainment folder. FYI , the folder structure is look alike this.

• entrtainment
  • monthly
  • special

The entertainment page's route look like as follows.

const routes: Routes = [
  {
    path: '',
    component: EntertainmentPage
  },
  {
    path: 'monthly',
    loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
  },
  {
    path: 'special',
    loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
  }
];

Also the tab view looks like as follow.

  <ion-tabs >
    <ion-tab-bar slot="bottom" style="width: 100% !important;">
      <ion-tab-button tab = 'monthly'>
        <ion-icon name="fast-food"></ion-icon>
        <ion-label>Food</ion-label>
      </ion-tab-button>

      <ion-tab-button tab = 'special'>
        <ion-icon name="beer"></ion-icon>
        <ion-label>Alcohol</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

But when I clicked on a given tab the page is loaded and the undelying tab is gone. Any suggestion on this please. Thanks in advance.

Answer 1

Found the solution with the help of @Mostafa

So what I just missed is, add each and every tab route as child route.

  {
    path: '',
    component: EntertainmentPage,
    children:[
      {
        path: '',
        redirectTo: 'monthly',
        pathMatch: 'full'
      },
      {
        path: 'monthly',
        loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
      },
      {
        path: 'special',
        loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
      },
    ]
  }