Guard not re-routing to other component

Question

I have these two guards

@Injectable({
 providedIn: 'root'
})
export class DesktopGuard implements CanActivate {
  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) { }

  canActivate() {
    if (window.innerWidth < 768) {
      this.router.navigate(['./mobile'], {relativeTo: this.route.parent});
      return false;
   }
   return true;
 }
}

@Injectable({
 providedIn: 'root'
})
export class MobileGuard implements CanActivate {
  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) { }

  canActivate() {
    if (window.innerWidth > 768) {
     this.router.navigate(['./welcome'], {relativeTo: this.route.parent});
     return false;
    }
   return true;
 }
}

And these routes.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'grid/welcome',
    pathMatch: 'full',
  },
  {
    path: 'grid',
    component: GridContainerComponent,
    children: [
      {
        path: 'mobile',
        canActivate: [MobileGuard],
        component: WelcomeMobileComponent,
      },
      {
        path: 'welcome',
        canActivate: [DesktopGuard],
        component: WelcomeComponent
      },

    ]
  },
];

Guard should prevent the component from loading and redirect based on the window size. My issue is the redirect to ./mobile, it keeps re-running the guard and consuming memory, i.e it will not redirect to WelcomeMobileComponent. I suspect the router is to blame, but I am not sure.

Any ideas?

thanks!

@Kinjal what do you mean? It's in the routes, where the guards are being used. — godhar, May 06 '22 at 10:05
Yes, but if you are checking in web browser then you will have to reload the page after changing the window size. As you are checking the size of window inside the guard. Please put logs inside and check that it is going there or not? — Kinjal, May 06 '22 at 11:58
@Kinjal I have logged it and the if statement in the desktop guard is definitely triggered. But it just re-routes back to the same guard, looping and consuming memory. I have to then close the tab. — godhar, May 06 '22 at 13:05

score 0 · Answer 1 · answered May 13 '22 at 15:16

I didn't find the reason for this re-route to the same guard.

However, for those looking for a solution to the overall problem of routing based on window size, try this.

Use the BreakpontObserver object and route accordingly.

export class AppComponent {
  constructor(
    private router: Router,
    private breakpointObserver: BreakpointObserver) {
        this.breakpointObserver.observe([
          "(max-width: 768px)"
        ]).subscribe((result: BreakpointState) => {
          if (result.matches) {
             this.router.navigate(['/photo-search/grid/mobile']);   
          } else {
            this.router.navigate(['/photo-search/grid/desktop']);
          }
        });
      }
}

This solved it for me.

Guard not re-routing to other component

1 Answers1