Nested routing in angular standalone component

<div class="personal-area">
    <app-header></app-header>
    <main class="main">
        <router-outlet></router-outlet>
    </main>
    <app-footer></app-footer>
</div>

@Component({
  selector: 'app-personal-area',
  standalone: true,
  imports: [RouterOutlet,HeaderComponent,FooterComponent],
  templateUrl: './personal-area.component.html',
  styleUrl: './personal-area.component.scss'
})

import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: '', loadComponent: () => import('./pages/home/home.component').then(p => p.HomeComponent)
    },
    {
        path: 'personal', loadComponent: () => import('./pages/personal-area/personal-area.component').then(p => p.PersonalAreaComponent), children: [
            { path: 'main-data', loadComponent: () => import('./pages/sub-pages/main-data/main-data.component').then(s => s.MainDataComponent) },
            { path: 'more-info', loadComponent: () => import('./pages/sub-pages/more-info/more-info.component').then(s => s.MoreInfoComponent) }
        ]
    },
    {
        path: '**', pathMatch: 'full', loadComponent: () => import('./pages/no-route/no-route.component').then(p => p.noRouteComponent)
    }
];

https://myDomain.co.il/personal/main-data