How to troubleshoot routing in nativescript angular?

Question

I'm just learning nativescript, angular and typescript. I'm developing for iOS using the simulator. My routing is configured like so (copy-pasted from the NativeScript inspector):

config: Array (7)
0{path: "filtered/:topic/:queryText", component: function}
1{path: "abstract/:id", component: function}
2{path: "session/:id", component: function}
3{path: "details/:id", component: function}
4{path: "home", component: function}
5{path: "", redirectTo: "home", pathMatch: "full"}
6{path: "**", redirectTo: "home"}

Routing from home to details uses this code in the home.component:

showDetails(e){
    console.log(e.index);
    this.router.navigate(["details", e.index]);
}

This works most of the time, but reliably fails when I first navigate to the filtered component, and then return using the Back button. The showDetails function fires, logging the correct value for e.index, but the the app does not route to details; The home page does not change at all (but I can still navigate to other pages from the home page).

My question is, how should I troubleshoot this? I can see the this.router object in the inspector, but it's a very complex object with what looks like hundreds of nested properties. I'm guessing I should try and figure out what this.router looks like when the showDetails function works as expected, and how it changes when showDetails no longer works. But what properties should I focus on? Or should I be looking at something else?

Many thanks for any tips or guidance.

UPDATE: the problem occurs whenever I navigate to more than two other pages, e.g., if I just navigate to filtered, it doesn't occur, but if navigate from filtered to abstract, and then use the back button twice, it always occurs. Same if first navigate to session and then abstract, and then back to home.

UPDATE 2: Answers here are very helpful for debugging routing:

How to detect a route change in Angular 2?

UPDATE 3: I figured it out. One of the parameters in my routes was sometimes empty, leading to a url with a double slash: /filtered//search-term. Angular doesn't seem to like that.

score 0 · Answer 1 · answered Jul 18 '19 at 10:07

Try this way for routing.

app-routing.module.ts :-

{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "details/:id", loadChildren: "~/app/details/details.module#DetailsModule" },
{ path: "session/:id", loadChildren: "~/app/session/session.module#SessionModule" }

For Redirect to page :-

import { NgZone } from "@angular/core";
import { isIOS } from "tns-core-modules/platform";
import { RouterExtensions } from "nativescript-angular/router";

constructor(private zone: NgZone,
private _routerExtensions: RouterExtensions){ }

gotoStartPage() {
 setTimeout(() => {
    this.zone.run(() => {
     this._routerExtensions.navigate(["details", 2], {
        clearHistory: (isIOS) ? true : false,
     });
    });
  }, 500);
}

How to troubleshoot routing in nativescript angular?

1 Answers1