Side menu navigation problem after switch between pages

@irelevant wrote:

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:

visitorLogin1034×550 27.8 KB

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

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:

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.

Posts: 1

Participants: 1

Read full topic