hasCustomClaims redirects to blank page

Question

I am using hasCustomClaim to guard a route from non admin users.

const adminOnly = () => hasCustomClaim('admin');

The problem here is after a simple user tries to visit the forbidden path, he get redirected to localhost:4200 even if I have already declared the root path as you can see below.

const appRoutes: Routes = [
      { path: 'signin', component: AuthComponent, ...canActivate(redirectLoggedInToU) },
      { path: 'u', component: InvoiceComponent, ...canActivate(redirectUnauthorizedToSignin) },
      { path: 'super', component: SuperadminComponent, ...canActivate(adminOnly) },
      { path: '', redirectTo: 'u', pathMatch: 'full' },
      { path: '**', component: InvoiceComponent }
];

I want to redirect non admin users to:

{ path: '', redirectTo: 'u', pathMatch: 'full' },

Answer 1

Instead of

 { path: '', redirectTo: 'u', pathMatch: 'full' }

You will need to add / (forward slash) before the path:

 { path: '', redirectTo: '/u', pathMatch: 'full' }