bug: Lifecycle hook not firing when going to non tabs page and coming back.

[Saqib92]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When going to non tabs page and then coming back Lyfecycle function not firing.

Expected Behavior

it should fire when ever coming to tabs page.

Steps to Reproduce

Check this repo: https://github.com/ionic-team/ionic-framework/issues/25784

Code Reproduction URL

https://github.com/ionic-team/ionic-framework/issues/25784

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0 (/Users/fahadaslam/.nvm/versions/node/v20.10.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.2
   @angular-devkit/build-angular : 17.0.8
   @angular-devkit/schematics    : 17.0.8
   @angular/cli                  : 17.0.8
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : 5.6.0

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 2.0.1) : 2.0.0

System:

   NodeJS : v20.10.0 (/Users/fahadaslam/.nvm/versions/node/v20.10.0/bin/node)
   npm    : 10.2.3
   OS     : macOS Unknown

Additional Information

I am using Angular 17, and latest ionic. This is the exact issue i am facing: https://github.com/ionic-team/ionic-framework/issues/25784

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Hi there,

Please attach a new reproduction. The issue you linked to references a previously resolved Vue fix. The Vue and Angular routing implementation are different, so we'll need a new reproduction to verify.

[Saqib92]

here is the github repo: https://github.com/Saqib92/ionic7-lifecycle-issue.git

[liamdebeasi]

Thanks for providing a repo. Ionic is working as intended here, though I realize the behavior is a bit confusing. When you go from a tabs page to a non-tabs page, the entire tabs context is considered "leaving". However within the tabs context itself, Tab 1 is still active which is why the lifecycles are not firing on Tab 1 when going to a non-tabs page. You can test this by logging something in the ionViewWillEnter hook on tabs.page.ts. Logging should happen there but not on Tab 1.

As I noted, this is a bit confusing and we are looking to improve this behavior. Ideally ionView* lifecycle events fire on any Ionic page that transitions away regardless of nesting status. We are tracking improvements in https://github.com/ionic-team/ionic-framework/issues/17992.

I posted a workaround in https://github.com/ionic-team/ionic-framework/issues/28078#issuecomment-1701313792 that might be of interest to you too.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.