Angular router seems to work but doesn't load component

Question

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?

Kyler Johnson · Accepted Answer · 2020-01-09 14:14:19Z

15

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.

answered Jan 9, 2020 at 14:14

Kyler Johnson

2,25420 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular router seems to work but doesn't load component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related