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

@axezor wrote:

Hi,

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.

Screenshots:

imageedit_2_5543125763.png1000×484 76.5 KB

imageedit_5_2941275782.png1700×836 270 KB

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.)

menu-routing.module.ts

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',
  }];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [ RouterModule ]
})

export class MenuRoutingModule { }

menu.page.ts

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

@Component({
  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() {
 }

}

menu.page.html

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

    <ion-content color="primary">
      <ion-list>
        <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-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

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

Posts: 1

Participants: 1

Read full topic