I am currently facing an issue with my project. I have a board divided into four columns, each containing n number of items. When I click on an item, the details section in a side nav should be loaded. However, every time I try to open the details section, I encounter the following error message:
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'HyPE4PM/2/details/5413869/DETAILS'app.module lazily loads the backlog.module, which in turn lazily loads the board.module as children, and the board.module lazily loads the details.module as children.
app-routing.module
export const routes: Routes = [
{
path: 'HyPE4PM',
loadChildren: () => import('./modules/lazy/backlog.module').then((mod) => mod.BacklogModule)
},
{
path: 'Error',
loadChildren: () => import('./modules/lazy/error-site.module').then((mod) => mod.ErrorSiteModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
backlog-routing.module
/**
* define the routes for the BacklogComponent module
*/
const routes: Routes = [
{
path: '',
component: BacklogComponent,
children: [
{
path: '2',
loadChildren: () => import('../lazy/boards-modules/taskboard.module').then((mod) => mod.TaskboardModule)
},
]
}
];
/**
* define the routing for the BacklogComponent module
*/
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
board-routing.module
const routes: Routes = [
{
path: '',
component: TaksboardComponent,
children: [
{ path: 'details/:id', redirectTo: 'details/:id/DETAILS', pathMatch: 'full' },
{
path: 'details/:id/:detailsSection',
loadChildren: () => import('../lazy/backlog-item-details.module').then((mod) => mod.BacklogItemDetailsModule),
outlet: 'rightSidenav',
data: { preload: true, delay: 2500 }
}
]
}
];
/**
* define the routing for the BacklogComponent module
*/
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
When trying to navigate to the details of the selected item, I use the router.navigate method:
public selectItem(event: MouseEvent, position: DetailSections) {
this.log.trace(`selectItem() in backlog item comp. id: ${this.backlogItem.id}`);
this.eventService.hideBoardCreator.emit();
// as the click to these events are bound on the DOM on childs of the click to the details -> we need to stop the event here
// if TS on other card is shown, it needs to be hidden
event.stopPropagation();
// save selection into store
this.store.dispatch(new BacklogItemSelected(this.backlogItem));
// show the details section
this.router.navigate([`/HyPE4PM/${this.configService.boardtype}/details`, this.backlogItem.id, DetailSections[position]]);
}
For a better understanding of the error, I have provided a stackblitz link here. Feel free to check it out and try to navigate to the route hype/2/details to see the error in action.