CODEWITHSUNDEEP
angularangular-routingangular2-nativescript
Francis Batista
Francis Batista

Reputation: 1520

Error: Cannot match any routes. URL Segment: 'table/3'

I'm trying to understand what I did wrong about the route with params.

I have been follow the official guide about it (see on references below)

The problem is that I followed all docs' instructions: defining the routing file, create my custom router-outlet, add the navivate to the button or tap method.

But still shows this error in console:

JS: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'table/3'
JS: Error: Cannot match any routes. URL Segment: 'table/3'
JS:     at ApplyRedirects.noMatchError (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/@angular/router/bundles/router.umd.js:1787:16) [angular]
JS:     at CatchSubscriber.selector (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/@angular/router/bundles/router.umd.js:1752:29) [angular]
JS:     at CatchSubscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/operators/catchError.js:104:31) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MapSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at MapSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at LastSubscriber.Subscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:132:26) [angular]
JS:     at LastSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
JS:     at MergeMapSubscriber.OuterSubscriber.notifyError (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/OuterSubscriber.js:22:26) [angular]
JS:     at InnerSubscriber._error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/InnerSubscriber.js:26:21) [angular]
JS:     at InnerSubscriber.Subscriber.error (file:///data/data/org.nativescript.tabletv2ns/files/app/tns_modules/rxjs/Subscriber.js:106:18) [angular]
15:45:07 - File change detected. Starting incremental compilation...

app.component.html

<page-router-outlet></page-router-outlet>

app.routing.ts

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

import {TablesListComponent} from './pages/tables-list/tables-list.component';
import {TableItemDetailsComponent} from './pages/table-item/item-details/item-details.component';


const routes: Routes = [
  { path: '', redirectTo: '/tables', pathMatch: 'full' },
  { path: 'tables', component: TablesListComponent },
  { path: 'table/:id', component: TableItemDetailsComponent, outlet: 'table-outlet' }
];

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

tables-list.component.ts

<StackLayout>
    <ListView [items]="tab.tables">
        <ng-template let-item="item">

          <StackLayout (tap)="onItemTap(item)">
            <Label [text]="item.number"></Label>
          </StackLayout>

        </ng-template>
    </ListView>

    <StackLayout>
        <router-outlet name="table-outlet"></router-outlet>
    </StackLayout>
</StackLayout>

tables-list.component.ts

import {Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';


@Component({
  moduleId: module.id,
  selector: 'tables-list',
  templateUrl: './tables-list.component.html'
})

export class TablesListComponent implements OnInit {

constructor(private router: Router) {}

  onItemTap(item) {

    console.dir('=== Item tapped to go to next page: ', item);

    this.router.navigate(['/table', item.id], {preserveFragment: false});
  }

  ...
}

Please, I need a help to understand it better.

References

https://docs.nativescript.org/angular/code-samples/routing

https://docs.nativescript.org/angular/core-concepts/angular-navigation

Upvotes: 1

Views: 1013

Answers (2)

Yogesh Borkhade
Yogesh Borkhade

Reputation: 614

If url is something like this :

http://localhost:4200/feature_1/(dsoutlet1:home)

then try following code to navigate by this :

this.router.navigate([ '/feature_1', {outlets: { dsoutlet1: 'home' }}]);

Upvotes: 1

Sanoj_V
Sanoj_V

Reputation: 2986

You can try this for param routing:

this.router.navigate(['/table', {id: item.id}]);

Hope this will help you!!

Upvotes: 1

Related Questions