0

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'.

Navigating to 'apprent/virtual-work/work-plan' and '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'.

shuffler
  • 66
  • 5
  • Well, you defined the path as ```virtual``` under ```apprent``` route. So ```'apprent/virtual-work/work-plan' ``` doesn't exist right? – Rakib Uddin Apr 11 '22 at 02:55
  • @shuffler are there any redirects located in the AuthGuard or the components on screen that redirect to the dashboard? And I believe you meant `virtual/work-plan` instead of `virtual-work/work-plan` as seen in the video. – Chris Hamilton Apr 11 '22 at 03:19
  • Looking at your video closer: after clicking refresh on `apprent/teams` I can see it goes to `auth/authenticate`, then `apprent/dashboard`, and then `apprent/teams`. So I think your AuthGuard is failing and I'm guessing you have a couple redirects in your components. You'll have to share that code if that's the case. – Chris Hamilton Apr 11 '22 at 03:57
  • @RakibUddin thanks for spotting that, I have now modified it. – shuffler Apr 11 '22 at 11:04
  • @ChrisHamilton The mainRoutingModule redirects to the dashboard here - ```{ path: '', redirectTo: '/apprent/dashboard', pathMatch: 'full' }``` but no other dashboard redirects from the AuthGuard. Infact, the dashboard only loads on authentication success – shuffler Apr 11 '22 at 11:05
  • @shuffler does the AuthGuard not redirect to the auth module when it fails? That's the only reason I can see why the url would briefly change to that address. Then I'm guessing a component within the auth module navigates to the dashboard. Slow down your video after clicking refresh on `apprent/teams` and you'll see what I mean. – Chris Hamilton Apr 11 '22 at 11:15
  • @ChrisHamilton Thanks for that observation. You are indeed right! AuthComponent does not properly redirect to the original url for some cases. Fixed now – shuffler Apr 11 '22 at 13:08
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243789/discussion-between-shuffler-and-chris-hamilton). – shuffler Apr 11 '22 at 13:24

0 Answers0