What are Angular guards?

Angular route guards are interfaces that control access to routes. They can prevent navigation to a route, prevent navigation away from a route, or preload data for a route. Types: (1) CanActivate: determines if a route can be activated. Used for authentication: return true to allow, false or UrlTree to redirect. canActivate: [AuthGuard]; (2) CanActivateChild: same as CanActivate but for child routes; (3) CanDeactivate: determines if you can leave a route. Used for "unsaved changes" warnings — return false to stay, true to leave. Generic: CanDeactivate<ComponentWithUnsavedChanges>; (4) CanLoad / CanMatch (Angular 15+): determines if a lazy module can be loaded. Prevents downloading the module code if the user shouldn't have access. Modern functional guards (Angular 14+): guards can now be plain functions instead of classes: export const authGuard: CanActivateFn = (route, state) => { return inject(AuthService).isLoggedIn() ? true : inject(Router).createUrlTree(["/login"]); };. Using guards in routes: { path: "dashboard", component: DashboardComponent, canActivate: [authGuard] }. AuthGuard example: check if user is authenticated → if yes, return true → if no, navigate to login with return URL: return this.router.createUrlTree(["/login"], { queryParams: { returnUrl: state.url } }). Resolvers: not technically guards but route lifecycle hook that pre-fetches data before navigation completes: resolve: { userData: UserResolver }.