Ionic 4 Split-pane sidemenu disappears after navigation click

I want to outsource my navigation in a layout component.
I have done all that so far. For testing I created two pages, Home and Contact.
When I load the application, everything is displayed correctly. If I now click on the navigation point Contact, the page changes as expected. If I click on the Home menu item again, the page changes, but the navigation on the left side disappears forever.

I hope you can help me

Here the structure of the different files. I also attach a picture of the folder structure

folder

app-routing.module.ts

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

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

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

main-layout-with-side-nav.component.html

<ion-split-pane contentId="main-content">

  <ion-menu content-id="main-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <ion-menu-toggle auto-hide="false">

          <ion-item *ngFor="let nav of navi" button [routerLink]="'/'+ nav.link">
            <ion-icon slot="start"></ion-icon>
            <ion-label>
              {{nav.linkName}}
            </ion-label>
          </ion-item>

        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <div class="ion-page" id="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <!--        <ion-title>Header</ion-title>-->
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-router-outlet></ion-router-outlet>
    </ion-content>
  </div>

</ion-split-pane>


app.component.html

<ion-app>
  <ion-router-outlet animated="false"></ion-router-outlet>
</ion-app>