带有侧面菜单的Ionic 4应用程序会更新URL，但不会更新视图

Question

My project consists of an Ionic 4 app with a side menu and double routing where the default routes: Routes is for login and menu, and the other is in menu folder.

The problem is that when I open the burger menu and click on any item in it changes the URL, but does not load the view. Nevertheless, when I refresh the browser page, then loads it.

So, I tried this out on a test page:

a.page.ts

ngOnInit() { console.log("onInit"); }
ionViewWillEnter() { console.log("will enter"); }
ionViewDidEnter() { console.log("did enter"); }
ionViewWillLeave() { console.log("will leave"); }
ionViewDidLeave() { console.log("did leave"); }
ngOnDestroy() { console.log("on destroy"); }

And prints onInit , will enter and did enter on console, but as said before the view does not show.

What the hell is happening here or how can I make the app load the pages normally without having to force refreshing (not programmatically, but with F5 button) the browser, please?

For more information I'll add all below.

The menu has been generated as a page and has this structure:

menu.page.html

<ion-menu contentId="mainMenu" side="start" type="overlay">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle auto-hide="true" *ngFor="let route of routes">
        <!-- Uncomment any line below. The behavior is the same. -->
        <!-- <ion-item [routerLink]="route.url"> -->
        <!-- <ion-item (click)="goToPage(route.url)"> -->
          <ion-label>{{route.title}}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="mainMenu" main><ion-router-outlet>

menu.module.ts

[...]

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      { path: 'home', loadChildren: '../home/home.module#HomePageModule' },
      { path: 'a', loadChildren: '../a/a.module#APageModule' }
    ]
  }
];

[...]

menu.page.ts

[...]

public readonly routes = [
  { title: 'home', url: '/menu/home' },
  { title: 'A', url: '/menu/a' }
];

public goToPage(url: string): void { this.router.navigateByUrl(url); }

[...]

Ionic details:

"@ionic/angular": "^4.6.0"
"@angular/router": "^7.2.2"
Ionic cli: 5.2.1

Answer 1

菜单组件位于路径'' ，子模块APageModule位于路径a ，因此总路径将为/a而不是/menu/a 。

Answer 2

Okay. So, as commented Joel Joseph here , the problem is that the <ion-router-outlet> tag at menu.page.html is not closed. The rest of the code is okay.