CODEWITHSUNDEEP
javascriptangularangular-routing
starlight
starlight

Reputation: 785

Error: Cannot match any routes in Angular 4

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.

Upvotes: 0

Views: 970

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71891

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.

Upvotes: 3

Related Questions