I have the following routes configuration:
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'container-page'
},
{
path: 'container-page',
component: ContainerPage,
children: [
{
path: 'first-page',
loadChildren: '../first-page/first-page.module#FirstPageModule',
outlet: 'detail'
},
]
},
];
As you can see, I'm trying to lazy load a component into an auxiliary outlet, but upon navigating to the appropriate route (http://localhost:4200/container-page/(detail:first-page), inside the outlet in question an ng-component is rendered, and inside it, a new empty router-outlet and another ng-component at the same DOM level. What this does is that the newly rendered router-outlet completely hides the ng-component at its level and the content won't show.
This behavior is NOT registered when in primary outlets, only in auxiliary named outlets. Has anyone succeeded in lazy loading a component into an auxiliary outlet?