如何延迟加载子路由？

Question

I would like to configure my routing like this:

const routes: Routes = [
    {
        path: ':angebotsNummer',
        loadChildren: './uebersicht/uebersicht.module#UebersichtModule',
        resolve: { angebotReadModel: AngebotReadModelResolver },
        children: [
            {   path: 'konditionen',
                loadChildren: './konditionen/konditionen.module#KonditionenModule',
            }
        ]
    }
]

This would result in the child url :angebotsNummer/konditionen

Doing so, angular is telling me: Error: Invalid configuration of route ':angebotsNummer': children and loadChildren cannot be used together

So this will not work. How can I lazy load childrenroutes in angular, if at all?

Answer 1

In that case you would add that configuration in the lazy module routing (Uebersicht-routing.module.ts)

const routes: Routes = [
{
    path: '',
    children: [
        {   path: 'konditionen',
            loadChildren: './konditionen/konditionen.module#KonditionenModule',
        }
    ]
}]

And remove the children part you have:

const routes: Routes = [
    {
        path: ':angebotsNummer',
        loadChildren: './uebersicht/uebersicht.module#UebersichtModule',
        resolve: { angebotReadModel: AngebotReadModelResolver }
    }]

Answer 2

if you have a

    loadChildren: './uebersicht/uebersicht.module#UebersichtModule',

then you have an inner router inside that module that does

component: UbersichtComponent

the component is the one able to carry children, the loadChildren is routing you to a nested module, but the component-loader is the one able to hold children of its own

Answer 3

You can do like as below:

const routes: Routes = [
    {
        path: ':angebotsNummer',
        component: 'UebersichtComponent',
        resolve: { angebotReadModel: AngebotReadModelResolver },
        children: [
            {   path: 'konditionen',
                loadChildren: () => import('./+konditionen/konditionen.module').then(m => m.KonditionenModule),
            }
        ]
    }
]