Uncaught (in promise): TypeError: Cannot read property 'component' of null

Question

Getting this error when trying to use nestet route in Angular 4:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property \'component\' of null
Ty         


        

Answer 1

As this article (https://angular-2-training-book.rangle.io/handout/routing/child_routes.html) states when dealing with child routes, just as you define a router-outlet for the root of your application, you must define a router-outlet for your parent component (in this case the ConcursoItemComponent. And technically also the CargoItemComponent & DisciplinaItemComponent) So you have 2 options.

• Define a router-outlet in the ConcursoItemComponent. This way the router will know where to load the child component (CargoItemComponent) when the user visits c/:concurso/:cargo
• Don't use child routes and instead make all of your routes at the top router level (root of the application)

{
    path: 'c/:concurso,
    component: ConcursoItemComponent
},
{
    path: 'c/:concurso/:cargo,
    component: CargoComponent
},
{
    path: 'c/:concurso/:cargo/:disc,
    component: DisciplinaItemComponent
},
{
    path: 'c/:concurso/:cargo/:disc/:assunto,
    component: AssuntoItemComponent
}

This way the router will always insert the component into the router-outlet at the root of the application.