Angular keeps redirecting me to the login page eve

Question

I have a website that it is divided into a normal pages that can be accessed by the user and another page that it is only accessible by admins(which is the ngx-admin).

So to block users from being able to access the admin dashboard I have setup an auth guard which redirect the user to the login page and if they have the wrong credentials it'll redirect them to the home page of the website but for some reason whenever I try to access the home page or anything else I always get redirected the login page.

Here's my app-routing module:

import { ExtraOptions, RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import {
NbAuthComponent,
NbLoginComponent,
NbLogoutComponent,
NbRegisterComponent,
NbRequestPasswordComponent,
NbResetPasswordComponent,
} from '@nebular/auth';
import { AuthGuard } from './auth-guard.service';
import { HomeComponent } from './Home/home.component';
import { OffreAComponent } from './offrea/offrea.component';
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'offreappel', component: OffreAComponent},
{ path: 'users', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [AuthGuard]},
{
path: 'auth',
component: NbAuthComponent,
children: [
  {
    path: '',
    component: NbLoginComponent,
  },
  {
    path: 'login',
    component: NbLoginComponent,
  },
  {
    path: 'register',
    component: NbRegisterComponent,
  },
  {
    path: 'logout',
    component: NbLogoutComponent,
  },
  {
    path: 'request-password',
    component: NbRequestPasswordComponent,
  },
  {
    path: 'reset-password',
    component: NbResetPasswordComponent,
  },
],
 },
{ path: '**', pathMatch: 'full', redirectTo: 'users'},
];
const config: ExtraOptions = {
useHash: true,
};

 @NgModule({
 imports: [RouterModule.forRoot(routes, config)],
 exports: [RouterModule],
 })
 export class AppRoutingModule {
 }

And here's my AuthGuard service:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { NbAuthService } from '@nebular/auth';
import { tap } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: NbAuthService, private router: Router) {}

canActivate() {
return this.authService.isAuthenticated().pipe(
    tap(authenticated => {
        if (!authenticated) {
            this.router.navigate(['auth/login']);
        }
    }),
);
}}

Answer 1

You have a redirect to users on error of the routing.

   { path: '**', pathMatch: 'full', redirectTo: 'users'},

So every time you go to a wrong path it would redirect to:

{ path: 'users', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [AuthGuard]}

I would consider adding a page with route as default and when a route does not match redirect to that page:

{ path: '', component: HomeComponent},
{ path: '**', pathMatch: 'full', redirectTo: ''},

Another thing to note check if you really need the useHash. This is necesary for some environments only.