Saturday, 13 October 2018

NavigationCancel event thrown for valid guards in Angular 6

I'm having issues with the Angular router during the process of navigating to a provided state.

I have tried using a custom guard with canLoad() and canActivate() functions returning booleans as true without any luck.

The Angular docs states the following:

NavigationCancel: An event triggered when navigation is canceled. This is due to a Route Guard returning false during navigation.

As I dont get any more debugging information from the Router tracing (no reason is given) I am forced to check here if there is a fix, or if this is an existing bug. I also appreciate any information regarding other means of debugging the router in Angular 6.

Console output

console output

The app routing module routes:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'oversikt',
    pathMatch: 'full'
  },
  {
    path: 'oversikt',
    canActivate: [AuthGuard],
    canLoad: [AuthGuard],
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
  },
  {
    path: 'logget-ut',
    component: LogoutComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

The dashboard module routes:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  }
];

Auth guard contains the following functions

public canLoad(): boolean {
  return true;
}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  return true;
}

The naviagation is triggered by a auth service, running in app.component.ts that uses this.router.navigateByUrl(this.oauthService.state); to redirect to a state provided at login.

For full code for each relevant file, see GitHub Gist.



from NavigationCancel event thrown for valid guards in Angular 6

No comments:

Post a Comment