angular2 router with parameters error

Question

this might be a duplicate, but I could not find the answer.

When I try to navigate to router with params, I get the following error: Error: Cannot match any routes. URL Segment: 'order/24'.

My router config is:

const routes: Routes = [
  {
    path: 'pm', component: PmComponent, canActivateChild: [AuthGuard],
    children: [
      {path: 'orderlist', component: OrderlistComponent},
      {path: 'new-order', component: NewOrderComponent},
      {path: 'order/:id', component: OrderComponent},
      {path: '**', component: PmDefaultComponent}
    ]
  }
];

in the new-order component I try to navigate to order/:id:

this.router.navigate(['order/', this.orderId]);

I have already tried

this.router.navigate(['/order/', this.orderId]);

Thanks for help.

Have you tried restarting the CLI?

Robin Dijkhof
– Robin Dijkhof

2017-06-14 14:16:40 +00:00
Commented Jun 14, 2017 at 14:16 — Robin Dijkhof
– Robin Dijkhof, Commented Jun 14, 2017 at 14:16
yes, I have tried this

Lyuba
– Lyuba

2017-06-14 14:17:06 +00:00
Commented Jun 14, 2017 at 14:17 — Lyuba
– Lyuba, Commented Jun 14, 2017 at 14:17

lomboboo · Accepted Answer · 2017-06-14 14:25:21Z

2

The problem is you defined path: 'pm', component: .., so all children of this route must start with pm. Try to navigate to route like this:

this.router.navigate(['/pm/order', this.orderId]);

answered Jun 14, 2017 at 14:25

lomboboo

1,2332 gold badges12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jota.Toledo · Accepted Answer · 2017-06-14 14:24:24Z

1

Try with

this.router.navigate(['./order', this.orderId],{
 relativeTo: this.route
});

Where this.route is an injected ActivatedRoute instance. Or you could go with the absolut path option with this.router.navigate(['/pm/order', this.orderId]).

../ means that you go one level up in the route tree
./ means sybling
/ means absolut path, this.router.navigate(['/order', this.orderId]); would be root/order/:id for example

edited Jun 14, 2017 at 14:24

answered Jun 14, 2017 at 14:20

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

1 Comment

Lyuba Over a year ago

I have tried ../ and ./, without success: Error: Cannot match any routes. URL Segment: 'order/26'

Collectives™ on Stack Overflow

angular2 router with parameters error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related