延迟加载组件到 Angular 辅助出口

Question

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?

Answer 1

You cannot lazy load components, I am having trouble with this myself. Do you have sub routing set up for that lazy loaded module?