Ionic 5 ion-split-pane when selecting a side panel link the view renders the component and after that all the links do not work

Here is the problem on my app in detail. When I click the “Procedure” link

The procedure component loads the view

If I try to go back to another the create component by clicking the “Create” link in the side panel it no longer works.

I must refresh the browser for the “Create” link to work.

Here are my files:
I have a component called side-menu.

<ion-split-pane contentId="menu-content">
  <ion-menu id="side-menu" contentId="menu-content" menuId="side-menu-create" type="overlay">

    <ion-toolbar id="menu-header">

      <ion-img [src]="'/assets/images/augmentorLogo.svg'"></ion-img>


      <ion-list lines="none">

        <ion-menu-toggle autoHide="false" menu="side-menu-create" *ngFor="let menuItem of menuItems">

          <ion-item [routerLink]=menuItem.url routerDirection="root" routerLinkActive="active-link">
            <ion-icon class="ion-padding-end" color="primary" [name]="menuItem.icon"></ion-icon>
            <ion-label color="primary">{{ menuItem.title }}</ion-label>



    <ion-footer class="ion-no-border ion-padding-bottom">
      <ion-item href="/" routerDirection="root" routerLinkActive="active-link">
        <ion-icon class="ion-padding-end" color="primary" name="log-out-outline"></ion-icon>
        <ion-label color="primary"> Sign Out</ion-label>



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



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

  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss'],
export class SideMenuComponent implements OnInit {
  menuItems = [
    { title: 'Create', url: 'create-page', icon: 'add' },
    { title: 'Procedure', url: 'procedures', icon: 'create-outline' },
    { title: 'ClassroomAR', url: 'classroomAR', icon: 'school-outline' },
    { title: 'Contacts', url: 'contacts', icon: 'person-add-outline' }

  constructor() {

  ngOnInit() { }


I have a side-menu page that loads the side-menu.component


Side-menu-page.module.ts import this side-menu.component using ComponentsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

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

import { SideMenuPagePageRoutingModule } from './side-menu-page-routing.module';

import { SideMenuPagePage } from './';
import { ComponentsModule } from 'src/app/components/components.module';

  imports: [
  declarations: [SideMenuPagePage]
export class SideMenuPagePageModule {}

side-menu-page-routing.module has the following routes to load each component selected in the side menu

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SideMenuPagePage } from './';

const routes: Routes = [
    path: '',
    component: SideMenuPagePage,
    children: [
        path: 'create-page',
        loadChildren: () => import('../create-page/create-page.module').then(m => m.CreatePagePageModule),
        path: 'procedures',
        loadChildren: () => import('../../procedure-list/procedure-list.module').then(m => m.ProcedureListPageModule)

  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
export class SideMenuPagePageRoutingModule { }

Found the solution it was the urls in the menuItems array in the side-menu.component.ts. I needed to fix the relative path of each url to call out the right route path:

  menuItems = [
    { title: 'Create', url: '/javier-staging/main/create-page', icon: 'add' },
    { title: 'Procedure', url: '/javier-staging/main/procedures', icon: 'create-outline' },
    { title: 'ClassroomAR', url: 'classroomAR', icon: 'school-outline' },
    { title: 'Contacts', url: 'contacts', icon: 'person-add-outline' }

What dummy I am :crazy_face: