I have a path structure like this: /events/100/drawing/200
and events and drawings are separate modules with their own routing tables, like:
// Event ID routes
const routes: Routes = [
{
path: ':eventID',
data: { breadcrumb: 'Drawings & Results' },
component: EventComponent,
children: [
{
path: 'drawing',
loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
}
]
}
and
const routes: Routes = [
{
path: ':drawingID',
data: { breadcrumb: 'Drawing' },
component: EventDrawingComponent
},
];
There is a breadcrump that shows me the current path and the routing seems to work. But in any case the EventComponent
is loaded, but not the EventDrawingComponent
as expected.
I also tried this to remove the EventComponent
from:
// Event ID routes
const routes: Routes = [
{
path: ':eventID',
data: { breadcrumb: 'Drawings & Results' },
children: [
{
path: 'drawing',
loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
}
]
}
Now the EventDrawingComponent
is loaded but of course /events/100
wont work anymore. Please can you tell me what is wrong with my code?