Ionic-framework: [4.0.0-rc.0] ion-tabs lifecycle events not working when navigating back from another view

[jordanpurinton]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
I have some items/cards on my tab pages and navigate to other pages when I click on them. When I go back to the tabs pages from those views, my lifecycle events like ionViewDidEnter() do not fire. They fire when I'm changing tabs, but when I am coming from a non-tab view, they never fire.

Expected behavior:
For these lifecycle events to fire.

Steps to reproduce:
Create a tab project, navigate to another view from a tab page that isn't another tab, go back to the tab page and see that they have not fired.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.2
   @angular/cli                  : 7.1.2
   @ionic/angular-toolkit        : 1.2.1

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.14.0 (/usr/bin/node)
   npm    : 6.4.1
   OS     : Linux 4.18

[rikenppatel]

Please use ionViewDidEnter(), it will trigger if you navigating back to the previous screen.

[jordanpurinton]

@rikenpatel20 doesn't work in a tabbed view though :(

[Eraldo]

Is there a known workaround for tabbed pages yet?

[tomavanc]

Still not working in 4.12.0

[Eraldo]

Same here: My ionViewDidEnter code does not run on tabbed pages. :|

Any idea when this issue will be investigated?
Or workaround ideas?

The only thing that comes to my mind right now is checking the url for a hardcoded one and using that as a trigger.
=> Not very elegant I admit.
Other ideas?

[gelinger777]

Any update on this??? I have the same issue. When I am coming back to a page with

mainThis.navCtrl.navigateForward('/tabs/tab2?rand='+random);

ionViewDidEnter does not fire .

[gelinger777]

@brandyscarney thank you. There are 10-20 tickets related to this problem already. And since last year.
Hope you can fix it soon.

[liamdebeasi]

Hi everyone,

I am working on a fix for this issue and have released a nightly build of Ionic (npm i @ionic/[email protected]). It would be great if some people could test it out with their use cases and provide some feedback.

We appreciate your patience as we work to resolve this issue. Thanks!

[Eraldo]

Thank you @liamdebeasi. I will test it later today and post my feedback.

[Eraldo]

I get some weird looking warnings when installing npm i @ionic/[email protected].

npm WARN tar ENAMETOOLONG: name too long, open '/myprojectpath/node_modules/.staging/@ionic/core-81eb3791/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/loader/package.json'

With this version the [defaultHref] produces unexpected links.
E.g. If I am on this url: home/d/RGVja05vZGU6MQ%3D%3D then navigate forward to another url and then click on the ion-back-button I land on home/d/RGVja05vZGU6MQ%253D%253D.

My personal guess is that it does have to do with the error/warning above.

On the positive side:
The tabbed page refresh issue seems to be gone. ;)

If I go back to 4.4.0 that ion-back-button-bug is not there anymore.

So I guess taking care of the regression bug is the next challenge.
Keep up the great work @liamdebeasi.

If you manage to create another fix dev build I will gladly test it.

[liamdebeasi]

Hmm sounds like a weird dev build. I'll try to push another one out. Thanks! Glad the main issue is resolved at least!

[liamdebeasi]

Ok published another nightly 4.4.1-dev.201905211859.8c01dbd.

I double checked the old one, and I was able to get those same warnings, but am no longer getting it with this new build.

[Eraldo]

The compile warnings are gone now. thumbsup

However the back link issue still persisted.

%3D becomes %253D. Some text escape issue maybe?
This also messes with going back if I had query parameters:
/adventures/adventures?category=PROJECT becomes /adventures%3Fcategory%3DPROJECT

[liamdebeasi]

Can you post a code example of the back button link issue?

[Eraldo]

It affects all of my back buttons.

Example back button code with id.

.oO( I am aware that this is not a standalone stackBlitz of the issue. I just want to provide you with some quick issue code context. )

If that does not help I can go about creating a Stackblitz example of the issue in isolation.
Maybe you can help me with that so that I can better assist in the future.
How do I get a stackblitz with your nightly build?

[liamdebeasi]

Ah ok I am seeing that now; however, I am also seeing this on the latest stable build npm i @ionic/angular@latest. Are you able to reverify using: rm -r node_modules && npm i @ionic/angular@latest
edit: I see it now. Will fix asap 🙂

We don't officially support StackBlitz for Ionic 4, but it's something we are working on! 🙂

[liamdebeasi]

Hi there,

Thanks for all the feedback so far! I have pushed a new nightly build that fixes this issue. npm i @ionic/[email protected]

[Eraldo]

Perfect you solved all of my use cases. cheer

[gelinger777]

Hi everyone,

I am working on a fix for this issue and have released a nightly build of Ionic (npm i @ionic/[email protected]). It would be great if some people could test it out with their use cases and provide some feedback.

We appreciate your patience as we work to resolve this issue. Thanks!

For me also problem is fixed after I have added your patch ... Thank you! Please roll this into main version asap.

[Eraldo]

@gelinger777 as far as I know this is already included in the newest official release.

[liamdebeasi]

Hi everyone,

This has not been included in the latest release. The PR that's up currently does not address the root issue (which is that nested router outlets cause problems with lifecycle hooks). I am going to be discussing this issue with the team soon.

