This seems like something that should be easy to do, but I can’t find a way to do it.
In my app-routing.module.ts I have
{ path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) },
In items-routing.module.ts
{ path: '', component: ItemsComponent},
{ path: 'items-settings', component: ItemsSettingsComponent },
How can I redirect to /items page from ItemsSettingsComponent?
I tried to do it like this
this.router.navigate([‘’], { relativeTo: this.activatedRoute });
But it redirects to app module.
Update: More specifically my issue is that I also have another feature module where ItemsSettings component is located so I cannot hardcode url. Let’s say I also have in app-routing module
{ path: 'deleted-items', loadChildren: () => import('./deleted-items/deleted-items.module').then(m => m.DeletedItemsModule) },
In deleted-items-routing.module.ts
{ path: '', component: DeletedItemsComponent},
{ path: 'items-settings', component: ItemsSettingsComponent },
I would like to have a generic solution that would allow to reuse component among different modules.
We can use absolute routing using / as prefix, assuming items is present in the root routing paths. Then, the property root is the app component, then we access the first child, which will be the lazy loaded route, then we access the path property using routeConfig.
back(){
const rootChild = this.route?.root?.firstChild?.routeConfig?.path;
this.router.navigate(['/', rootChild]);
}