iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular route guards let you control whether navigation activates a route, enters its child routes, leaves the current route, or matches a particular route configuration. Choose the guard for the navigation decision you need, return a redirect value rather than navigating imperatively inside the guard, and enforce access to protected data on the server as well.
Choose a guard by the navigation decision
Angular provides four guard types. They are not interchangeable: each runs at a different point in routing, and CanMatch handles a false result differently from the others.
| Guard | When it decides | What false means | Typical use |
|---|---|---|---|
CanActivate |
Before a target route activates | Navigation is canceled | Allowing or denying entry based on sign-in status or permissions |
CanActivateChild |
Before a child route of the guarded parent activates | Navigation to that child is canceled | Applying a common rule to a parent’s child routes |
CanDeactivate |
Before the active route is left | Navigation away is canceled | Checking whether a form has unsaved changes |
CanMatch |
While the router checks whether a route configuration matches | The router skips that route and tries other configurations | Conditional route selection or a fallback for the same URL |
Use an activation guard for an entry decision, a deactivation guard for leaving a page, and a match guard when the route configuration itself should be conditionally eligible. In particular, CanMatch returning false does not mean the same thing as another guard returning false: a later route may still handle the URL.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteAttach a guard to a route
Angular supports functional guards and route-level dependency injection. A guard can consult application services for authentication, permissions, or feature state. Attach it in the route configuration, for example with canActivate: [authGuard]. Multiple guards may be listed in an array; Angular runs them in the order listed.
#1 Best Overall
A guard can return a boolean, a UrlTree, or a RedirectCommand. It can also return a Promise or Observable of those results. For an asynchronous result, the router uses the first emitted value and unsubscribes. Make sure the guard’s observable or promise produces the intended decision rather than relying on later emissions.
Cancel navigation or redirect it deliberately
Return false when the intended outcome is simply to cancel a navigation. To send the user elsewhere, return a UrlTree or RedirectCommand. That lets the router treat the redirect as part of the navigation decision.
Do not return false and then call navigation imperatively from inside the guard to achieve a redirect. That mixes cancellation with a separate navigation and is not the approach Angular advises. Choose the destination as the guard’s return value instead.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use CanActivateChild at the right level
CanActivateChild applies to a parent’s child routes, not automatically to the parent URL itself. Check the route nesting in your configuration: if a rule must protect both the parent route and its children, determine whether the parent also needs an activation guard. A common parent rule is useful for a group of related child pages, but the nesting determines which navigations it covers.
Rank #3
Use CanMatch for alternate route configurations
CanMatch decides whether a route configuration is eligible to match. If it returns false, Angular continues checking route configurations rather than treating that result as a general navigation denial. This makes it suitable for conditional route choice, including cases where a later route with the same path serves as a fallback or alternate component.
Route order matters because Angular uses first-match-wins. Put more specific paths before less specific ones, and keep wildcard fallbacks last. When using duplicate paths for a conditional route and fallback, confirm that the later configuration is the one you want the router to try when the first route’s match guard returns false.
Keep redirects and guard decisions distinct
Route redirects use prefix matching by default. For an empty-path redirect that should apply only at the root, set pathMatch: 'full'; otherwise, prefix matching can make the redirect apply to other paths as well. This redirect setting is separate from a guard returning a redirect value: use it to configure route-path matching, and use a guard result when the guard’s decision should redirect navigation.
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 →The current Angular Route API marks canLoad as deprecated and says to use canMatch instead. Prefer CanMatch for current route-matching decisions rather than building new guidance around canLoad.
Route guards are not server-side authorization
A route guard controls navigation in the browser; it does not secure an API or protected data by itself. Browser JavaScript can be modified by the person using the browser, so a user may bypass client-side navigation restrictions or make requests without following the intended interface.
Angular’s guidance is explicit: “Always enforce user authorization server-side, in addition to any client-side guards.” The server must independently authorize requests and data access. Use guards to shape the application’s navigation flow, not as the access-control boundary for backend resources.
Test the navigation outcome
Test what the router actually does, not only whether a guard function returns the expected value in isolation. Angular’s routing testing guide demonstrates mocking dependencies and using RouterTestingHarness to exercise routed components and navigation.
Free tools Windows power users keep installed
One-click scans. No signup required.
- Confirm that an allowed navigation reaches the intended route.
- Confirm that a denied activation or child activation cancels navigation.
- Confirm that a guard-returned redirect reaches the expected destination.
- When using
CanMatch, confirm that a false result falls through to the intended later route, if one exists. - For
CanDeactivate, verify both the allow-to-leave and stay-on-page outcomes relevant to the component.
Mock authentication, permission, or other guard dependencies so each outcome can be tested deliberately. Include a fallback test when route matching depends on configuration order; a passing guard-unit test alone will not establish that the router selects the intended route.
Quick Recap
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.
