Получение вложенной маршрутизации для отображения во вложенной розетке - Angular 6 - Webpack

Question

Я изо всех сил пытаюсь заставить мои дочерние маршруты заполнить мои вложенные элементы.

Это мой начальный маршрут приложения (.forRoot):

export const ROUTES: Routes = [

  { 
    path: '',      
    component: AdminLayoutComponent,
    children: [
      { 
          path: '',
          loadChildren: './employees/employees.module#EmployeesModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'employees',
    pathMatch: 'full'
  },
  { path: '**',    component: NoContentComponent },
];

Затем в моем маршруте Сотрудников,У меня есть следующее (.forChild):

export const EmployeesRoutes: Routes = [


    {
        path:'employees',
        component: EmployeesComponent,
        children: [
        {
            path: 'employees/:id',
            children: [        
                {
                    outlet: 'employeedetailcolumn',
                    path: 'employee-detail',
                    component: EmployeeDetailComponent
                }
            ]
        }]
    },
    {
        path:'',
        redirectTo: 'employees',
        pathMatch: 'full'
    },

];

Вот где я заблудился.Я попытался лениво загрузить компонент деталей, а также загрузил его, как указано выше.

Это маршрут детали (это необходимо ???):

export const routes = [
  { path: '', component: EmployeeDetailComponent },
  { path: ':id', component: EmployeeDetailComponent },

  //{ path: 'employee-detail', component: EmployeeDetailComponent}
];

Это мой шаблон:

<ul class="heroes">
    <li *ngFor="let emp of emps" [class.selected]="emp === selectedEmployee">
      <a *ngIf="emp" [routerLink]="[ '/employees', emp.id ]"><span class="badge">{{emp.id}}</span> {{emp.name}}</a>
      <a *ngIf="!emp" ><span class="badge">{{emp.id}}</span> {{emp.name}}</a>
    </li>
  </ul>
  </div>
  <div class="col">
      <div class="col-info">Selected Employee</div>
      **<router-outlet name="employeedetailcolumn"></router-outlet>**
  </div>
  <div class="col">
      <div class="col-info">Selected Employee Report</div>
  </div>

Когда пользователь нажимает на сотрудника из первого столбца, я бы хотел, чтобы во втором столбце (где расположен маршрутизатор) было подробное представление.Однако я не могу заставить эту часть работать.

Вот блик стека с тем, что у меня есть до сих пор.Необходимо получить второй столбец для заполнения маршрута из первого столбца.

https://angular -czk5vj.stackblitz.io /