Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0.0-beta.17] routerLink not working after first successful forward/back navigation #16534

Closed
h4rm opened this issue Nov 30, 2018 · 49 comments

Comments

@h4rm
Copy link

commented Nov 30, 2018

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (/Users/ben/.nvm/versions/node/v10.13.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.11.0
   @angular-devkit/schematics    : 7.1.0
   @angular/cli                  : 7.1.0
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   ios-deploy : 1.9.2
   ios-sim    : 5.0.6
   NodeJS     : v10.13.0 (/Users/ben/.nvm/versions/node/v10.13.0/bin/node)
   npm        : 6.4.1
   OS         : macOS
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug
After navigating to another route with routerLink (e.g. relative navigation in tabs via ['../', 'session', session.id]) and after going back via ionic back button, which works as intended, the original routerLink is not working anymore.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Clone ionic-conference-app
  2. (Change @ionic/angular to beta17)
  3. in schedule.html of the schedule, switch href with [routerLink]="['../', 'session', session.id]"
  4. Navigate to session detail and back, try again

Expected Behavior
Navigation should still work.
Maybe this has to do with your recent changes @manucorporat.

@ionitron-bot ionitron-bot bot added the triage label Nov 30, 2018

@eduboxgithub

This comment has been minimized.

Copy link

commented Nov 30, 2018

I also found this bug.

It also happens when you navigate to a details page with NavController ou event the Angular Router (router.navigate()).

For example:
this.NavController.navigateForward(['../details', item.id], true, { relativeTo: this.ActivatedRoute })

When you press the back button on details page it goes back, but you cannot navigate anymore to the details page.

I started a new sidemenu project, added a details page and linked a click event to a button on a item from the list. This navigation one happens once.

You can download the source to test it: https://bit.ly/2FQKiWc

@manucorporat manucorporat added this to Backlog 🤖 in Ionic Core via automation Nov 30, 2018

@ionitron-bot ionitron-bot bot removed the triage label Nov 30, 2018

@manucorporat manucorporat moved this from Backlog 🤖 to In progress 🤺 in Ionic Core Nov 30, 2018

@manucorporat manucorporat self-assigned this Nov 30, 2018

@manucorporat

This comment has been minimized.

Copy link
Member

commented Nov 30, 2018

Does it work in beta.16?

@h4rm

This comment has been minimized.

Copy link
Author

commented Nov 30, 2018

@eduboxgithub

This comment has been minimized.

Copy link

commented Dec 1, 2018

I thought it was working in the previous versions, because I was using the Angular Router directly.

But when I upgraded to beta17 I had to change to NavController to force some programmatic routerDirection and setRoot (Angular Router has only making push) and I noticed the bug. I rollback to the Beta16 and I noticed the bug was still there when using the NavController.

@codeinpink

This comment has been minimized.

Copy link

commented Dec 3, 2018

For other people facing this issue, navigateByUrl still works -- at least in beta.15.

@eduboxgithub

This comment has been minimized.

Copy link

commented Dec 4, 2018

I'm getting a little confuse with this bug, and I'm sorry to put this question here, but on a Ionic 4 app Am I suppose to use the Angular Router or the NavController?

If I use the Router I will not get transitions and "setRoot"/"push" concepts?
So, should I use NavController instead?
The NavController will be kept in the final release? (I read somewhere it will probably not).

@eduboxgithub

This comment has been minimized.

Copy link

commented Dec 5, 2018

I made a few more tests.

This call recreates the reported problem:
this.NavController.navigateForward(['../details', user.IdUser], { relativeTo: this.ActivatedRoute })

This one not. It works in beta16 and beta17.
this.NavController.navigateForward(['users/details', user.IdUser], true);

@manucorporat

This comment has been minimized.

Copy link
Member

commented Dec 5, 2018

relative paths seems to break, i have already spent 3 days trying to debug this without success. I would recommend to avoid using relative paths

@manucorporat manucorporat moved this from In progress 🤺 to Backlog 🤖 in Ionic Core Dec 6, 2018

@h4rm

This comment has been minimized.

Copy link
Author

commented Dec 6, 2018

Hey Manu, thanks for your time and effort. Sorry to hear that it is such a hassle.

We use relative routes for opening the same (detail) page in different tabs and maintaining the navigation history in each tab. Modifying the links in each tab on-the-fly involves reimplementing what angulars router basically solves for you, I'd rather not do that ;)
I'll try to also look into the issue further, maybe I can dig up the culprit.
Cheers everyone.

@eduboxgithub

This comment has been minimized.

Copy link

commented Dec 6, 2018

Also noticed another problem.

When on a details page and a if the previous page had query params, the query params are "lost".

Example:
http://localhost:8100/user/list?idmenu:1 (details button pressed)
http://localhost:8100/user/details/1 (back button (back button visible with navigationFoward) pressed)
http://localhost:8100/user/list

I would expect to get the previous URL http://localhost:8100/user/list?idmenu:1 and not http://localhost:8100/user/list.

@manucorporat

This comment has been minimized.

Copy link
Member

commented Dec 6, 2018

@eduboxgithub that's a completely different issue

@JRod-T2R

This comment has been minimized.

Copy link

commented Dec 9, 2018

I am experiencing this same issue using the Angular Router.
// 1
var rret = this.router.navigate(['as_sched_edit', params ], { relativeTo: this.route})
.then(()=>console.log("success")).catch((err) => console.log(err));

This works the first time. And I am able to navigate to 'as_sched_edit'

Then from the child page I do.
//2
this.router.navigate(['as_sched_list',this.selectedDate.toISOString()],{ relativeTo: this.route.parent.parent});

This takes me back to parent page as expected. However, if from parent page I invoke #1 again in order to navigate a second time to my child page, nothing happens. No exceptions or errors are thrown. I will not be able to navigate to my child page anymore unless I do a window.refresh().

@Nick-lab

This comment has been minimized.

Copy link

commented Dec 12, 2018

Also happening in side menu click on one after fresh reload and it works click on another in the side menu and they all stop working. no console errors and no logging when routing module has enableTracing: true.

A fix i found is to just use absolute urls as my web app will still work correctly but i can see where relative will be necessary

@manucorporat

This comment has been minimized.

Copy link
Member

commented Dec 14, 2018

I will leave this issue open, and we will try to fix, but it's far from trivial and using absolute paths is a good workaround!

We are aware of this issue :)

