Nativescript-angular: Unable to navigate using `RouterExtensions` and named Page Router Outlets

Created on 3 Sep 2018 · 6Comments · Source: NativeScript/nativescript-angular

The navigation works when I use [nsRouterLink]="['detail']" but it breaks when using this.routerExtensions.navigate(["detail"]);

**Error message:**
`[BfcV-SmFp]: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'detail'
[BfcV-SmFp]: at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.preview/files/app/tns_modules/rxjs/internal/Subscriber.js:90:26) [angular]
[BfcV-SmFp]: at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.preview/files/app/tns_modules/rxjs/internal/Subscriber.js:70:18) [angular]
[BfcV-SmFp]: at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.preview/files/app/tns_modules/rxjs/internal...
[BfcV-SmFp]: at CatchSubscriber.error (file:///data/data/org.nativescript.preview/files/app/tns_modules/rxjs/internal/operators/catchError.js:44:31) [angular]
[BfcV-SmFp]: Error: Cannot match any routes. URL Segment: 'detail'
[BfcV-SmFp]: at CatchSubscriber.selector (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/router/bundles/router.umd.js:1436:33) [angular]
[BfcV-SmFp]: at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.preview/files/app/tns_modules/@angular/router/bundles/router.umd.js:1455:20) [angular]`

Sample:
https://play.nativescript.org/?template=play-ng&id=7ozclI&v=9

router

Source

Jai-Krish

Most helpful comment

@Jai-Krish you need to use ActivatedRoute to get the associated route to navigate in.

home.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent {

    constructor(private routerExtensions: RouterExtensions, private activeRoute: ActivatedRoute) {
    }

    goToDetail() {
        this.routerExtensions.navigate(["detail"], { relativeTo: this.activeRoute });
    }
}

Here is the working Playground demo

NickIliev on 4 Sep 2018

👍3 🎉1

All 6 comments

@Jai-Krish you need to use ActivatedRoute to get the associated route to navigate in.

home.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent {

    constructor(private routerExtensions: RouterExtensions, private activeRoute: ActivatedRoute) {
    }

    goToDetail() {
        this.routerExtensions.navigate(["detail"], { relativeTo: this.activeRoute });
    }
}

Here is the working Playground demo

NickIliev on 4 Sep 2018

👍3 🎉1

@NickIliev thank you for the solution, I wasn't able to find this anywhere in the documentation.

Jai-Krish on 4 Sep 2018

This doesn't work for sibling routes.. I have a page which should navigate to a sibling page but I can't do that because it just says that the route doesn't exist, which it does because the TabView can navigate to it.

chrillewoodz on 4 Jan 2019

try ../sibling route

riteshdalal on 15 Feb 2019

How would write unit test for that function goToDetail() using mocha?
I am getting an error that TypeError: Cannot read property 'navigate' of undefined