ionic-framework: bug: ion livecycles are not called as expected on nested ion-router-outlet, also caching algorithm has strange behavior

Bug Report

Ionic version: [x] 4.2

Current behavior: If you have nested ion-router-outlet ionView* live cycles are not called as expected for nested pages, there are several issues on it. We tried to figure out all of them, and we created a plain github repository for you to simulate all them. What to know is we have a main router which keeps login and main page, and the main pages keeps the dashboard page with :id parameter s like this

       login
---> 
       main    ----> dashboard/:id

1) if you enter first time using login button to /main/dashboard/1 page Nested DashboardPage live cycles are called before the MainPage live cycles for entering. We think the right behavior should be LoginPage#willLeave -> MainPage#willEnter -> DashboardPage#willEnter -> DashboardPage#didEnter -> MainPage#didEnter -> LoginPage#didLeave

2) now if you switch to dashboard/2 we have this log which is the right one, But what we can see from html, there is a strange behavior how does the ReuseStratgey work. the first /dashboard/1 page is always cached, other pages not. Why not? There is a difference on caching pages with and without parameters. But the livecycles are called in the right order.

3) if you know clicks on logout you are redirect to login page and have this log As you can see DashboardPage livecycles are never called! Only that for MainPage and LoginPage. But DashboardPage#ionWillLeave and DashboardPage#ionDidLeave should be called in the right order

4) now on login page click again Login and you are redirected again to /main/dashboard/1 And as you can see from log, NOW when the dashboard page is already cached the livecycles are called as expected, not as on use case 1) where page was not cached.

Steps to reproduce: We have created a project to simulate the issues https://github.com/mburger81/ionic4-nested-router

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.12.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

System:
   NodeJS : v10.15.3 (/usr/bin/node)
   npm    : 6.9.0
   OS     : Linux 4.15

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 13
Comments: 21 (3 by maintainers)

Most upvoted comments

22 months later and this is still an issue? Is Ionic still a valid platform to be building on?

msmikkimonroe on Feb 5, 2021

any update in march 2021? this behaviour break my apps because i cant unsubscribe the data when changing pages because ionviewwillleave not firing. the workaround is not working too in ionic 5

heyjuns on Mar 2, 2021

Hi there,

Thanks for the issue! I’ve reproduced the issue, and we will investigate.

Thanks for using Ionic!

liamdebeasi on Apr 8, 2019

This can potentially produce memory leaks in your application if you are using hot observables in your pages. This is still happening in 5.3.0

dalepo on Aug 7, 2020

Same here, using nested ion-router-outlet, we did find a temporary workaround using the AcitvatedRoute.url observable, it will trigger once every time the component’s route get activated and can be registered in the ngOnInit.

antoinecfmws on Apr 2, 2020

Any news on this ? Thanks

GasyTek on Jan 22, 2021

@yoann217 How to stop using the Lazy Loading, and how do I find out if I’m using it in my project? P.S. Sorry for the n00b question but I am very much new to this platform and facing similar issue.

Lazy loading is when you’re using JS dynamic import() keyword to load your components or modules.

So in Angular

routes = [
   {  path: 'sample', loadChildren: () => import('./path/to/module.ts').then(m => m.SampleModule }
]

In React

import React, { lazy } from 'react';
const LazyLoadedComponent = lazy(() => import('./Component'));

jeremyaurelius on Sep 17, 2020

@liamdebeasi is this issue going to be addressed soon? I’m noticing that the ionViewDidEnter is not firing when navigating back to a page in my tabs view.

I’m waiting for the bug fix from the ionic team too, but in the meantime you can do a quick fix by adding a “ghost” tab. The idea is that you add the ghost tab to your tabs-routing.module, but leave it out of your TabsPage component. Then whenever you navigate away from the TabsPage component, first navigate to that ghost tab so as to avoid the lifecycle callbacks from bugging on your current tab.

For example

  logOut() {
    return this.authService.logOut().pipe(
      switchMap(() => this.router.navigate(['tabs/ghost'])),
      switchMap(() => this.router.navigate(['logged-out'])),
    );
  }

My routing structure would be something like:

logged-out
tabs - tab1 - tab2 - tab3 - ghost

jeremyaurelius on Jan 28, 2020