Nativescript + Angular - Relative routing navigation issue


#1

Hi all,

I’m trying to model my app routing logic using parent-child routes but I’m having a hard time getting it to work on Android (iOS is working fine).

I’ve created a sample app based on Nativescript Angular Template to demonstrate the issue, it’s available here. If you run it on iOS you will see the list of players and be able to navigate to each player’s details. On Android, when you navigate to a player, come back and try to navigate to a different player, the app will still show the former. This will happen no matter which player you pick.

I tried using PageRoute instead of ActivatedRoute to see if this could be just an issue reading the route params. I also ruled out it being an issue rendering the player links themselves, by replacing the stock ListView with the one from Progress Nativescript UI).

Am I missing something here?

Thanks for your help.

Best,
Fábio


#2

How are you getting data to your child page? are you using a parameter with a player id to pick from a list?


#3

Yes, the ‘id’ parameter is being read from the activated route params on ngOnInit() of ItemDetailComponent, and used to query the players service.

I just updated the repository to use the latest versions of plugins ‘nativescript-angular’ & ‘tns-core-modules’, to no avail.

I also enabled Angular route tracing, which shows that, on Android, the resolved route always has the same player id. This does not happen on iOS.

Were you able to replicate the issue?

Thanks.


#4

I do a similar thing in my app with no issues.

Try logging out the ‘id’ when you click on the list item, make sure that the id is different for each item.


#5

Thanks for the feedback, @mast3rd3mon. I enabled Angular route tracing and what I’m seeing is that the id is always the same, even tough the route links clearly have different ids in items.component.html.

The only way I found to make this work is to use absolute routes instead of relative ones. Could it be that there’s some weird caching issue on Android that causes this behaviour?!


#6

When you click on the list item, log out the entire data item { id: 1, name: "Ter Stegen", role: "Goalkeeper" } in the click function. This should give you the correct data item for the list item you click on