Question 1

What are Angular route guards?

Accepted Answer

Hooks that decide whether navigation can activate, deactivate, match, or load. Functional guards are preferred: canActivate, canMatch, canDeactivate returning boolean/UrlTree/Observable/Promise. Use for auth and unsaved changes.

Question 2

canActivate vs canMatch — when do you use each?

Accepted Answer

canActivate runs after a route is chosen; canMatch can exclude a route from matching (useful for role-based configs). canMatch helps pick between alternate route configs. canActivate redirects unauthorized users. Prefer UrlTree redirects over boolean false alone.

Question 3

How do you implement an unsaved-changes guard?

Accepted Answer

canDeactivate checks a component interface like hasUnsavedChanges() and confirms before leaving. Keep the check in the component; guard stays thin. Handle browser refresh separately with beforeunload if needed.

Question 4

What are risks of doing heavy async work in guards?

Accepted Answer

Slow navigations, race conditions, and duplicated fetches with resolvers/components. Keep guards fast—auth token check, not full data load. Prefetch in resolvers or components with loading UI.

Guards Angular Interview Questions

Other Angular interview topics