Angular 6 named outlet in component and nested routes

Question

I haven't been a bit away from Angular for a while and I am getting back to it. I am encountering issues with nested routes and named router outlets.

I have a main component that holds the primary outlet:

app.component.ts

<clr-main-container>
  <app-navigation></app-navigation>
  <div class="content-container">
  <main class="content-area">
    <router-outlet></router-outlet>
  </main>
  <clr-vertical-nav [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="sidenavCollapsed" *ngIf="displaySidenav">
    <app-sidenav *ngIf="currentUser.currentRole != null; else locked" [currentRole]="currentUser.currentRole"></app-sidenav>
    <ng-template #locked clrVerticalNavHeader>
        <a clrVerticalNavLink>
            <clr-icon clrVerticalNavIcon shape="sad-face"></clr-icon>
            Please select a role
        </a>
    </ng-template>
  </clr-vertical-nav>
</div>

And another component that holds a secondary outlet:

person.component.ts

<h1>{{person.firstname}} {{ person.lastname }}</h1>
<p class="status" [ngClass]="person.status == 'ACTIVE'? 'status-active' : 'status-inactive'"> {{ person.status }}</p>
<router-outlet name="personrouter"></router-outlet>

My routes are declared as follow:

const routes: Routes = [
  { path: '', component: SearchComponent, canActivate: [AuthGuard], pathMatch: 'full'},
  { path: 'login', component: LoginComponent},
  { path: 'search', component: SearchComponent, canActivate: [AuthGuard]},
  { 
    path: 'person', component: PersonComponent,
    children: [
      { path: '', component: PersonDetailsComponent, outlet: 'personrouter', pathMatch: 'full' },
      { path: 'phone', component: PersonDetailsComponent, outlet: 'personrouter' }
    ],
    canActivate: [AuthGuard]
  },

  { path: '**', redirectTo: ''}
];

Up to now everything was working fine, because I wasn't using nested routes but since I have declared these and tried to use the secondary outlet I am having some issues.

Going to /person works fine, I hit PersonComponent and the secondary outlet display PersonDetailsComponent. However, going to /person/phone just redirects me systematically to root (http://localhost:4200/).

I enabled tracing for the router but it is just clearly showing that it is redirecting:

platform-browser.js:216 Router Event: NavigationStart
platform-browser.js:211 NavigationStart(id: 5, url: '/person/phone')
platform-browser.js:211 NavigationStart {id: 5, url: "/person/phone", navigationTrigger: "imperative", restoredState: null}
app.component.ts:29 NavigationStart {id: 5, url: "/person/phone", navigationTrigger: "imperative", restoredState: null}
platform-browser.js:216 Router Event: RoutesRecognized
platform-browser.js:211 RoutesRecognized(id: 5, url: '/person/phone', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.js:211 RoutesRecognized {id: 5, url: "/person/phone", urlAfterRedirects: "/", state: RouterStateSnapshot}
app.component.ts:29 RoutesRecognized {id: 5, url: "/person/phone", urlAfterRedirects: "/", state: RouterStateSnapshot}

Being a bit puzzled here...