Как починить вложенный роутинг?

Помогите пожалуйста исправить роутинг. У меня есть 3 компонента: app, mainLayout, hello. Я хотел бы сделать так чтобы шаблон компонента app содержал только:
<router-outlet></router-outlet>

а роуты описывались бы таким правилом:

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

То есть при заходе в приложение пользователь бы видел шаблон компонента mainLayout, а если он дописал бы к строке адреса /hello, то видел бы шаблон компонента hello.

Частично я это реализовать здесь.