@h4rm

This comment has been minimized.

Copy link
Author

commented Dec 14, 2018

Maybe I add another observation. Before the changes in beta-18, we also had the idea of using the Angular router to generate the href link dynamically via urlTree and serializeUrl, as is now implemented via c8d9685.

The problem we have seen is that the Angular urlTree, and in particular the ActivatedRoute within that urlTree, is not correctly updated in between navigations. Therefore the absolute link is compiled with a wrong relative route. Maybe the problem lies deep within the Angular Router itself.

@h4rm

This comment has been minimized.

Copy link
Author

commented Dec 19, 2018

Hey @manucorporat,

is the workaround mentioned by @daem0ndev in the other issue #16736 (comment) a possible workaround for this problem?

Since the only difference between absolute and relative routes is the current ActivatedRoute - the correct caching and retrieval of said ActivatedRoute objects should make the second click (after forward/backward navigation) work again.

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Dec 20, 2018

The only drawback to my solution is that consumers must use a service to get an observable stream of activated routes and the fact that since I have to wait for the activate event to be emitted by the outlet, its not as immediate as the initial activated route when doing backward navigation to a page. @h4rm do you have a github repo by chance with the issue, I could make a branch there that has my work around service.

@h4rm

This comment has been minimized.

Copy link
Author

commented Dec 20, 2018

@daem0ndev , it would be really nice to see a workaround solution for this problem. I have created a clone of the conference app - https://github.com/h4rm/ionic-conference-app - where the links in the speaker-list are changed to relative routes - producing the error described above also in beta19.
Maybe you can easily incooperate your service as a demonstration.

@biesbjerg

This comment has been minimized.

Copy link

commented Dec 20, 2018

