How to get page when I refresh angular route in browser

Question

I have this router setup in my angular app (non-essential parts cut out for brevity):

#AppRoutingModule
const routes: Routes = [
  {
    path: '',
    redirectTo: 'apprent',
    pathMatch: 'full'
  },
  {
    path: 'apprent',
    loadChildren: () => import('src/app/containers/main/main.module').then(m => m.MainModule),
    canActivate: [AuthGuard]
  },
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
  }
];

#MainRoutingModule
const routes: Routes = [{
  path: '',
  component: MainComponent,
  children: [
    {
      path: 'teams',
      loadChildren: () => import('src/app/modules/project-teams/project-teams.module').then(m => m.ProjectTeamsModule)
    }, {
      path: 'virtual',
      loadChildren: () => import('src/app/modules/virtual/virtual.module').then(m => m.VirtualModule)
    }, {
      path: 'dashboard',
      component: DashboardComponent
    }, {
      path: '',
      redirectTo: '/apprent/dashboard',
      pathMatch: 'full'
    }
  ]
}];

#VirtualRoutingModule
const routes: Routes = [{
  path: '',
  component: VirtualComponent,
  children: [{
    path: 'work-plan',
    component: WorkPlanComponent
  }, {
    path: '',
    redirectTo: 'work-plan',
    pathMatch: 'full'
  }]
}];

#ProjectTeamsRoutingModule
const routes: Routes = [{
  path: '',
  component: ProjectTeamsComponent
}];

The route in focus is appRoutingModule->mainRoutingModule->virtualRoutingModule->workPlanComponent

As shown in the gif below, when I navigate to 'apprent/teams' and reload page with F5, I still land on 'apprent/teams'.

However, when the current route is 'apprent/virtual-work/work-plan' and I reload page, I land on 'apprent/dashboard'.

Why does this happen? And what can I do so I can reload 'apprent/virtual/work-plan' and get routed to 'work-plan'.