multiple path for load same module - lazy loading
If you really want to do this you can use UrlMatcher to find the correct component.
SIDE NOTE:I wouldn't recommend you to do this. instead go with my other answer. I think it's a better approach. BUT of-course it's your decision.
Simple demo
app.routing.module.ts (not changed)
{
path: 'settings/account',
loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
path: 'settings',
loadChildren:'./modules/settings/settings.module#SettingsModule',
}
settings.routing.module.ts
export function isAccount(url: UrlSegment[], group: UrlSegmentGroup) {
return group.segments.length === 1 && group.segments[0].path.endsWith('account') ? ({consumed: url}) : null;
}
export function isSettings(url: UrlSegment[], group: UrlSegmentGroup) {
return group.segments.length === 1 && group.segments[0].path.endsWith('settings') ? ({consumed: url}) : null;
}
export const routes: Routes = [
{
path: 'account',
component: accountComponent,
matcher: isAccount
},
{
path: 'account/edit',
component: accountEditComponent
},
{
path: 'settings',
component: settingsComponent,
matcher: isSettings
},
{
path: 'settings/edit',
component: settingsEditComponent
}
];
Result is exactly what you're looking for:
http://localhost:4200/settings will show settings component.
http://localhost:4200/account will show account component.
One way is to have settings
as the default path (component) for this module, and all other components as a child route.
Simple DEMO
app.routing.module.ts
{
path: 'settings/account',
loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
path: 'settings',
loadChildren:'./modules/settings/settings.module#SettingsModule',
},
settings.routing.module.ts
export const routes: Routes = [
{
path: '',
component: settingsComponent
},
{
path: 'edit',
component: settingsEditComponent
},
{
path: 'account',
component: accountComponent
},
{
path: 'account/edit',
component: accountEditComponent
}
];
http://localhost:4200/setting will show settings component.
http://localhost:4200/settings/account will show account component.
..etc