In Angular dynamic route name not working when navigateByUrl(), its need to refresh the page

Question

This is my main route file

 let baseRoute= Config.loginFirstName==null ? 'abcd':Config.loginFirstName;
 
const routes: Routes = [
  {path: '', redirectTo: '/'+baseRoute+'/'+Config.role+'/dashboard/home', pathMatch: 'full' },
  {path:'help', component:HelpComponent},
  {path:'register', component:RegisterComponent},
  {path:'forget-password',component:ForgetPasswordComponent},
  { path: baseRoute, loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) },
  {path:'**', component:NotfoundComponent}
];

This is page.module routing

const routes: Routes = [{ path: '', component: PagesComponent },
{
  path: 'customer',
  loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule)
},
{
  path: 'organizer',
  loadChildren: () => import('./organizer/organizer.module').then(m => m.OrganizerModule),
  canActivate: [AuthGuardOrganizer]
},

Here have the problem when someone login as vendor with name 'xyz' so its redirect to 'xyz/vendor' route and its working first time, but when login with name 'abc' as a customer then its route will be abc/customer then its redirection not working.

Thanks

Answer 1

Finally I am able to resolve this problem by preloadingStrategy

const config: ExtraOptions = {
  useHash: true,
  preloadingStrategy: PreloadAllModules // when I added this line its working
};

@NgModule({
  imports: [RouterModule.forRoot(routes,config)],
  exports: [RouterModule]
})