Angular Router: загрузка модуля как потомка лениво загруженных модулей

Question

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

Например, я бы хотел следующий путь:

https://localhost:8080/ui/examplemodule/new

examplemodule и new - это каждый модуль, каждый со своим собственным файлом routing.config.

Мой app-routing.module.ts выглядит так:

const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    canActivate: [LoginRequiredGuard],
    children: [
      {
        path: '',
        children: [
          {
            path: '',
            component: HomeComponent,
          },
          {
            path: 'examplemodule',
            loadChildren: 'app/my-modules/example/example.module#ExampleModule',
            canActivate: [LoginRequiredGuard],
          },
          {
            // examplemodule2
          },
          {
            // examplemodule3
          },
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            canActivate: [LoginRequiredGuard],
          },
        ],
      },
      ...

Файл new.routing.ts в NewModule выглядит следующим образом:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'new',
    pathMatch: 'full'
  },
  {
    path: 'new',
    component: NewViewComponent,
  },
];

Поскольку я сделал это в настоящее время, я получаю «ресурс не найден».

Например, я не хочу иметь следующие маршруты:

https://localhost:8080/ui/examplemodule/new

https://localhost:8080/ui/examplemodule2/new

https://localhost:8080/ui/examplemodule3/new

Что я делаю не так? Надеюсь, я смог бы объяснить это понятно

Answer 1

Я думаю, вам нужно загрузить NewModule изнутри ExampleModule

Удалите ваш путь new из маршрутизации модуля приложения и добавьте этот бит в ExampleModule маршрутизацию

const routes: Routes = [
{
    path: '',
    component: YourParentComponentForExampleModule,
    children: [
      {
        path: '',
        children: [
          //All your other paths here
          //...
          {
            path: 'new',
            loadChildren: 'app/new/new.module#NewModule',
            //canActivate: [LoginRequiredGuard], //You probably don't need it as it's already there on parent module
          },
        ],
      },
  ...