Can't redirect to Menu Ionic 5

Question

I am developing an app using Ionic 5, and after the user is authenticated, I want to redirect him to the page "accueil", which would contain a side menu.

I created the pages I needed, my auth page does work and redirected me the "accueil" page when I didn't have a side menu, but now it doesn't work anymore.

My app.routing.module.ts contains:

const routes: Routes = [
  {
     path: '', redirectTo: 'home', pathMatch: 'full' 
  },
  {
     path: 'home', loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
    },
  { 
    path: 'auth/:mode', loadChildren: './pages/auth/auth.module#AuthPageModule' 
  },
  {
    path: 'menu',
    loadChildren: () => import('./pages/menu/menu.module').then( m => m.MenuPageModule)
  }
];

Here's my menu-routing.module.ts :

const routes: Routes = [
  {
    path: 'menu',
    component: MenuPage,
    children: [
      { 
        path: 'accueil',
        loadChildren: '../accueil/accueil.module#AccueilPageModule' 
      },
      {
        path: 'profil',
        loadChildren: '../profil/profil.module#ProfilPageModule'
      }
    ]
  },
  {
    path: '/auth/connect',
    redirectTo: '/menu/accueil'
  }
];

At first, the path of the redirectTo was:

{
  path: '',
  redirectTo: '/menu/accueil'
}

But I was having the error

"ERROR Error: "Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'menu/accueil'"

So I added /auth/connect to the path, but now when I log in the app, it doesn't redirect me anywhere. The url changes to http://localhost:8100/menu but the page doesn't load and there is no error displayed in the console.

Can someone explain me what I do wrong to implement a sidemenu?

Answer 1

The above method is to implement tabs and other children to a component such as maps.

for side menu you could use the following approach:

1. app.component.ts - create an array of objects that contain the different pages to your side menu.

   import { Component } from '@angular/core';
   import { Platform } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';

   @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] }) export class AppComponent { navigate:any; constructor( private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar ) { this.sideMenu(); this.initializeApp(); } sideMenu() { this.navigate=[ { title: "Home", url: "./home/home.module", icon: "home" }, { title: "Chat", url: "./chat/chat.module", icon: "chatboxes" }, { title: "Contacts", url: "./contacts/contacts.module", icon: "contacts" }, ] }

   initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); } }

app.component.html- add the ion-menu to your app

<ion-app>
    <ion-menu side="start" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>Navigate</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list *ngFor="let pages of navigate">
          <ion-menu-toggle auto-hide="true">
            <ion-item [routerLink]="pages.url" routerDirection="forward">
                <ion-icon [name]="pages.icon" slot="start"></ion-icon>
                   {{pages.title}} 
            </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet  id="content1"></ion-router-outlet>
</ion-app>

home.page.html - add the menu button to every page that you'd like the side menu appearing in.

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
        </ion-buttons>
      <ion-title>
        Home
      </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

So you could redirect the root path to your auth page...then after auth simply navigate to home ( the page that contains your side menu)

To disable the menu on a given page..

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

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

  constructor(public menuCtrl: MenuController) 
  {
    this.menuCtrl.enable(false,"first");
   }

  ngOnInit() {
  }

}

Note that in my app.component.html I have declared a menuId and not simply id....if you use id only there'll be no changes but with menuId the menu is disabled for that page