Angular Route Guards and Resolvers

Route guards protect routes from unauthorised access, and resolvers pre-fetch data before a route activates.

canActivate Guard

// auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const auth   = inject(AuthService);
  const router = inject(Router);

  if (auth.isLoggedIn()) {
    return true;
  }

  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// Apply to routes
{ path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }

canDeactivate Guard — Unsaved Changes

export const unsavedChangesGuard: CanDeactivateFn<{ isDirty: boolean }> = (component) => {
  if (component.isDirty) {
    return confirm('You have unsaved changes. Leave anyway?');
  }
  return true;
};

Resolver — Pre-fetch Data

// user.resolver.ts
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { UserService, User } from './user.service';

export const userResolver: ResolveFn<User> = (route) => {
  return inject(UserService).getById(+route.paramMap.get('id')!);
};

// Route
{ path: 'users/:id', component: UserDetailComponent, resolve: { user: userResolver } }

// Component
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  user = this.route.snapshot.data['user'] as User;
}