ionic-team / ionic-team/ionic-framework

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

Open
#17,992 21 comments 13 reactions 0 assignees View on GitHub
package: angular type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# 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.
![image](https://user-images.githubusercontent.com/3778892/55705387-f2a4a900-59de-11e9-8491-a2fa2d26c557.png)
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
![image](https://user-images.githubusercontent.com/3778892/55705643-84141b00-59df-11e9-8469-919751d19df3.png)
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
![image](https://user-images.githubusercontent.com/3778892/55705880-1ae0d780-59e0-11e9-936a-a65c229b81ad.png)
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
![image](https://user-images.githubusercontent.com/3778892/55706203-e588b980-59e0-11e9-9f6e-f8011061a1b1.png)
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
```

Contributor guide

Open the contributing guide

Research direction

Start by running and inspecting the linked ionic4-nested-router reproduction, focusing on nested ion-router-outlet navigation and the ionView* lifecycle logs. Compare initial navigation, dashboard parameter changes, logout, and re-login with the expected lifecycle order and caching behavior described in the issue; done means all four flows behave consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.