ionic 4 + angular: routerLink only works first time

Question

I'm having a weird bug while developing a basic app from scratch right now. I use Ionic 4 beta 19 and I've put a routerLink to another page, the route is set up in the base pages module like so:

RouterModule.forChild([
  { path: '', component: NewsPage },
  { path: ':id', component: DetailPage }
])

the routerLink attribute is set on a card and it works just fine when clicking on a card, but when I go back and press that same card or another one, the router just doesn't do anything at all. I don't get any errors and the URL in the browser is working perfectly. How can this be?

Edit: Also, DetailPage doesn't have a module so it's basically just a page.

Edit: Card code looks like this:

<ion-card *ngFor="let item of items;" [routerLink]="[item.id]">
  ...
</ion-card>

In the detail page, route params are subscribed and the :id param will be used for a GET request subscription to retrieve the data

Solution 1

This is already fixed, just run npm i @ionic/angular to update to the fixing version 4.2.0 or superior.

This was also affecting router.navigate(['url', params]) functionality

Solution 2

Solved it by using navigateByUrl instead like this:

open(id: number) {
  this.router.navigateByUrl(this.router.url + '/' + id);
}

and for the card:

<ion-card *ngFor="let item of items;" (click)="open(item.id)">
    ...
</ion-card>

Still don't know why this is happening but this works as a workaround for now.

Solution 3

This is a known bug. You can find the GitHub issue here: https://github.com/ionic-team/ionic/issues/16534.

As @mario above mentions, absolute links will work with routerLink. See comment here: https://github.com/ionic-team/ionic/issues/16534#issuecomment-444610330

Solution 4

If it is possible, a workaround is to use absolute path instead of relative path as said in this github answer :

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

So you will have :

<ion-item routerLink="/home" />

instead of :

<ion-item routerLink="home" />

View more solutions

Comments

[Yoarthur]

put relevant code, will be nice.

[briznad]

I'm experiencing the same issue: route works as expected, but only once. Thanks for posting this workaround.

[Mario]

Another workaround I found, is to always use absolute URLs in routerLink directives.