bug: Ionic life cycle hooks are not triggering in routed component #30644

Activity

1. ionitron-bot

   added

   triage

   on Aug 20, 2025
2. Av1nag commented on Aug 20, 2025

   

   Av1nag

   on Aug 20, 2025

   Last edited by Av1nag

   Author

   More actions

   Let me know if needed any clarification. I'm always here to help.
3. brandyscarney

   marked Ionic life cycle hooks are not triggering in routed component #30642 as a duplicate of this issue on Aug 20, 2025
4. Praise-99 commented on Aug 24, 2025

   

   Praise-99

   on Aug 24, 2025

   More actions

   We are experiencing the same issue throughout our entire application, and it is impacting major functionalities by causing frontend inconsistencies, as hooks are deeply integrated.

   👍React with 👍3Reacted by Roger, Avinag and Ionut Pac-Balaj
5. Av1nag commented on Aug 28, 2025

   

   Av1nag

   on Aug 28, 2025

   Author

   More actions

   Hi @brandyscarney ,

   May I know any updates regarding this issue?
6. thetaPC commented on Oct 16, 2026

   

   thetaPC

   on Oct 16, 2026

   Contributor

   More actions

   Thanks for the report, and sorry for the delay.

   Verified on 9.0.8, where this is fixed by #31532, released in v9.0.8. When you go from A(III) to B and back, the root ion-router-outlet transitions Page A, but the nested ion-router-outlet inside Page A never transitions, because A(III) was its active page the whole time. Ionic only fired lifecycle events on the page being transitioned, so A(III) received neither the enter events on the way back nor the leave events on the way out. From 9.0.8, the nested outlet forwards Page A's lifecycle events to its active page.

   If you can't move to 9.x yet, re-dispatch Page A's events onto the nested outlet's active page. This was verified on 8.8.19, and it is safe to keep after upgrading, since 9.0.8 detects the re-dispatch and does not fire the events twice:

   import { Component, ViewChild } from '@angular/core';
   import { IonRouterOutlet } from '@ionic/angular';
   
   @Component({
     selector: 'app-page-a',
     template: '<ion-router-outlet></ion-router-outlet>',
     standalone: false,
   })
   export class PageAComponent {
     @ViewChild(IonRouterOutlet) outlet!: IonRouterOutlet;
     private childLeft = false;
   
     ionViewWillEnter() { this.forward('ionViewWillEnter'); }
     ionViewDidEnter() { this.forward('ionViewDidEnter'); }
     ionViewWillLeave() { this.forward('ionViewWillLeave'); }
     ionViewDidLeave() { this.forward('ionViewDidLeave'); }
   
     private forward(eventName: string) {
       // On first entry the nested outlet already fired enter on its own page.
       if (eventName.endsWith('Enter') && !this.childLeft) {
         return;
       }
       this.outlet.getLastRouteView()?.element.dispatchEvent(new CustomEvent(eventName));
       if (eventName === 'ionViewDidLeave') {
         this.childLeft = true;
       }
       if (eventName === 'ionViewDidEnter') {
         this.childLeft = false;
       }
     }
   }

   The childLeft check matters: without it, A(III) gets its enter events twice the first time you open Page A.

   Closing this as completed, since the fix is in 9.0.8.
7. thetaPC

   closed this as completedon Oct 16, 2026