如何在angular 7中正确实现命名路由器出口？

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent, outlet: 'main' },
  { path: 'about', component: AboutComponent, outlet: 'main' },
  { path: 'contact', component: ContactComponent, outlet: 'main' }
];

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

<router-outlet name="main"></router-outlet>

<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['home'] } }">Home</a>
<a routerLink="/about" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['about'] } }">About</a>
<a routerLink="/contact" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['contact'] } }">Contact</a>