Angular размещение названного роутера как дочернего в родительском роутере

Question

Именованный маршрутизатор-розетка «право» размещается в родительском маршрутизаторе-розетке, но представление «розетка» маршрутизатора «право» не работает вместе с родительским маршрутизатором

Мои требования показаны в приведенной ниже ссылке с изображением

За исключением именованного маршрутизатора-розетки, называемого «правым», он остается в родительском маршрутизаторе-розетке

const routes: Routes = [  
{ path: '', redirectTo: 'tabs', pathMatch: 'full' }, 
{
path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
},
{
path: 'tabs', loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsModule) 
}];

app-routing.module

<router-outlet></router-outlet>

app.component. html

   const routes: Routes = [
{
path: '', component: TabsComponent,
children: [
{
  path: '', redirectTo: 'Alarm', pathMatch: "full"
},
{
  path: 'Alarm', loadChildren: () => import('./alert/alert.module').then(m => m.AlertModule)
},
{
  path: 'Events', component: IncidentsComponent
},
{ 
  path: 'Maps', loadChildren: () => import('./map/map.module').then(m => m.MapModule), outlet: 
  'right' 
}
]
},
{
 path: 'wrap',component: TabsComponent
}]
@NgModule({
declarations: [TabsComponent, IncidentsComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class TabsModule { }

tabs.module.ts

<div class="left">

  <router-outlet></router-outlet>
</div>
<div class="right">
  <router-outlet name="right"></router-outlet>
</div>

tabs.component. html