Error: Cannot match any routes in Angular 4

Question

I am lazy loading few modules in my Angular 4 app, with child routes to the lazy loaded module, but I am getting an error as Error: Cannot match any routes. URL Segment: 'order-management/list-view' when accessing the route.

Here's my main app routing code:

 {path: 'login', component: LoginComponent}, {path: 'order-management', loadChildren: './order-management/order-management.module#OrderManagementModule'}, {path: '', redirectTo: '/login', pathMatch: 'full'}

and here's the routing code for the lazy loaded OrderManagementModule:

 {path: '', component: OrderManagementComponent, pathMatch: 'full', children: [ {path: 'list-view', component: ListComponent}, {path: 'column-view', component: ColumnComponent}, {path: 'comfy-view', component: ComfyComponent}, {path: '', redirectTo: '/order-management/list-view', pathMatch: 'full'}, ]}

Assume the code to load each child component in the path /order-management/SOME_CHILD_COMPONENT and also redirect /order-management path to /order-management/list-view. I am not sure, what went wrong here. Please solve this issue.

Can you remove the pathMatch: 'full' from the OrderManagementComponent path. Also set the redirectTo to list-view — Poul Kruijt
– Poul Kruijt, Commented Nov 20, 2017 at 8:59
@PierreDuc that worked! But can you please explain, when the pathMatch: 'full' is causing the issue. — starlight
– starlight, Commented Nov 20, 2017 at 9:03

Poul Kruijt · Accepted Answer · 2017-11-20 09:08:09Z

You should remove the pathMatch: 'full' from the first path where you already defined a component: OrderManagementComponent.

You cannot have a pathMatch in combination with a component. Perhaps angular should have already thrown an error for that. pathMatch is used for redirects, which means that if you have a pathMatch property in your route, you should have a redirectTo as well.

I'll have to dig into the source of the angular router, to see why it would throw this error:

Cannot match any routes. URL Segment: 'order-management/list-view'

But if I have to guess, I think that it sees the pathMatch property, and tries to redirect. But redirect to what? There is no redirectTo property. My guess is that it tries to some unknown route, maybe with undefined, and it will throw an error.

Collectives™ on Stack Overflow

Error: Cannot match any routes in Angular 4

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related