[IONIC 4] lazy loaded pages don't show up ion-content


I’m having troubles with my lazy loaded pages from toggle menu. On every page, I use my custom header component, so If I import the module of the header component to the page module, my ion-content doesn’t appear in ion-router-outlet element. If I remove the HeaderModule from page module, content is showing up, but without header component.


Is there anyone, who knows how to fix this issue or let me know, what I’m doing bad? If there will be some additional information in need, I will kindly post them here.

Thank you guys.

(Lazy-loading works correct.)


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MenuPage } from './menu.page';

const routes: Routes = [{
    path: 'menu',
    component: MenuPage,
    children: [
        path: 'main',
        loadChildren: '../main/main.module#MainPageModule'
        path: 'analyse',
        loadChildren: '../analyse/analyse.module#AnalysePageModule'
        path: 'comparison',
        loadChildren: '../comparison/comparison.module#ComparisonPageModule'
        path: 'similarity',
        loadChildren: '../similarity/similarity.module#SimilarityPageModule'
        path: 'documentation',
        loadChildren: '../documentation/documentation.module#DocumentationPageModule'
    path: '',
    redirectTo: '/login',

  imports: [
  exports: [ RouterModule ]

export class MenuRoutingModule { }


import { Component, OnInit } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

  selector: 'app-menu',
  templateUrl: './menu.page.html',
  styleUrls: ['./menu.page.scss'],
export class MenuPage implements OnInit {

  selectedPath = '';

  pages = [
      title: 'O projekte',
      url: '/menu/main',
      icon: 'information-circle-outline'
      title: 'Analýza tela',
      url: '/menu/analyse',
      icon: 'analytics'
      title: 'Porovnanie',
      url: '/menu/comparison',
      icon: 'git-compare'
      title: 'Podobnosť v športoch',
      url: '/menu/similarity',
      icon: 'shuffle'
      title: 'Dokumentácia tela',
      url: '/menu/documentation',
      icon: 'document'

  constructor(private router: Router) 
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectedPath = event.url;

  ngOnInit() {



  <ion-menu contentId="menucontent">
      <ion-toolbar color="dark">
        <ion-buttons slot="start">
          <div class="profilePath">
              <ion-icon slot="icon-only" name="contact"></ion-icon> &nbsp;
              <ion-icon  slot="end" name="arrow-dropdown" size="small"></ion-icon>

    <ion-content color="primary">
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" [class.active-item]="selectedPath === p.url" routerDirection="forward">
            <ion-label text-uppercase>
              <ion-icon size="small" name="{{ p.icon }}"></ion-icon> &nbsp;
              <b>{{ p.title }}</b>

  <ion-router-outlet id="menucontent" main></ion-router-outlet>