I have mutliple lazy loaded modules in my angular application where trying to use child route but doesnt work on page reload/refresh
works fine on click function, navigates to expected component, but on page refresh it doesnt work for localhost:4200/port-move/overview.
localhost:4200/overview - this works on refresh . Where It can be corrected to work for approach -> localhost:4200/port-move/overview . Can anyone please help out
Routes in Main Rouitng module (app-routing.module.ts):
const routes: Routes = [
{ path: '', redirectTo: 'search-uploads', pathMatch: 'full' },
{ path: 'port-move', loadChildren: () => import('./modules/routes/port-move/port-move.module').then(mod => mod.PortMoveModule) },
{ path: 'change-card', loadChildren: './modules/routes/change-card/change-card.module#ChangeCardModule' },
{ path: 'search-uploads', loadChildren: './modules/routes/search-uploads/search-uploads.module#SearchUploadsModule' },
{ path: 'inventory-recovery', loadChildren: './modules/routes/inventory-recovery/inventory-recovery.module#InventoryRecoveryModule' }
];
Routes in Port-move/(one of the lazy module):
const routes: Routes = [
{ path: '', component: PortMoveComponent },
{ path: 'overview', component: PortMoveOverviewComponent }
]
Click function to navigate to Port-move-overview component with port-move as parent and overview as child
// Navigates to Port Move Overview
navigateTo() {
this.router.navigateByUrl('/port-move/overview');
}
