How to fix Side Menu Button not showing on first login

i'm new to Ionic and ive been working in a mobile hybrid app, and i followed this tutorial https://ionicacademy.com/ionic-side-menu-with-sub-items/ its about how to Create an Ionic 4 Side Menu with Sub Menu Items. The problem i have right now is that the side menu button doesnt show on the first show for example if i do the Ionic Serve Command, it doesn't show the menu button ive read in several forums about the auto-hide="false" and persistent="true" but still not showing on first try.

Example of the Menu

As you can see in the image above the image on the left is the first show of the page and the right side image is when i refresh the page.

According to the tutorial this is my Menu.ts

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

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

pages = [
{
title: 'Home',
url: '/menu/main',
icon: 'home'
},
{
title: 'Menu',
children: [
{
title: 'Premios',
url: '/menu/premios',
icon: 'gift'
},
{
title: 'Canje de Puntos',
url: '/menu/canjepuntos',
icon: 'cash'
},
{
title: 'Consulta de Puntos',
url: '/menu/puntos',
icon: 'card'
},
{
title: 'Historial de Compras',
url: '/menu/historial',
icon: 'cart'
},
{
title: 'Premios Reclamados',
url: '/menu/premiosreclamados',
icon: 'calendar'
},
{
title: 'Contactanos',
url: '/menu/contactanos',
icon: 'mail'
}
]
}
];

constructor() { }

ngOnInit() {
}

}


Menu module ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MenuPage } from './menu.page';

const routes: Routes = [
{
path: '',
redirectTo: '/menu/main',
pathMatch: 'full'
},
{
path: '',
component: MenuPage,
children: [
{
path: 'main',
loadChildren: '../main/main.module#MainPageModule'
},
{
path: 'premios',
loadChildren: '../premios/premios.module#PremiosPageModule'
},
{
path: 'canjepuntos',
loadChildren: '../canjepuntos/canjepuntos.module#CanjepuntosPageModule'
},
{
path: 'puntos',
loadChildren: '../puntos/puntos.module#PuntosPageModule'
},
{
path: 'historial',
loadChildren: '../historial/historial.module#HistorialPageModule'
},
{
path: 'premiosreclamados',
loadChildren: '../premiosreclamados/premiosreclamados.module#PremiosreclamadosPageModule'
},
{
path: 'contactanos',
loadChildren: '../contactanos/contactanos.module#ContactanosPageModule'
},
{ path: 'premio',
loadChildren: '../premio/premio.module#PremioPageModule' },
{ path: 'premio-single',
loadChildren: '../premio-single/premio-single.module#PremioSinglePageModule' },
]
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ MenuPage ]
})
export class MenuPageModule { }


My Menu template:

<ion-menu contentId="content" auto-hide="false" persistent="true" >
<ion-header>
<ion-toolbar color="dark">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>

<div *ngFor="let p of pages">

<!-- Standard Menu Item -->
<ion-menu-toggle *ngIf="p.url">
<ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
<ion-icon [name]="p.icon" slot="start"></ion-icon>
<ion-label>
{{ p.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
<!-- Item with Children -->

<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open" detail="false">
<ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
<ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>

<!-- Children List for clicked Item -->
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item *ngFor="let sub of p.children" class="sub-item" [routerLink]="sub.url" routerDirection="root"
routerLinkActive="active">
<ion-icon [name]="sub.icon" slot="start"></ion-icon>
<ion-label>
{{ sub.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>

</div>
</ion-content>

</ion-menu>

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


This is the Main page where i'm showing the menu (only logged in users can see it).

<ion-header>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="end" name="barcode"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content padding>
<div class="welcomeTextDiv">
<h1 class="welcomeText">BIENVENIDO</h1><br><br>
</div>
<h5 style="font-size: 25px; margin: auto; color: red !important; text-transform: uppercase; text-align: center" class="errorMessage">
{{ error }}
</h5>
<div class="userDiv">
<h2 class="userText">{{ cliente }}</h2>
</div>
<div class="messageDiv">
<h2 class="messageText">Felicidades has ganado {{ points }} puntos</h2>
</div>
</ion-content>


I've followed the whole tutorial but it doesn't seems to work for me your help will be much appreciated.

Continue reading...