Angular: How to add children under loadChildren dynamically?

Question

I have this AppInitService for APP_INITIALIZER for me to set the routes dynamically because the routes information will be coming from the API.

But, I do not know how to set or provide children routes within loadChildren module.

Expectation: routes.children with layoutChildrenRoutes under LayoutRoutingModule will be modified in AppInitService Example code:

This is not working.

AppInitService

      const layoutChildrenRoutes = [
        {path: 'test', component: TestComponent},
        {path: 'home', component: DynamicContentComponent}
      ];

      //** update the index route */
      config[layoutConfigIndex] = {
        ...config[layoutConfigIndex],
        // loadChildren: () => import('./modules/layout/layout-routing.module').then(m => {
        //   let routes = m.routes;
        //   routes[0].children = layoutModuleConfigChildren as Routes;
        //   return routes;
        // }),
        loadChildren: () => import('./modules/layout/layout.module').then(m => {
          return m.LayoutModule;
        }),
      }

LayoutModule > LayoutRoutingModule

export const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { 
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class LayoutRoutingModule {}

I am out of ideas, did some trial and errors but none of those worked.

Your help is much appreciated.