6

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?

1 Answer 1

12

Make sure you have <router-outlet></router-outlet> somewhere in your parent template. The Angular router renders the loaded component there. Without it, your component class will be instantiated, but it cannot be rendered.

Also, make sure you have added the RouterModule to the imports array in your parent module.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.