angular-guards

To migrate Angular class-based guards to functional guards, you replace class implementations with CanActivateFn, CanDeactivateFn, and CanMatch functional patterns, then register them through provideRouter for v21 and later projects.

CanActivate checks authorization before route navigation, while CanMatch controls whether lazy-loaded route code loads at all. CanMatch prevents unauthorized code from loading, whereas CanActivate evaluates access permissions for route activation.

Protect lazy-loaded Angular routes by applying CanMatch functional guards with provideRouter. This prevents unauthorized lazy-loaded code from being fetched, ensuring route protection and authorization checks happen before any code loads.

Yes, use the CanDeactivate functional guard to prompt users about unsaved changes during navigation. It intercepts route exits, allowing you to warn users and prevent accidental data loss when leaving forms or workflows.

Angular functional guards support role-based route protection by implementing data-driven guard checks within CanActivateFn. You can combine multiple functional guards for layered security to protect dashboards and admin areas with specific role verification.