How to fix nested routing?

Question

Angular

Please help me fix the routing. I have 3 components: app, mainLayout, hello. I would like to make the template of the app component contain only: and the routes would be described by the following rule:
<router-outlet></router-outlet>

const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
          {
            path: 'hello',
            component: HelloComponent
          }
    ]
  } 
];

That is, when entering the application, the user would see the mainLayout component template, and if he added /hello to the address bar, he would see the hello component template.
I partially implement it here.

Answer 1

const routes: Routes = [
  { path: '', component: MainLayoutComponent },
  { path: 'hello', component: HelloComponent },
];

So it doesn't work?