[4.0.0-beta.16] Navigation breaks with latest beta build

[AVatch]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

 ionic (Ionic CLI) : 4.3.1 (/usr/local/npm_packages/lib/node_modules/ionic)
 Ionic Framework : @ionic/angular 4.0.0-beta.16
 @angular-devkit/build-angular : 0.10.6
 @angular-devkit/schematics : 7.0.6
 @angular/cli : 7.0.6
 @ionic/angular-toolkit : 1.2.0

System:

 NodeJS : v10.7.0 (/usr/local/Cellar/node/10.7.0/bin/node)
 npm : 6.4.1
 OS : macOS

Describe the Bug
Page components do not get cached for re-use like they did in beta-15. This breaks the ion-back-button and any list/detail sort of pages since the list no longer is reused and is created from scratch.

Steps to Reproduce
See repo here. This is the started sidemenu project with a detail page added. To see expected behavior downgrade to beta-15

[MarkChrisLevy]

@AVatch Can you please change the title of this issue, as the navigation is broken not only for split-pane, but in general. Simple navigation between pages is broken as well - it seems, that StackController removes previous page when moving forward to another page.

Repo to test: https://github.com/mmlleevvyy/ionic-navbug-beta16

@manucorporat The latest commits related to tabs is the cause.

[Dema1348]

I have the same issues:

The back button disappears when the router.navigateByUrl function is occupied

[manucorporat]

it's not really a bug, ng router does not have a concept a "direction" like ionic does, previously we were doing so much magic, that lead to very error prone behaviour.

We have decided to do not animate to use stack navigation when "pure" angular routing is used:

<a href="/path">
<button [routerLink]="/path">

Instead you can use:

<ion-button href="/path">

or the [routerDirection] directive:

<button [routerLink]="path" routerDirection="forward">

We will continue experimenting and adjusting the default behaviour during this week. Leaving the issue open to continue discussing.

Thoughts?

[biesbjerg]

I don't think this ticket is about animation, but about navigation in general.

If I, in a classic Master/Detail setup, click on an item in a list, I am taken to the Detail-page with no back button (Or back button uses defaultHref instead of linking to the previous page).

[Dema1348]

The main problem is how I navigate through the router inside the controller without losing the animation or the button back with router.navigate or router.navigateByUrl

[AVatch]

Yeah @manucorporat I'm good with providing the router animation, what I am saying is if you look at the DOM, you'll notice that the when you navigate to any page, the previous component gets removed. Previously that component will be preserved so when you go back you can return from where you left off and not re-instantiate the component. This was the case in beta-15 and no longer in beta-16

Does that makes sense?

As a side note to your comment, most of my use case of navigating involved calling router.navigate([...]) in the component. Can routerDirection be passed in that way? There are a lot of scenarios, (redirect to home page on login for example) which require a programmatic redirect so being able to pass these params if they are now required will be very helpful.

[TomDemulierChevret]

@AVatch If you want to use the stack, you should not use Angular Router but Ionic NavController instead.
It does provide all the methods you need (navigateForward, navigateBack, navigateRoot, etc) to specify the navigation direction and therefore keep (or not) your previous component(s) instantiated in the stack.

[AVatch]

@TomDemulierChevret ok sure but like in the documentation it says that the NavController is not bound to the route, so again the documentation advises to use this for subroutine like in dialogs/modals.

Part of the messaging w/ ionic v.4 was while being framework agnostic we could also make use of the latest angular builds, including the router module.

In any case, this issue was not about the animation, but rather the change in how navigating handles components. At the moment even the starter apps don't navigate properly because the components get destroyed rather than saved in the background when navigating away from them, so let's stick to that :)

[MarkChrisLevy]

@manucorporat Adding routerDirection works, but... not when used with a[routerLink], cause routerLink prepares "href" as external link:
https://github.com/angular/angular/blob/20729b33781786c44def273b172f426f265b629b/packages/router/src/directives/router_link.ts#L245

And in HrefDelegate you exclude external links:
https://github.com/ionic-team/ionic/blob/0cd052680159004d7965378ce096f3d4f7b86037/angular/src/directives/navigation/href-delegate.ts#L36

The solution is to call angular's RouterLinkWithHref#onClick instead of router.navigateByUrl. I can make a PR, if you agree.

Edit: I just tested ion-item with [routerLink] and... it doesn't work, that is it does navigate to given view, but not using ionic's StackController etc. It is because, when routerLink is not used with "a" tag, then href will not be set at all, so HrefDelegate will always get url as null/undefined. I will make a PR.

[TomDemulierChevret]

@AVatch What do you mean NavController is not bound to the route ?
It literraly uses urls to navigate and calls Angular Router internally.

See : https://github.com/ionic-team/ionic/blob/master/angular/src/providers/nav-controller.ts

[AVatch]

@TomDemulierChevret I was going off of the documentation https://beta.ionicframework.com/docs/api/nav

It's nav not NavController my bad.

[TomDemulierChevret]

I just tested with beta-16 and can confirm that NavController does keep the stack intact (eg components are not destroyed if navigating forward).