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ć ;)