Guards & Resolvers in Angular
From the Angular cheat sheet · Routing · verified Jul 2026
Guards & Resolvers
Route guards and data resolvers
typescript
// CanActivate guard
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private auth: AuthService,
private router: Router
) {}
canActivate(): boolean {
if (this.auth.isAuthenticated()) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
// Resolver
@Injectable()
export class UserResolver implements Resolve<User> {
constructor(private userService: UserService) {}
resolve(route: ActivatedRouteSnapshot): Observable<User> {
return this.userService.getUser(route.params['id']);
}
}💡 Use guards to control access to routes
⚡ Resolvers ensure data is loaded before component
📌 Functional guards are simpler for basic checks
🔥 CanDeactivate prevents accidental data loss