Angular использует разные макеты для разных маршрутов

У меня проблема с использованием разных макетов в моем угловом приложении. В настоящее время я определил следующие маршруты:

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      { path: '', component: LandingPageComponent, outlet: 'default' },
      { path: 'login', component: LoginRegisterComponent, outlet: 'default' },
      { path: 'register', component: LoginRegisterComponent, outlet: 'default' },
    ]
  },
  {
    path: 'companies',
    component: CmsLayoutComponent,
    children: [
      { path: '', component: CompanyIndexComponent, outlet: 'cms' },
      { path: ':id', component: CompanyViewComponent, outlet: 'cms' },
    ]
  },
];

Теперь я пытаюсь добиться макета по умолчанию, который является DefaultLayoutComponent

Внутри этого компонента я определил некоторые стили и:

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

Я сделал то же самое для CmsLayoutComponent с помощью:

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

Целевая страница загружается успешно, но когда я пытаюсь перейти, например, к /login, меня перенаправляют обратно на корневой маршрут с CmsLayoutComponent, но без какого-либо другого компонента, загруженного в выход маршрутизатора. Моя консоль печатает:

core.mjs:8416 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'login'
Error: NG04002: Cannot match any routes. URL Segment: 'login'

Что я здесь делаю неправильно?