LayoutComponent -> Navigation disappears after routing

I have a funny problem.
I have made a layout component.

LayoutComponent

<ion-split-pane contentId="main">
  <ion-menu side="start" menuId="custom" contentId="main">

    <ion-header>
      <div id="userBox">
        <div id="userImage"><i class="far fa-user-circle"></i></div>
        <p>Nicolas Lauinger<br>TGOPOD</p>
        <div id="switchTheme">
          <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" #theme [(ngModel)]="currentTheme" (change)="changeTheme(theme)">
            <label class="onoffswitch-label" for="myonoffswitch">
              <span class="onoffswitch-inner"></span>
              <span class="onoffswitch-switch"></span>
            </label>
          </div>

        </div>
        <p class="logout">
          <i class="fas fa-sign-out-alt"></i>
        </p>
      </div>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let nav of navi">
          <ion-item lines="none" [class.active]="isActive('/'+ nav.link)" [routerLink]="'/'+ nav.link">
            <i slot="start" class="fas {{nav.icon}}"></i>{{nav.linkName}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>

  </ion-menu>

  <ion-router-outlet animated="false" id="main"></ion-router-outlet>

</ion-split-pane>

In the app-routing.module.ts it is called at every path.

app-routing.module.ts

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {LayoutWithSideNavComponent} from './layout/layout-with-side-nav/layout-with-side-nav.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'info',
    component: LayoutWithSideNavComponent,
    loadChildren: () => import('./pages/info/info.module').then(m => m.InfoPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

That’s what it looks like.

Now when I click on contact it looks like this.

So far everything as expected and in order. But when I click on Dashboard again it suddenly looks like this. The navigation bar has disappeared.

bild3

What am I doing wrong?

1 Like

This is happening for me with Vue and Ionic 6.

Did you find out why this happens?