bug: Ionic Page Events sometimes not fired

issue.md

Bug Report

Ionic version:

[x] 4.11.7

Current behavior:

Ionic Page Events (ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, ionViewDidLeave) are sometimes not fired for nested pages (nested routes and ion-router-outlets).

Expected behavior:

Ionic Page Events should be fired consistently for nested pages (in the same way as for top-level pages).

Steps to reproduce:

(1) Open the related code on StackBlitz and show console logs.

Route /page-1/subpage-a is loaded by default and the following logs are printed:

AppComponent.ngOnInit()
Page1Component.ngOnInit()
SubpageAComponent.ngOnInit()
Page1Component.ionViewWillEnter()
Page1Component.ionViewDidEnter()
SubpageAComponent.ionViewWillEnter()
SubpageAComponent.ionViewDidEnter()

(2) Navigate to /page-1/subpage-b. The following logs are printed:

SubpageBComponent.ngOnInit()
SubpageAComponent.ionViewWillLeave()
SubpageBComponent.ionViewWillEnter()
SubpageBComponent.ionViewDidEnter()
SubpageAComponent.ionViewDidLeave()

(3) Navigate to /page-2. The following logs are printed:

Page2Component.ngOnInit()
Page1Component.ionViewWillLeave()
Page2Component.ionViewWillEnter()
Page2Component.ionViewDidEnter()
Page1Component.ionViewDidLeave()

The following events should be fired but aren't:

SubpageBComponent.ionViewWillLeave()  <- BUG: not called
SubpageBComponent.ionViewDidLeave()   <- BUG: not called

(4) Navigate to /page-1/subpage-b. The following logs are printed:

Page2Component.ionViewWillLeave()
Page1Component.ionViewWillEnter()
Page1Component.ionViewDidEnter()
Page2Component.ionViewDidLeave()
Page2Component.ngOnDestroy()

The following events should be fired but aren't:

SubpageBComponent.ionViewWillEnter()  <- BUG: not called
SubpageBComponent.ionViewDidEnter()   <- BUG: not called

Related code:

https://stackblitz.com/edit/ionic-page-events-bug?file=src/app/app.module.ts

@Component({
  template: `
    <ion-app>
      <a routerLink="/page-1/subpage-a">/page-1/subpage-a</a>
      <a routerLink="/page-1/subpage-b">/page-1/subpage-b</a>
      <a routerLink="/page-2">/page-2</a>
      <ion-router-outlet style="position: static; height: 100%"></ion-router-outlet>
    </ion-app>
  `,
})
export class AppComponent {}

@Component({
  template: `<ion-router-outlet style="position: static; height: 100%"></ion-router-outlet>`
})
export class Page1Component {}

@Component({ template: '' })
export class SubpageAComponent {
  /* ionViewWillEnter(), ionViewDidEnter(), ionViewWillLeave(), ionViewDidLeave() */
}

@Component({ template: '' })
export class SubpageBComponent {
  /* ionViewWillEnter(), ionViewDidEnter(), ionViewWillLeave(), ionViewDidLeave() */
}

@Component({ template: '' })
export class Page2Component {}


const routes: Routes = [
  {
    path: 'page-1',
    component: Page1Component,
    children: [
      { path: 'subpage-a', component: SubpageAComponent },
      { path: 'subpage-b', component: SubpageBComponent },
      { path: '**', redirectTo: 'subpage-a' },
    ],
  },
  { path: 'page-2', component: Page2Component },
  { path: '**', redirectTo: 'page-1' },
];

Other information:

While Page Events don't work in the above example, activate and deactivate events of ion-router-outlet do always work.

As a workaround, we currently manually propagate these 2 events to components and use them instead of the official Page Events:

<ion-router-outlet
  (activate)="$event.customOnActivate()"
  (deactivate)="$event.customOnDeactive()"
></ion-router-outlet>

@Component(...)
export class MyComponent {
  customOnActivate() {}
  customOnDeactivate() {}
}

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 (update available: 0.3.0)

System:

   NodeJS : v12.13.1 (/usr/local/bin/node)
   npm    : 6.12.1
   OS     : macOS Catalina