Братский компонент ребенка не отображается в браузере - Angular

Question

У меня есть такая структура маршрутизации

const routes: Routes = [
  { path: '', redirectTo:"/appsubmissiondashboard", pathMatch: 'full' },
  { path: 'appsubmissiondashboard', component: AppSubmissionDashboardComponent, pathMatch: 'full' },
  { path: 'appinfo',  component: AppSubmissionAppinfoComponent,
  children:[
    { path: 'sponsordetails', component: SponsorDetailsComponent ,  pathMatch: 'full'},
    { path: 'disclosuredetails', component: AppSubmissionDisclosureComponent ,  pathMatch: 'full' }
  ]}
]; 

У меня есть шаблон AppSubmissionAppinfoComponent, подобный приведенному ниже,

<app-submission.appinfo.header></app-submission.appinfo.header>
<app-submission.sidenav></app-submission.sidenav>
<router-outlet></router-outlet>

И app-submission.appinfo.header, и app-submission.sidenav DOM не отображается в браузере, DOM отображается следующим образом:

См. DOM здесь

Оцените предложения и исправления. Пожалуйста, дайте мне знать, почему дочерний компонент дочернего маршрутизатора-розетки не визуализируется, и есть ли способ повторно обработать шаблон этих дочерних компонентов?