Thanks!

[roxteddy]

Linked to this bug ? https://github.com/ionic-team/ionic/issues/17992

[mateenQureshi]

Hey @liamdebeasi ,

I have checked your nightly build, it works fine but @ionic/angular@latest doesn't include the fix. When ionic team is going to merge the fix into a stable release.

Looking forward!

[liamdebeasi]

Hi there,

Please see this comment: https://github.com/ionic-team/ionic/issues/16834#issuecomment-496677660. We are investigating a fix, but do not currently have an ETA.

[mateenQureshi]

Hi there,

Thank you for a quick response. Once you guys investigate the fix and have the ETA, please do share with us on this thread because we need to reveal the ETA to our clients since our app is in production.

Thanks,

[Yahaire]

Hi there,

Thanks for all the feedback so far! I have pushed a new nightly build that fixes this issue. npm i @ionic/[email protected]

Just tried your build too and it seems to be working fine for me too. Hope your team can greenlight your changes into the main project soon. =)

Thanks for the fix!

[DeanWilliamMills]

NOT WORKING!!!!!!

[C-racker]

Hi there,

Please see this comment: #16834 (comment). We are investigating a fix, but do not currently have an ETA.

Hi~
It has been a long time. Is there any progress?

[srinivasmerugu]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
I have some items/cards on my tab pages and navigate to other pages when I click on them. When I go back to the tabs pages from those views, my lifecycle events like ionViewDidEnter() do not fire. They fire when I'm changing tabs, but when I am coming from a non-tab view, they never fire.

Expected behavior:
For these lifecycle events to fire.

Steps to reproduce:
Create a tab project, navigate to another view from a tab page that isn't another tab, go back to the tab page and see that they have not fired.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.2
   @angular/cli                  : 7.1.2
   @ionic/angular-toolkit        : 1.2.1

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.14.0 (/usr/bin/node)
   npm    : 6.4.1
   OS     : Linux 4.18

Is this resolved? I still see ionviewdidenter is not triggering in tabs view.
Below is my ionic info

Ionic:

Ionic CLI : 5.4.2 (C:\Users\merugusr\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.10.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v10.9.0 (C:\Program Files\nodejs\node.exe)
npm : 6.2.0
OS : Windows 10

[DeanWilliamMills]

You need to add that event on the tabs parent controller. It fires off on that controller

[srinivasmerugu]

You need to add that event on the tabs parent controller. It fires off on that controller

nope , this isn't working though I add this life cycle either in tabs or home page.

I am navigating using this.router.navigate(['tabs/tabs/home']); from one page to the tabs home page and I need life cycle events on home to trigger so that home template gets updated.

[kklindic]

@liamdebeasi works like a charm! Thanks :)
Do you know when should we expect this to be released?

[isabellamariano]

Hi there,

Thanks for all the feedback so far! I have pushed a new nightly build that fixes this issue. npm i @ionic/[email protected]

Thanks for your solution... Works smooth for me 💃
In the current version of angular still has this problem

[WintonLi]

@liamdebeasi Thanks for the fix. It works perfectly in Ionic 4.
Sadly the problem is still there in the latest ionic/angular 5.0.1. The event firing pattern is unpredictable, making it difficult to come up with a work around. Anyone who plans to use ionic 5 should be very careful. Really hope the fix can be released soon.

[dtmarangoni]

Hello all and @liamdebeasi,

I have already updated the Ionic and Angular to the latest version but I still can see following bug:

When I leave the parent tab page to the root login page, for example user clicked in the logout button in tab button, the ionic lifecycle is only triggered in the parent tab component but not in the current tab child being displayed.
ionViewWillLeave and ionViewDidLeave dont trigger in child tab page, but I noticed that ngOnDestroy does. So as workaround, I'm unsubscribing from observables in ngOnDestroy, but I think that Ionic lifecycle events should trigger in child component as well when leaving from parent tab to another outside page.

Thank you very much.

[gr99t]

Hi all,

@liamdebeasi any updates on that topic? It is still present in 5.0.4

My current workaround looks like the following:

Create an interface with the hooks you want to be implemented in your child tabs

tab.ts

export interface Tab {
  tabsWillEnter();
  tabsDidEnter();
  tabsWillLeave();
  tabsDidLeave();
}

Listen to tab changes and lifecycle hooks in your parent tab and forward them to your child tabs

tabs.page.html

<ion-tabs #tabs>
...
</ion-tabs>

tabs.page.ts

export class TabsPage implements OnInit, OnDestroy {

  @ViewChild('tabs', { static: true }) tabs: IonTabs;
  private subs = new Subscription();
  private currentTab: Tab;
  private tabsDidEnter = false;

  constructor() { }

  ngOnInit() {
    const tabSub = this.tabs.ionTabsDidChange.subscribe(() => {
      this.currentTab = this.tabs.outlet.component as Tab;
    });
    this.subs.add(tabSub);
  }

  ionViewWillEnter() {
    if (this.tabsDidEnter) { // Do not fire on initial load - ionViewWillEnter of child tab will fire
      this.currentTab.tabsWillEnter(); 
    }
  }

