Angular 5 Multi level Child routes with Named router outlets

Question

I am running into an issue where my parent components are not loading if I go directly to a child component link directly when I am using named router outlets.

ex. http://localhost:4200/clientview/(clientViewSidebar:overview/1//clientViewMain:comments/3)

However, the child component will work correctly once I start from the page with the parent component using these steps.

ex. http://localhost:4200/clientview/ then http://localhost:4200/clientview/(clientViewSidebar:overview/1//clientViewMain:comments/3)

Route codes with parent component loading issue

const recipesRoutes: Routes = [
  {path: 'clientview', component: ClientViewComponent, children: [
      {path: '', component: TicketTableComponent, outlet: 'clientViewMain'},
      {path: '', component: TicketDefaultViewComponent, outlet: 'clientViewSidebar'},
      {path: 'comments/:ticketOriginalId', component: TicketCommentsComponent, outlet: 'clientViewMain'},
      {path: ':type/:arrayPosition', component: TicketComponent, outlet: 'clientViewMain'},
      {path: 'tickettable', component: TicketTableComponent, outlet: 'clientViewMain'}, // added twice to since multi router outlet needs to match on a path name
      {path: 'overview/:arrayPosition', component: TicketOverViewComponent, outlet: 'clientViewSidebar'},


    ]},
];

To fix this issue, I tried to create a new route structure with multiple nested children routes in the outlet, however, it does not work and only loads the first page and will not navigate to any other outlets.

ex. http://localhost:4200/clientview

New Route Code that doesn't load children with Named Outlets

const recipesRoutes: Routes = [
  {path: 'clientview', component: ClientViewComponent, children: [
      {path: '', component: TicketTableComponent, outlet: 'clientViewMain', children: [
          {path: 'comments/:ticketOriginalId', component: TicketCommentsComponent},
          {path: ':type/:arrayPosition', component: TicketComponent},
          {path: 'tickettable', component: TicketTableComponent}, // added twice to since multi router outlet needs to match on a path name
        ]},
      {path: '', component: TicketDefaultViewComponent, outlet: 'clientViewSidebar', children: [
          {path: 'overview/:arrayPosition', component: TicketOverViewComponent},
        ]},
    ]},
];

The link I click triggers a router navigate function

  handleRowClick(arrayPosition){
    this.router.navigate(['/clientview', { outlets: { clientViewSidebar: ['overview',arrayPosition],
      clientViewMain: ['tickettable']}}]);
  }