Lazy loading w Angularze, osobne komponenty dla top-level URL w jednym module

0

Zmontowałem sobie projekt z lazy loading:

const routes: Routes = [
  {
    path: 'foo',
    loadChildren: () => import('./foo/foo.module').then(m => m.FooModule)
  },
  {
    path: 'bar',
    loadChildren: () => import('./bar/bar.module').then(m => m.BarModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./shared/shared.module').then(m => m.SharedModule)
  },
  {
    path: 'welcome',
    loadChildren: () => import('./shared/shared.module').then(m => m.SharedModule)
  },
  {
    path: '',
    redirectTo: '/welcome',
    pathMatch: 'full'
  }
];

Chciałbym, aby na domena/about był AboutComponent, a na domena/welcome był WelcomeComponent.
Niestety, jak zrobię tak w SharedRoutingModule

const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'welcome', component: WelcomeComponent },
  { path: '', component: WelcomeComponent },
];

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

To z racji .forChild(routes) obecnie działają takie linki:
/about/about -> AboutComponent
/welcome/about -> AboutComponent
/about/welcome -> WelcomeComponent
/welcome/welcome -> WelcomeComponent
Bo pierwszy człon leci z AppRoutingModule, a drugi jest łapany przez SharedRoutingModule.

Może to późna pora, ale nie umiałem sformuować w Google sensownego zapytania by znaleźć rozwiązanie tej zagadki. Użycie forRoot(routes) w SharedRoutingModule nie działa, gdyby ktoś chciał to zasugerować ;)

1

sprawdz -> link

0

Ok, rzeczywiście niezbyt pięknie. Zgodnie z zaleceniem autora odpowiedzi, przemyślę swoją strukturę, ale sam problem rozwiązany (nie testowałem jeszcze).
Dzięki.

1 użytkowników online, w tym zalogowanych: 0, gości: 1