  ionViewDidEnter() {
    if (this.tabsDidEnter) { // Do not fire on initial load - ionViewDidEnter of child tab will fire
      this.currentTab.tabsDidEnter(); 
    }
    this.tabsDidEnter = true;
  }

  ionViewWillLeave() {
    this.currentTab.tabsWillLeave();
  }

  ionViewDidLeave() {
    this.currentTab.tabsDidLeave();
  }

  ngOnDestroy() {
    this.subs.unsubscribe();
  }

}

Implement the Tab interface into your child tabs

tab1.page.ts

export class Tab1Page implements Tab {

  constructor() {}

  ionViewWillEnter() { }
  ionViewDidEnter() { }
  ionViewWillLeave() { }
  ionViewDidLeave() { }

  tabsWillEnter() { }
  tabsDidEnter() { }
  tabsWillLeave() { }
  tabsDidLeave() { }

}

[russcarver]

Still not working in 5.0.7.

[kimpoy010]

still doesn't work in 6.3.0.. are there any workaround for this?

[sooweechai]

I am having this problem and post help at forum but got nothing at all.
https://forum.ionicframework.com/t/tab-navigate-not-trigger-ionviewdidenter/189026

[ehorodyski-ionic]

Please find a reproduction here: https://github.com/ehorodyski-ionic/ng-nested-tab-nav

How to Reproduce:

1. On the landing page, click "Visit Home" button
2. From Tab 1, click "Visit the tab sibling root" button
3. From Tabs sibling root, click "Go to tabs" button

Note that ionViewWillLeave for Tab 1 does not fire.

The React flavor can be found here: https://github.com/ehorodyski-ionic/react-nested-tab-nav and works as expected.

[liamdebeasi]

Hi everyone,

I wanted to provide an update regarding the status of this issue. After discussing with the team, we have determined this is not a bug in Ionic Framework; however, we realize there are valid use cases in which developers may want to listen for lifecycle events on an individual tab. Due to this, we have provided a temporary workaround as well as plans for further development.

Why is this not a bug?

When pages transition in Ionic Framework, they fire lifecycle events. For example, going from /page1 to /page2 would fire ionViewWillLeave and ionViewDidLeave events on the Page1 component and ionViewWillEnter and ionViewDidEnter events on the Page2 component. The same logic applies when going from /tabs/tab1 to /tabs/tab2. In both of these scenarios, we are staying within the same parent ion-router-outlet context.

The reported issue occurs when navigating between ion-router-outlet contexts. In this case, we are seeing it when navigating from /tabs/tab1 to /page2. When this transition happens, Tab1 remains the active tab, and the entire tabs context transitions away. As a result, lifecycle events will fire on the root TabsPage component, but not on Tab1.

For many users, this is unexpected because Tab1 visually appears to transition away. However, under the hood, the entire tabs context transitions away.

What is the workaround?

Luckily, there is an easy to use workaround for developers who wish to listen for lifecycle events on individual tab pages:

_tabs.page.html_

<ion-tabs #tabs (ionTabsDidChange)="tabChange(tabs)">
  ...
</ion-tabs>

_tabs.page.ts_

import { Component } from '@angular/core';
import { IonTabs } from '@ionic/angular'

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  private activeTab?: HTMLElement;

  constructor() {}

  tabChange(tabsRef: IonTabs) {
    this.activeTab = tabsRef.outlet.activatedView.element;
  }

  ionViewWillLeave() {
    this.propagateToActiveTab('ionViewWillLeave');
  }

  ionViewDidLeave() {
    this.propagateToActiveTab('ionViewDidLeave');
  }

  ionViewWillEnter() {
    this.propagateToActiveTab('ionViewWillEnter');
  }

  ionViewDidEnter() {
    this.propagateToActiveTab('ionViewDidEnter');
  }

  private propagateToActiveTab(eventName: string) {    
    if (this.activeTab) {
      this.activeTab.dispatchEvent(new CustomEvent(eventName));
    }
  }
}

In this example we do 2 things:

1. We keep track of the active tab element via ionTabsDidChange.
2. We listen for lifecycle events on the root tabs component and propagate them to the active tab (if one exists).

In current versions of Ionic Framework, you will get a warning that activatedView is private and only accessible from within IonRouterOutlet. Once Ionic Framework v5.2.0 ships you will be able to access this without receiving the warning. For now, you can do (tabsRef.outlet as any).activatedView.element to bypass this warning.

Future Work

For future major releases of Ionic Framework, we are investigating bringing Ionic Angular routing closer to what Ionic React does. This would involve each Ionic page having a root ion-page component, not including the root tabs page. Lifecycle events would be dispatched on these components.

With this approach, the router sees a page transitioning in and a page transitioning out but does not care which router outlet each page is part of.

This would be a breaking change in Ionic Angular as the root tab page would no longer fire lifecycle events. Please note that this has not been finalized, and the implementation details may change. We are actively discussing the best way to do this while weighing the pros and cons of the implementation.

Please let me know if there are any questions. For any additional bugs, please open a new issue. Thank you!

[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.