While working with Angular 8, I encountered routing issues specifically when using lazy-loaded child modules.
app-routing.module.ts
...
const routes: Routes = [
{
path: :id,
component: ParentComponent,
children: [
{ path: 'child', loadChildren: './child.module#ChildModule' }
]
}
]
...
child-routing.module.ts
...
const routes: Routes = [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]
...
Currently, the routing is set up as follows: foo.com/123/child/child1 -> Child1Component foo.com/123/child/child2 -> Child2Component
However, when trying to navigate to foo.com/123/child/child2 within Child1Component, an unexpected behavior occurred. It navigated to foo.com/child/child2 instead of foo.com/123/child/child2.
child2.component.ts
...
constructor(private router: Router) {}
...
this.router.navigate(['child/child2']);
...
Upon further investigation, I found a solution by accessing the parent ID from the URL inside the component and using it for navigation. Although it worked, I find this approach to be less scalable as it would require updates to child components if there are changes in routing parameters.
Is there a more efficient way to handle routing in child components within lazy-loaded child modules?