angular 20 children routes seems not loaded at all when lazy load of component enabled

I have main route:

  {
    path: 'signup',
    loadComponent: () => import('./signup/signup.component').then(m => m.SignUpComponent),
    children: signUpRoutes
  },

and inside signUpRoutes I have:

export const signUpRoutes: Routes = [
    //{ path: '', component: SignUpComponent },
    { path: 'confirmemail', component: ConfirmEmailComponent },
    { path: 'accept-invite/:token', component: AcceptInviteComponent }
];

When I go or redirect to /signup/confirmemail I have content of SignUpComponent.

What's wrong here?

Maybe I do wrong combining eagerly and lazy loaded components?

What's best practice and how can I resolve that?

It's after I migrate to Angular 20. Before I had SignUpModule (lazy loaded) with the same children components.

Parent(signup) - Child(confirm/accept) Relationship:

You should either have a <router-outlet/> defined inside the SignUpComponent, only then the child component will be rendered inside this outlet as a child.

Signup Component HTML:

...
<router-outlet/> <!-- child route gets rendered inside here! -->
...

All Sibling components:

Alternatively, you can remove the loadComponent and place the routing inside the child routes. Like shown below.

main routes:

{
  path: 'signup',
  children: signUpRoutes
},

signUpRoutes:

export const signUpRoutes: Routes = [
    { path: '', component: SignUpComponent },
    { path: 'confirmemail', component: ConfirmEmailComponent },
    { path: 'accept-invite/:token', component: AcceptInviteComponent }
];