Angular route guards control what happens during navigation: whether a route can activate, whether a child route can activate, whether the current route can be left, or whether a route configuration can match. Choose the guard for the decision you need, return a router-recognized result, and enforce authorization for protected data on the server as well.
Which Angular route guard should you use?
These guards address different moments in navigation; they are not interchangeable.
As an Amazon Associate I earn from qualifying purchases.
| Guard | When it runs | What a false result means | Typical use |
|---|---|---|---|
CanActivate |
Before a route activates | Navigation is canceled | Check whether a user may enter a route |
CanActivateChild |
Before a child route activates | Navigation to that child is canceled | Apply a shared check to routes nested under a parent |
CanDeactivate |
Before leaving the active route | Navigation away is canceled | Ask whether to leave a page with unsaved changes |
CanMatch |
While Angular evaluates whether a route configuration matches | Angular skips that route and tries other configurations | Select a route conditionally or provide a fallback |
The distinction matters most for CanMatch: returning false does not simply deny navigation. Another route configuration may still match the same URL. By contrast, a false result from the activation or deactivation guards cancels that navigation.
How do you add a guard to a route?
Angular supports functional guards and route-level dependency injection. A guard can use application services to check authentication, permissions, or feature state. Attach it in the route configuration, for example:
#1 Best Overall
{ path: 'account', component: AccountComponent, canActivate: [authGuard] }Multiple guards can be listed in an array; Angular runs them in the order listed. For child-route checks, put canActivateChild on the parent route whose children need protection, and verify the route nesting: the parent URL itself is distinct from its child routes.
Guards can return a boolean, a UrlTree, a RedirectCommand, or a Promise or Observable that resolves to one of those results. For an asynchronous return, the router uses the first emitted value and unsubscribes.
How should a guard redirect?
Return a UrlTree or RedirectCommand when the guard should send the user elsewhere. This lets the router handle the redirect as part of navigation. Angular advises against returning false and then calling navigation imperatively from inside the guard.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Keep redirect configuration separate from guard decisions. Angular uses prefix matching for redirects by default. If an empty-path redirect should apply only to the root, set pathMatch: 'full'; otherwise, the prefix rule may make it apply to other paths too.
Rank #3
How does CanMatch fall-through work?
Angular evaluates route configurations in order and uses the first match. If a CanMatch guard returns false, Angular skips that candidate and continues matching. This supports deliberate conditional routing, such as offering a later route with the same path as an alternate component or fallback.
Put more specific paths before less specific ones, and keep wildcard fallbacks last. Together, route order and the guard result determine which configuration Angular considers next.
Are Angular route guards a security boundary?
No. A guard can shape the navigation experience and keep a route out of the interface, but it cannot secure an API or its data. Browser JavaScript can be modified by the person using the browser. Angular’s routing guide states: “Always enforce user authorization server-side, in addition to any client-side guards.” The server must independently authorize protected requests and data.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →How should you test route guards?
Test what the router does, not only what a guard function returns. Angular’s routing testing guide demonstrates mocking dependencies and using RouterTestingHarness to exercise routed components and navigation.
- Verify that an allowed navigation reaches the expected route.
- Verify that a denied activation or deactivation cancels navigation.
- Verify that a returned redirect takes the user to the intended destination.
- For
CanMatch, verify that a false result falls through to the intended later route, if one exists.
What about CanLoad?
The current Angular Route API marks canLoad as deprecated and directs developers to use canMatch instead. For new route-matching decisions, use CanMatch rather than treating canLoad as the preferred current approach.
Quick Recap
Angular documentation
- Angular guide: Control route access with guards
- Angular API: CanMatch
- Angular API: CanActivate
- Angular API: Route
- Angular guide: Redirecting routes
- Angular guide: Define routes
- Angular guide: Testing routing and navigation
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
