Side menu navigation problem after switch between pages

Ionic Framework Ionic Angular
1

Hi. I am new in ionic and angular and I am trying to create a single page with authentication. I have side menu different for user and visitor. My foled structure looks like this:
./app/

./app/user/profile/
./app/user/logout/

./app/visitor/login/
./app/visitor/registration/

And I am trying to navigate from user/profile folder/page after logout to visitor/login.

When visitor visit the page, he can see this:

visitorLogin
visitorLogin1034Ă—550 27.8 KB

After login, I redirected him to another page and after that, he can see this:

userProfile
userProfile1040Ă—564 19.3 KB

But after logout, I only call
`this.router.navigateByUrl(“visitor/login-internal”);, side menu is nowhere and you can see this:

userAfterLogout
userAfterLogout1042Ă—558 19.1 KB

To generate side menu for visitor and user, I am using this code, same for visitor.page.html and user.page.html:

<ion-app>
  <ion-split-pane content-id="visitor-menu">
    <ion-menu side="start" content-id="visitor-menu">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let page of appPages; let i = index">
            <ion-item routerDirection="root" [routerLink]="[page.url]" lines="none" detail="false"
              [class.selected]="selectedIndex == i">
              <ion-icon [name]="page.icon" slot="start"></ion-icon>
              <ion-label>{{ page.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <div class="ion-page" id="visitor-menu">
      <ion-content class="ion-padding">
        <ion-router-outlet class="ion-page" id="visitor-menu"></ion-router-outlet>
      </ion-content>
    </div>
  </ion-split-pane>
</ion-app>

Pages in the menu is stored in visitor.page.ts and user.page.ts. Here is example of visitor.page.ts, code for user.page.ts is almost equal:

@Component({
  selector: 'app-visitor',
  templateUrl: './visitor.page.html',
  styleUrls: ['./visitor.page.scss'],
})
export class VisitorPage implements OnInit {
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Quick match',
      url: '/visitor/quick-match',
      icon: 'football'
    },
    {
      title: 'Login',
      url: '/visitor/login-internal',
      icon: 'log-in'
    },
    {
      title: 'Registration',
      url: '/visitor/registration-internal',
      icon: 'person-add'
    },
    {
      title: 'Login via Google',
      url: '/visitor/login-google',
      icon: 'logo-google'
    }
  ];
  constructor() { }
  ngOnInit() {
  }
}

Here is example of visitor-routing.module.ts, user-routing.module.ts is almost equal:

const routes: Routes = [
  {
    path: '',
    component: VisitorPage,
    children: [
      {
        path: 'login-facebook',
        loadChildren: () => import('./login-facebook/login-facebook.module').then( m => m.LoginFacebookPageModule)
      },
      {
        path: 'login-google',
        loadChildren: () => import('./login-google/login-google.module').then( m => m.LoginGooglePageModule)
      },
      {
        path: 'login-internal',
        loadChildren: () => import('./login-internal/login-internal.module').then( m => m.LoginInternalPageModule)
      },
      {
        path: 'registration-internal',
        loadChildren: () => import('./registration-internal/registration-internal.module').then( m => m.RegistrationInternalPageModule)
      },
      {
        path: 'quick-match',
        loadChildren: () => import('./quick-match/quick-match.module').then( m => m.QuickMatchPageModule)
      }
    ]
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class VisitorPageRoutingModule {}

In app folder, main/root folder, I have almost nothing, only app-routing.module.ts has some of my code:

const routes: Routes = [
  { path: '', redirectTo: 'visitor/login', pathMatch: 'full' },
  {
    path: 'errors',
    loadChildren: () => import('./errors/errors.module').then( m => m.ErrorsPageModule)
  },
  {
    path: 'visitor',
    loadChildren: () => import('./visitor/visitor.module').then( m => m.VisitorPageModule),
    canLoad: [AuthGuard],
    data: { 'accessLevel': AccessLevel.VISITOR }
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then( m => m.UserPageModule),
    canLoad: [AuthGuard],
    data: { 'accessLevel': AccessLevel.USER }
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am sure that I have something absolutely wrong in my routing logic.

Here is ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\frant\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.6
   @angular-devkit/schematics    : 9.1.6
   @angular/cli                  : 9.1.6
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.12.0
   OS     : Windows 10

Application running with command ionic serve on localhost WIN 10 64 bit.
Thank you and sorry for any advice or time what you spend because of my problem.

1 Like