Cannot match any routes. URL Segment


#1

am facing a problem navigating to a page called “main” when my routes seems to be correct

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { LoginComponent } from "./pages/login/login.component";
import { MainComponent } from "./pages/main/main.component";
import {CameraComponent} from "./pages/camera/camera.component"
import { ProfileComponent } from "./pages/profile/profile.component";
import { PostsComponent } from "./pages/posts/posts.component";
import { MessagesComponent } from "./pages/messages/messages.component";;

export const COMPONENTS = [LoginComponent, MainComponent, ProfileComponent, MessagesComponent];

const routes: Routes = [
    { path: "", redirectTo: "/(mainTab:main//cameraTab:camera//profileTab:profile)", pathMatch: "full" },
    { path: "", component: LoginComponent },
    { path: "main", component: MainComponent, outlet: "mainTab" },
    { path: "camera", component: CameraComponent, outlet: "cameraTab" },
    { path: "profile", component: ProfileComponent, outlet: "profileTab" },

    { path: "messages", component: MessagesComponent, outlet: "messagesTab" }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

when i navigate i get this error

JS: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘main’
JS: Error: Cannot match any routes. URL Segment: ‘main’

how can i solve this


#3

In the code above, you have a redirect statement when your path is empty, at same time you have declared another route with empty path to load LoginComponent. You might want to fix that.

You have the working example for page router outlet within tabview here. Please compare yourself once, if you still face issues, try to create a playground example where we can reproduce the issue.


#4

thanks @manojdcoder that fixed the problem
but again it does not show the Xl file when i navigate to it
it shows blank screen


#5

the profile Tab contains Xml file but its not showing

my profile.ts

import { Component, ChangeDetectionStrategy, OnInit, Input } from "@angular/core";
import { ObservableArray } from "data/observable-array";
import 'rxjs/add/operator/switchMap';
import { Router } from "@angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { Page } from "ui/page";
import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
import { StackLayout } from "ui/layouts/stack-layout";
import { isAndroid } from "platform";


// >> ext-listview-cards-code
@Component({
    selector: "profile",  
    moduleId: module.id,
    templateUrl: "./profile.component.html",
     styleUrls: ["./profile-common.css"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProfileComponent  {
    public countries: ObservableArray<any>;
    private _title: string;

    constructor( private router: Router,private routerExtensions: RouterExtensions, private page: Page ) {
        page.actionBarHidden = true;

        
    }
    public tabSelectedIndex: number;
    


    ngOnInit(): void {
        // Init your component properties here.
    }

    get title(): string {
        return this._title;
    }

    set title(value: string) {
        if (this._title !== value) {
            this._title = value;
        }
    }

    getIconSource(icon: string): string {
        return isAndroid ? "" : "res://tabIcons/" + icon;
    }

    onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
        const tabView = <TabView>args.object;
        const selectedTabViewItem = tabView.items[args.newIndex];

        this.title = selectedTabViewItem.title;
    }

    // << binding-tab-view-code
   

    public followTap() {
        console.log("follow button");
    }

    public onItemTapFirstList(args) {
        console.log(args.index);
    }

    public onItemTapSecondList(args) {
        console.log(args.index);
    }

editeprofile() {
       
            this.routerExtensions.navigate(["/test"],);
}

        
}

and here are the routes

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { LoginComponent } from "./pages/login/login.component";
import { MainComponent } from "./pages/main/main.component";
import {CameraComponent} from "./pages/camera/camera.component"
import { ProfileComponent } from "./pages/profile/profile.component";
import { PostsComponent } from "./pages/posts/posts.component";
import { MessagesComponent } from "./pages/messages/messages.component";;

export const COMPONENTS = [LoginComponent, MainComponent, ProfileComponent, MessagesComponent];

const routes: Routes = [
    { path: "", redirectTo: "/(cameraTab:camera//profileTab:profile)", pathMatch: "full" },
    { path: "", component: LoginComponent },
    { path: "main", component: MainComponent },
    { path: "profile", component: ProfileComponent, outlet: "profileTab" },
    { path: "camera", component: CameraComponent, outlet: "cameraTab" },
    { path: "messages", component: MessagesComponent, outlet: "messagesTab" },

];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

and the Tabs file

<TabView>

    <page-router-outlet
        *tabItem="{title: 'Main', iconSource: getIconSource('home')}"
        name="mainTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Profile', iconSource: getIconSource('profile')}"
        name="profileTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

#6

Do you have a page router outlet at root level (above TabView), that is not yet supported with Angular - it’s a open feature request.


#7

I’m facing exactly the same problem, but also, cannot make a button in /(app:login) to navigate to /(mainapp:menu), my router is like this:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { LoginComponent } from "./login/login.component";
import { MenuComponent } from "./menu/menu.component";

const routes: Routes = [
    { path: "", redirectTo: "/(app:login)", pathMatch: "full" },
    { path: "login", component: LoginComponent, outlet: "app" },
    { path: "menu", component: MenuComponent, outlet: "mainapp", children: [
            { path: "home", loadChildren: "./home/home.module#HomeModule" },
            { path: "browse", loadChildren: "./browse/browse.module#BrowseModule" },
            { path: "search", loadChildren: "./search/search.module#SearchModule" },
            { path: "featured", loadChildren: "./featured/featured.module#FeaturedModule" },
            { path: "settings", loadChildren: "./settings/settings.module#SettingsModule" }
    ]}
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

my button is trying to navigate like this:

<GridLayout class="page page-content" columns="*" rows="auto,auto,auto">
    <Label row="0" class="page-icon fa" text="&#xf015;"></Label>
    <Label row="1" class="page-placeholder" text="<!-- Page content goes here -->"></Label>
    <Button row="2" text="Lets go!!" [nsRouterLink]="['/menu', { outlets: { mainapp: ['home']}}]"></Button>
</GridLayout>

my app.component.html has

<router-outlet name="app" class="page page-content"></router-outlet>

And the mainapp outlet is defined in menu.module.html in menu module:

<RadSideDrawer #menuDrawer [drawerTransition]="sideDrawerTransition">
    <GridLayout tkDrawerContent rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="username@mail.com"></Label>
        </StackLayout>

        <ScrollView row="1">
            <StackLayout class="sidedrawer-content">
                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/home')" (tap)="onNavItemTap('/home')">
                    <Label col="0" text="&#xf015;" class="fa"></Label>
                    <Label col="1" text="Home" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/browse')" (tap)="onNavItemTap('/browse')">
                    <Label col="0" text="&#xf1ea;" class="fa"></Label>
                    <Label col="1" text="Browse" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/search')" (tap)="onNavItemTap('/search')">
                    <Label col="0" text="&#xf002;" class="fa"></Label>
                    <Label col="1" text="Search" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/featured')" (tap)="onNavItemTap('/featured')">
                    <Label col="0" text="&#xf005;" class="fa"></Label>
                    <Label col="1" text="Featured" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/settings')" (tap)="onNavItemTap('/settings')">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Settings" class="p-r-10"></Label>
                </GridLayout>

                <StackLayout class="hr-light"></StackLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/logout')" (tap)="onNavItemTap('/logout')">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Logout" class="p-r-10"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
    </GridLayout>

    <StackLayout tkMainContent>
        <page-router-outlet name="mainapp" class="page page-content"></page-router-outlet>
    </StackLayout>
</RadSideDrawer>

this is driving me crazy and is very confusing, all I get is : ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘menu’.
If you want to take a look into the code you can see:
https://bitbucket.org/hackerunet/radsidedrawer/src/development/


#8

I finally achieved the nested router outlet navigation without issues,
https://bitbucket.org/hackerunet/radsidedrawer/src/master