how to lazy load the children view by default?

Question

I'm trying to make the view dynamic when using the loadchildren() property

For example, I've got 3 components

app.html :

Hello App

<router-outlet></router-outlet>

home.html :

Hello Home

<a routerLink="./child">My Child</a>

<router-outlet></router-outlet>

child.html :

Hello child

I've got 3 routing modules like so :

app.routing :

Routes = [{
  path: 'home',
  loadChildren: () => import('./modules/home/home.module').then(m => m.HomeModule)
}];

home routing :

const routes: Routes = [ {
  path:'',
  component: HomeComponent, 
  children : [{
    path: 'child', 
    loadChildren: () => import('../file/pages/child/child.module').then(m => m.ChildModule)
  }
}];

child.routing :

const routes: Routes = [ {
  path: '',
  component: ChildComponent
}];

The problem is that "Hello Home" is waiting for "Hello Child" to completely load before showing on screen.

All I want is, when loading page, showing on screen "Hello Home" without waiting for ChildComponent. Exactly like the "Hello App" do