Ionic 4 component is not rendering on navigation

Question

I am using Ionic 4 and Angular 8 I have below tabs on the bottom of my app and want to navigate from forum and messages to different components associated with tabs on the click of tabs. But the issue is Page do not render on the click of tabs but if I refresh my page then navigation works fine. I don't know what I am missing here.

Tabs HTML

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected tab="food" (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="non-food" (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" tab="createListing" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="forum" (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

routesTo('messages') and routesTo('forum') in TS file.

routeTo(route: string){
    this.navCtrl.navigateForward(`sharing/${route}`);
  }

I have a login page inside LandingPageModule from where I directly route to 'sharing/home' which is a child route of 'sharing'

For more information I have base route module as:

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', loadChildren: () => import('./landing/landing.module').then(mod=> mod.LandingPageModule) },
  { path: 'sharing', loadChildren: () => import('./sharing/sharing.module').then(mod=> mod.SharingModule)  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Sharing module's routes are as:

RouterModule.forChild([
      {
        path: '',
        component: ShareLayoutComponent,
        children:[{
          path: 'home',
          component: HomeComponent
        },
        {
          path: 'forum',
          component: ForumComponent
        },
        {
          path: 'messages',
          component: MessageComponent
        }]
}])

Answer 1

I've found the solution. This answer is for those who are facing same. Just add 'ion-content' in each markup page or segregated HTML. e.g., form component ABC and component XYZ keep all markup inside ion-content.

<ion-content
  <!--Your HTML goes here-->
</ion-content>

Additional details about tabs in Ionic 4:

Ionic 4 did some changes to the tabs which changes the way the worked from years. Now you can use the tabs just as buttons (They won't route your application forcefully just because they are tabs) I've remove tab attribute from the tabs(Which is a feature officially provided by Ionic). How it will help? You will get to know when you will route lazy loaded routing or a scenario where food and non-food are not separate pages but they are just filtering some content on home page which have all the logic.

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

Now above are just buttons which look like tabs. By using them you don't have to worry about same name routes. Just route to different components just by clicking your tabs.