Nested router outlet taking up space for added component

I have 2 router outlets in my application. The first routes to one of 2 components, one of which is the projects component. My aim is to build the layout of this component similar to the Angular technical documentation page:



Here is the route setup for the projects component:

{
title: 'Projects',
path: 'projects',
component: ProjectsComponent,
children: [
{
path: '',
component: ProjectsOverviewComponent
},
{
path: 'rojectName/rojectScope',
component: ProjectDetailComponent
},
]
}


The projects component is a parent to a projects-nav component which has the second router outlet in its template for routing to either the projects overview or project detail components. My issue is with this second router outlet taking up part of the 'space' for the components that it adds, as can be seen in the image below:

This is unexpected behavior for me. From my experience, the router outlet should add the components to the tree without taking up any space. I would like some pointers on the cause of this issue.

Continue reading...