Angular 8 - Infinite loop in canActivate as route is always empty

Question

I'm trying to route the user to different components after login, based on roles.

But when I route, I get an infinite loop in canActivate as route url is always empty, which should only be true the first time, second time it should be either the path "/admin" or "/user".

App-routing.module.ts

const routes : Routes = [
  { path : ''  , redirectTo : '', pathMatch: 'full' , canActivate : [RedirectGuardService] },
  { path : 'admin' , component : DashboardComponent , canActivate : [AuthGuardService], data : { role : 'admin'}},
  { path : 'user' , component : UserComponent , canActivate : [AuthGuardService], data : { role : 'user'}},
];

Redirect-guard.service.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
  const role = localStorage.getItem("role");
  if (role) {  
    alert("navigate to the right detination based on role");    
    this.router.navigate(['/'+ role]);
    return true;      
  }      
  this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
  return false;
}

• I did not include the code for AuthGuardService as it never hits that code.
• alert("navigate to the right detination based on role"); gets displayed infinite.
• route: ActivatedRouteSnapshot is always empty: (url:'')

Answer 1

Turned out to be the role I got from localStorage.getItem("role") was with capital first letter and the routing data role were all lowercase, so ended up not finding the url and ran infinite. Its still a bad behavior as route ** should have grabed that. But I can move on for now.

Answer 2

EDIT: Found out the culprit. In app.module.ts you need to import AuthModule first. Doing this will allow you to use the path '**' in either 'auth-routing.module.ts' or 'app-routing.module.ts'

@NgModule({

  imports: [
    AuthModule,
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    SharedModule
  ],
})

---

I was having an infinite loop issue as well. Not sure if this relates to yours but for me I had two routing files. 'app-routing.module.ts' and 'auth-routing.module.ts'. I moved the code below from ' app-routing.module.ts' into 'auth-routing.module.ts' and no more infinite loops! Hope this helps you in some way!

 {
    path: '**',
    redirectTo: 'my-route',
  }