Angular 19 routing child components in standalone architecture

How to define child routes of lazy loaded standalone component? In app.routes.ts I defined:

export const routes: Routes = [
{
path: 'some/parent',
loadComponent: () => import('./my-parent/my-parent.component').then((m) => m.ParentComponent),
children: [
{ path: '', redirectTo: 'child1', pathMatch: 'full' },
{ path: 'child1', loadComponent: () => import('./my-parent/child-one/child-one.component').then(m => m.ChildOneComponent) },
{ path: 'child2', loadComponent: () => import('./my-parent/child-two/child-two.component').then(m => m.ChildTwoComponent) },
]
},...


The parent component template contains a router-outlet:

<head></head>
<router-outlet></router-outlet>
<foot></foot>


Does this approach align with Angular's standalone architecture? Is it possible, or does it make sense, for only the parent component to be lazy-loaded while the child components are not?

I'm using an Angular 19 SSR standalone app.

Continue reading...