Можно ли отложить загрузку модуля страницы без подпапки в маршруте?

Question

У меня есть страницы, к которым я хочу получить доступ как:

https://www.example.com/foo
https://www.example.com/bar
https://www.example.com/baz
https://www.example.com/qux

Однако я хочу лениво загрузить их из двух модулей для foo/ bar и baz/ qux, поэтому мой основной модуль маршрутизации выглядит так:

app-routing.module.ts

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

const routes: Routes = [
  { path: 'foo', loadChildren: () => import('./foo-bar/foo-bar.module').then(m => m.FooBarModule) },
  { path: 'bar', loadChildren: () => import('./foo-bar/foo-bar.module').then(m => m.FooBarModule) },
  { path: 'baz', loadChildren: () => import('./baz-qux/baz-qux.module').then(m => m.BazQuxModule) },
  { path: 'qux', loadChildren: () => import('./baz-qux/baz-qux.module').then(m => m.BazQuxModule) },
];

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

Затем я определил модуль для ленивой загрузки как:

foo-bar.module.ts

      import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FooPageComponent } from './foo-page.component';
import { BarPageComponent } from './bar-page.component';

const routes: Routes = [
  { path: 'foo', component: FooPageComponent },
  { path: 'bar', component: BarPageComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  declarations: [
    FooPageComponent,
    BarPageComponent
  ]
})
export class FooBarModule {}

а затем то же самое для BazQuxModule.

Проблема в том, что указание маршрутов страниц в основном модуле маршрутизации означает, что Angular предполагает, что эти маршруты являются подпапкой, в которой осуществляется доступ к лениво загруженной странице, то есть он принимает только:

https://www.example.com/foo/foo
https://www.example.com/bar/bar
https://www.example.com/baz/baz
https://www.example.com/qux / qux

Теперь, как показывает этот ответ (на несколько более простую версию этого вопроса), я мог бы просто объявить `` пустой '' маршрут в основном модуле маршрутизации, но это не позволит мне различать два подмодуля (так что все 4 компонента страницы должен быть в том же модуле).

Это также предполагает, что я мог бы сохранить маршруты в основном модуле маршрутизации и разделить каждый компонент страницы на свой отдельный модуль, чтобы его можно было объявить с использованием «пустого» маршрута, например

{ path: '', component: FooPageComponent, pathMatch: 'full' }

но я действительно не хочу иметь много модулей, каждый из которых содержит одностраничный компонент.

Итак, есть ли способ указать маршруты для ленивой загрузки в основном модуле маршрутизации, сохраняя каждую страницу в «корне» URL-адреса, но при этом различать их в правильном подмодуле для соответствующих компонентов?