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

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 , 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?

Created a PR that resolves this issue: https://github.com/ionic-team/ionic/pull/17888

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 😃

I assume a fix for this didn’t get into the 4.0.0 release today?

I can confirm on 4.0.0. Navigation is broken after using back button when routerLink uses relative paths.

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?

<a routerLink="/print" [queryParams]="{bill: caseid}" target="_blank" class="print cursor-pointer">Print</a>

the above code isn’t working, I have @ionic/angular - ^4.0.0-rc.2 version installed, earlier this was working fine, but after updating it’s broken. Any workaround?

sorry what? 😂 this issue was marked as unresolvable here https://github.com/ionic-team/ionic/issues/15449#issuecomment-449122235 Really happy to see this anyway, thanks for the good work

@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: https://github.com/daem0ndev/ionic-conference-app/commit/becf4b053d5aa54dd5366250ecbf1a0ba3978084

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

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.

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.

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

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.

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

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

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

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>

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.

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.

I assume a fix for this didn’t get into the 4.0.0 release today?

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