I'm currently hitting this bug as well.

In my quest to construct an absolute url I could pass to the router, hoping to work around the bug, I made some discoveries that might be helpful.

	public gotoProduct(product: Product): Promise<boolean> {
		const url: UrlTree = this.router.createUrlTree(['..', product.id], {
			relativeTo: this.route
		});
		console.log(url.toString());
		return this.router.navigateByUrl(url);
	}

Current url: /shop/products/38

Console output for first navigation, when clicking product with id 6, is:

/shop/products/6

When I go back and click a product (even the same as before) I now get this:

/shop/products/38

... which is the current/inital url.

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Dec 20, 2018

@biesbjerg @h4rm I should clarify that my activated route service only really helps when using ActivatedRoute in the component code, it will not really do much for the [routerLink] directive in your views. I also wanted to mention that we have avoided this issue entirely by using our own custom ngrx actions for navigating to a given page and those actions have effects that always construct a correct path as well as provide Forward navigation intent so that we dont accidentally get backward transitions when matching a page that already exists in the nav stack.

All that being said, im happy to share my work around, but it really is more useful for the issue described in #16736 and less useful for the issue described on this thread related to the routerLink directive and relative links

@naolembro

This comment has been minimized.

Copy link

commented Feb 21, 2019

still not working.. Any fixes?

@briosheje

This comment has been minimized.

Copy link

commented Feb 26, 2019

Still experiencing the issue in @ionic/angular 4.0.2

The only feasible solution, right now, seems to be using Absolute routing only instead, as mentioned here: #15959 (comment)

Using absolute routing or navigating back to the root will solve the issue. Hopefully they will find a fix soon, although 4.0.2 didn't solve the issue yet.

@arimus

This comment has been minimized.

Copy link

commented Feb 27, 2019

Absolute routing doesn't work for every case either. Using multiple routers and longer paths continue to have issues. Routing just completely dies on some routing attempts. We've also confirmed that 4.0.2 does not solve the issue.

Interesting enough, 4.0.0-beta.17 actually worked better in some ways, although we were still running into sporadic cases of routing dying on us. We are actually using ion-tabs and routerLinks (which btw has no good docs showing the changes for 4.0.0), but have also trying to use navigateByUrl() and the problem still exists.

I know that everyone's problem always seems particularly important, so this will sound self-serving, but this issue really seems like a large flaw that has to be impacting a lot of folks trying to upgrade...? Seems like it should be getting more attention for a non-beta, non-RC release version. I'd gladly help with code and testing if someone familiar with ionic / angular routing internals could assist.

