Angular Auth guard infinity loop with routing - how to fix it?

I am having problems with my auth guard logic and routing.

I have 3 routes in my app-routing.module.ts :

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule),
  },
  {
    path: AppRoutes.auth,
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: AppRoutes.landing,
    loadChildren: () => import('./landing/landing.module').then(m => m.LandingModule),
  },
];

As you can see there are 1 path which contains '' and will send the user there - BrowserModule - /browser path

In the browser-routing.module.ts I have AuthGuard which sends users to landing page if they are not logged in :

const routes: Routes = [
  {
    path: '',
    component: BrowseComponent,
    redirectTo: BrowseRoutes.browse,
  },
  {
    path: BrowseRoutes.browse,
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
    canActivate: [AuthGuard]
  }
];

AuthGuard.ts :

  canActivate(
    route: ActivatedRouteSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.hasToken()) {
        if(this.authService.isAuthenticated()){
          console.log('logged in guard');
          this.router.navigate(['browse']);
            return true;
        } else {
          console.log('not logged in guard');
            this.router.navigate(['landing']);
            return false;
        }
    } else {
      console.log('no token not logged in guard');
      this.router.navigate(['landing']);
      return false;
    }


  }

The problem is :

If I am logged in, it goes infinity loop with AuthGuard, printing me either "not logged in" and going in "/" then /browse again and again either "logged in" and in infinity pool again. How to fix it ?

There's no need to navigate from the guard when the condition is met. This makes the guard override the decision that it should not be responsible for and renders it impossible to reuse for other routes as it will always navigate to /browse. The guard's job is to validate and should only navigate when a condition is not met.
Your canActivate method should have the following structure:

if (isLoggedIn()) {
  return true;
}
this.router.navigate(['landing']);
return false;

Angular Routing
From angular docs "https://angular.io/guide/router"
> The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

I see your route always matches to the first route 'browser.module'. angular uses 'first-match wins strategy'

So change the route to below

const routes: Routes = [
  
  {
    path: AppRoutes.auth,
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: AppRoutes.landing,
    loadChildren: () => import('./landing/landing.module').then(m => m.LandingModule),
  },
  {
    path: '',
    loadChildren: () => import('./browse/browse.module').then(m => m.BrowseModule),
  },
];