Angular маршруты подмодулей перекрывают друг друга, если подмодули зависят друг от друга - PullRequest
Новая
       4

Angular маршруты подмодулей перекрывают друг друга, если подмодули зависят друг от друга

0 голосов
/ 13 июля 2020

У меня есть приложение Angular со структурой ниже. он состоит из модуля приложения, содержащего несколько подмодулей. Каждый субмодуль имеет свой собственный модуль маршрутизации, который импортируется в сам субмодуль. Затем подмодули лениво загружаются в AppRoutingModule.

Маршруты должны работать следующим образом: 

/foomodule -> ListComponent
/foomodule/:id -> DetailComponent

/barmodule -> ListComponent
/barmodule/:id -> DetailComponent

Проблема теперь в том, что у меня FooModule и BarModule с BarModule, имеющим зависимость от компонента из FooModule, маршруты FooModule отменяют BarModule.

Таким образом, переход к /barmodule запускает компонент маршрута для /foomodule, которого не должно быть.

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

AppModule: 


@NgModule({
  imports: [
    AppRoutingModule,
  ]
})
class AppModule {}

AppRouting: 


const routes = [
  {
    path: "foomodule",
    loadChildren: FooModuleFactory,
  },
  {
    path: "barmodule",
    loadChildren: BarModuleFactory,
  },
];

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

Все модули маршрутизации субмодулей выглядят так: 


// foomodule-routing.module.ts

const routes = [
  {
    path: "",
    component: ListComponent
  },
  {
    path: ":id",
    component: DetailsComponent,
  },
];

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

export function FooModuleRoutingFactory() {
  return FooModuleRoutingModule;
}

Соответствующий подмодуль: 


@NgModule({
  imports: [
    FooModuleRouting,
  ]
})
export class FooModule {}

BarModule с зависимостью: 

@NgModule({
  imports: [
    // FooModule routes will override BarModuleRoutingModule
    FooModule,
    BarModuleRoutingModule,
  ],
})
export class BarModule {}
...