Unfortunately for us, we may have to roll our entire project back to Ionic v3 unless there is some reasonable resolution found sooner than later :(

@cbetz

This comment has been minimized.

Copy link

commented Feb 27, 2019

Unfortunately, I'm in the same boat as @arimus in that I'll have to abandon the v4 upgrade until this is fixed. I have a tab based app that has pages that are utilized across tabs that should not have to be router / context aware for absolute routes. Relative links are necessary in my use case which is supported by the vanilla Angular router.

@briosheje

This comment has been minimized.

Copy link

commented Feb 27, 2019

Absolute routing doesn't work for every case either. Using multiple routers and longer paths continue to have issues. Routing just completely dies on some routing attempts. We've also confirmed that 4.0.2 does not solve the issue.

Interesting enough, 4.0.0-beta.17 actually worked better in some ways, although we were still running into sporadic cases of routing dying on us. We are actually using ion-tabs and routerLinks (which btw has no good docs showing the changes for 4.0.0), but have also trying to use navigateByUrl() and the problem still exists.

I know that everyone's problem always seems particularly important, so this will sound self-serving, but this issue really seems like a large flaw that has to be impacting a lot of folks trying to upgrade...? Seems like it should be getting more attention for a non-beta, non-RC release version. I'd gladly help with code and testing if someone familiar with ionic / angular routing internals could assist.

Unfortunately for us, we may have to roll our entire project back to Ionic v3 unless there is some reasonable resolution found sooner than later :(

I'm using multiple routers and complex paths but I'm not experiencing the issue using absolute routing.

Basically, I have 8 nested routers, in some cases I'm routing using [routerLink] in a custom list component, while in other cases I'm routing directly using router.navigateByUrl and router.navigate.
In any case, I think you're absolutely right that such issue is kind of a large flaw and impacts the basics of the framework. However, from what I've seen in the past, Ionic always took care about these tasks pretty quickly, I'm quite surprised they didn't solve it yet in a "stable" release.

@jaufgang

This comment has been minimized.

Copy link

commented Mar 14, 2019

@manucorporat , This is a pretty serious bug, and the workaround is inadequate as @arimus and @cbetz pointed out. And yet it has been languishing in "backlog" for over 3 months now. I am surprised that v4 was released out of beta with a known bug like this still in place.

I hate to sound bitchy about this, but switching from NavController to the Angular Router is a major selling point for v4, but also a lot of work for developers upgrading from v3. It's a bit of a shock to discover after putting in many hours porting an app to v4 that there is a major bug like this in something as fundamental as routing.

I understand that there is always going to be a backlog of issues and everything can't always be fixed at once, but this particular bug seems much more important than most of the other issues that are tagged as "in progress". Can this issue get bumped up in priority so we can get a proper fix soon?

@arimus

This comment has been minimized.

Copy link

commented Mar 14, 2019

@briosheje

This comment has been minimized.

Copy link

commented Mar 15, 2019

I think @jaufgang got the point here: a major release such as V4 shouldn't have come out with such a bug or, at least, it should've been clearly mentioned somewhere.

Luckily, I had to work on a brand new ionic 4 app, so it was just matter of designing everything to actually work around the routing issue, but I can't really foresee any advantage of migrating to V4 if you have a working V3.X app, it's just out of question to migrate the whole routing mechanism (also, modals changed a lot as well).

Again, I'm quite surprised that this issue isn't addressed yet, it's a major bug, hopefully they will bump this issue up in priority, otherwise I can't really foresee how people can migrate from V3 to V4.

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Mar 15, 2019

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

@h4rm @biesbjerg Here's a branch with my work around solution that provides relative links by using an observable stream for ActivatedRoute.

https://github.com/daem0ndev/ionic-conference-app/tree/demo/relative-routes

and the specific commit demonstrates relative routing on the schedule list page: daem0ndev/ionic-conference-app@becf4b0

This method works consistently going back and forward from list to detail

@rcnicke

This comment has been minimized.

Copy link

commented Mar 24, 2019

Same problem here.
However, changing routes to absolute is really easy if injecting the Router into the component, and using router. url for the routerLink value in the html like this;
.html:

<a [routerLink]="router.url + '/sub'" routerLinkActive="active">Sub</a>

.ts:

export class MyPage {
  constructor(private router: Router) {
  }
}

Should even be able to create a custom directive that does the job for you;

<a myRouterLink="sub" routerLinkActive="active">Sub</a>

Is this too easy, or am I missing something?

@nahue086

This comment has been minimized.

Copy link

commented Mar 25, 2019

Same bug here. When redirecting using relative routes and going back using ionic back button, the original routerLink does not work.

Navigation

this.Router.navigate(['../../item-list'], {relativeTo: this.ActivatedRoute});

Back button

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="welcome">
      </ion-back-button>
    </ion-buttons>
    <ion-title>New items</ion-title>
  </ion-toolbar>
</ion-header>
@nvisbal

This comment has been minimized.

Copy link

commented Mar 25, 2019

This is the way how I solved this problem.

  1. First, in my html page I not use RouterLink, I use (click).
    <ion-item class="pointer" (click)="goChangePassword()"> <ion-icon slot="start" name="finger-print"></ion-icon> <ion-label>Cambiar contraseña </ion-label> </ion-item>

  2. In my Logic page I created a function named "goChangePassword()"

goChangePassword() { this.router.navigate(['/profile/change-password'],); }

  1. Issue resolved with back button and forward.

I hope it work for you

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Mar 26, 2019

Created a PR that resolves this issue: #17888

Ionic Core automation moved this from On deck ⚾️ to Done 🎉 Mar 29, 2019

@mhartington

This comment has been minimized.

Copy link
Member

commented Mar 29, 2019

Hey everyone. We just merged in #17888 which fixes this. Thanks for all your patience here 😄

@giacomocerquone

This comment has been minimized.

Copy link

commented Apr 7, 2019

sorry what? 😂 this issue was marked as unresolvable here
#15449 (comment)
Really happy to see this anyway, thanks for the good work

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Apr 11, 2019

@mhartington just noticed the docs still say this is unsupported, I can put up a PR to update that now 🎉

@johanvdb

This comment has been minimized.

Copy link

commented May 3, 2019

I really don't want to unnecessarily open a can of worms here again, and I truly hope that I am just doing something wrong, but I am seeing what is described here in a newly generated application, using 4.12.0, and using absolute links does not even resolve it. I have a repo here with examples and videos: https://github.com/johanvdb/ionic-4-router-issue

@johanvdb

This comment has been minimized.

Copy link

commented May 3, 2019

After many different tests, I have a workaround if I remove ion-router-outlet entirely: https://github.com/johanvdb/ionic-4-router-issue/pull/1/files

See https://stackblitz.com/edit/ionic-v4-nested-routes-2wrmqs for a short demo.

@giacomocerquone

This comment has been minimized.

Copy link

commented May 6, 2019

@johanvdb in that stackblitz i see "@ionic/angular": "4.0.0-beta.7" and in your repo I see "@ionic/angular": "^4.1.0"

But according to the releases page: https://github.com/ionic-team/ionic/releases it has been fixed only in 4.2.0

I actually use this new version in production and the solution has landed. So please, check your code better.

@johanvdb

This comment has been minimized.

Copy link

commented May 8, 2019

Thank you @giacomocerquone, however I can confirm that my github test already runs against 4.3.1 (see package-lock.json). I realise that the package.json references ^4.1.0 but the actual install at that time found the latest 4.3.1. There is an npm-list.txt that also shows the correct version. Just to be 1000% sure, I did a specific dependency, and upgraded the rest of the dependencies as well, on another branch but this branch also exhibits the same problem. Routing works for the first round of all routes, but then the first route accessed stops working.

Also keep in mind that the test on stackblitz does not make use of ionic's router. It was specifically to demonstrate that there is a solution that works but without ionic-router-outlet. However...

This stackblitz shows the problem but on the 4.0.0-beta.7 version.
I also forked that stackblitz and upgraded the ionic, but then I run into a known issue where later versions of ionic does not seem to run on stackblitz. Issue here, stackblitz here. Therefore the only way to currently "show" this issue is via the above github branch.

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

@wangzhengjiang

This comment has been minimized.

Copy link

commented May 17, 2019

Thank you @giacomocerquone, however I can confirm that my github test already runs against 4.3.1 (see package-lock.json). I realise that the package.json references ^4.1.0 but the actual install at that time found the latest 4.3.1. There is an npm-list.txt that also shows the correct version. Just to be 1000% sure, I did a specific dependency, and upgraded the rest of the dependencies as well, on another branch but this branch also exhibits the same problem. Routing works for the first round of all routes, but then the first route accessed stops working.

Also keep in mind that the test on stackblitz does not make use of ionic's router. It was specifically to demonstrate that there is a solution that works but without ionic-router-outlet. However...

This stackblitz shows the problem but on the 4.0.0-beta.7 version.
I also forked that stackblitz and upgraded the ionic, but then I run into a known issue where later versions of ionic does not seem to run on stackblitz. Issue here, stackblitz here. Therefore the only way to currently "show" this issue is via the above github branch.

same problem

@giacomocerquone

This comment has been minimized.

Copy link

commented May 18, 2019

well then the only thing I can say is that that probably the problem is not the same, because in my app I removed all the previous absolute links I inserted to bypass the old problem and it's working awesomely. Sadly I can't share code.

@ionitron-bot

This comment has been minimized.

Copy link

commented Jun 17, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 17, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.