Uncaught (in promise): TypeError: Cannot read property 'component' of null
If anyone interested in going with Child route structure. You could follow this model. I found this in ngx-breadcrumbs.
const myRoutes : Route[] = {
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'person',
children: [
{
path: '',
component: PersonListComponent
},
{
path: ':id',
component: PersonDetailComponent
}
]
},
{
path: 'folder',
children: [
{
path: '',
component: FolderComponent
},
{
path: ':id',
component: FolderComponent
}
]
}
};
Just thought I'd add a comment for the benefit of those who stumble across this for the same reason I did. If your template uses conditional rendering, and those conditions are satisfied asynchronously, the router-outlet cannot be inside the conditional markup because the framework might try to render the markup before the condition is satisfied. For example:
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
<router-outlet></router-outlet>
</div>
may fail depending on how quickly the async call finishes. It's always safer to include only the static parts of a the markup in the conditional rendering. As in:
<div *ngIf="someAsyncCall()">
<header>{{some result from the async call}}</header>
</div>
<router-outlet></router-outlet>
I got bit by wrapping the entire page in a "busy indicator" directive which pretty much guaranteed that the router-outlet would not be available all the time. Seems obvious in hindsight, but....
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.