How to properly declare a child route for the angular router?

I've the following routing:

//Root routes
const routes: Routes = [
{
path: '',
component: AuthenticatedLayoutComponent, //All childs pages will have headers
children: [
{ path: '', redirectTo: 'documents', pathMatch: 'full' },
{ path: 'documents', loadChildren: () => import('./documents/documents.module').then(m => m.DocumentsModule) },
{ path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
{ path: 'accounts', loadChildren: () => import('./account/account.module').then(m => m.AccountModule) },
],
canActivate: [AuthGuard],
},
{
//The goal of separating auth and account is to have the pages to becomes authentified in the Auth module, with a totally different layout
path: 'auth',
loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
canActivate: [UnauthGuard],
},
];


and then, for the child "AccountModule", I've the following routes:

const routes: Routes = [
{ path: 'profile', component: ProfileComponent },
{ path: '', redirectTo: 'profile', pathMatch: 'full' },
];


My AuthenticatedLayoutComponent has basically just a header/footer and a router-outlet:

<div id="container" class="flex flex-column w-screen">
<header class="flex-grow-0 z-1">
<app-header></app-header>
</header>
<main class="flex-grow-1 z-0">
<router-outlet></router-outlet>
</main>
<footer class="flex-grow-0 z-1">
<app-footer></app-footer>
</footer>
</div>

• If I try to access to http://localhost:4200/accounts/profile everything works
• But a strange thing is that if I'm trying to access to http://localhost:4200/profile I'm also redirected to my ProfileComponent, without my header/footer.

Why is this considered a valid path and how do I prevent it?

Continue reading...