Как настроить вторичный маршрут Angular?

Я пытаюсь настроить вторичные маршруты в компоненте, где содержимое маршрутов отображается на вкладках

В app.component.html

<a class = "list" [routerLink] = "[{outlets:{primary:'variationMargin', futuresMargin:'futuresMargin'}}]" routerLinkActive = "router-link-active">Projected VM</a>

В variation-margin.routing.module.ts Я пытаюсь настроить вторичные маршруты в компоненте, где содержимое маршрутов отображается на вкладках

В app.component.html

<a class = "list" [routerLink] = "[{outlets:{primary:'variationMargin', futuresMargin:'futuresMargin'}}]" routerLinkActive = "router-link-active">Projected VM</a>

В variation-margin.routing.module.ts

const routes: Routes = [{
    path: 'variationMargin',
    component: VariationMarginComponent,
    canActivate: [AuthGuard],
}, {
    path: 'futuresMargin,
    component: FuturesMarginComponent,
    canActivate: [AuthGuard],
    outlet: 'futuresMargin'
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class VariationMarginRoutingModule { }

В шаблоне для VariationMarginComponent у меня есть вкладки

tab1 -> the primary route i.e. the VariationMarginComponent
tab2 -> <router-outlet name='futuresMargin'></router-outlet>

В futures-margin.routing.module.ts. Я не использую этот компонент как отдельный маршрут, поэтому не уверен, имеет ли это значение.

const routes: Routes = [{
    path: AppSettings.FuturesMarginRoute,
    component: FuturesMarginComponent,
    canActivate: [AuthGuard],
    outlet: 'futuresMargin'
}];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class FuturesMarginRoutingModule { }

Однако для futuresMargin в tab2 ничего не отображается. Я вижу только он пустую вкладку.

Как мне настроить маршрут, чтобы он отображался в tab2?