Route guards concept

Last reviewed May 28, 2026 Content v20260528

Track mode

client_angular

Means

In-browser Angular TS

Reading

~1 min

Level

advanced

This lesson

This lesson teaches Route guards concept: the concepts, APIs, and habits you need before advancing in Angular.

Routing maps URLs to components—guards and resolvers protect enterprise flows.

You will apply Route guards concept in contexts like: Multi-page SPAs with lazy-loaded feature modules and guarded admin areas.

Write TypeScript with decorators, click Run—Angular 19 loads from CDN, use the Ng global and mountApp(Component) with selector app-root; printOutput feeds the terminal.

When hooks, state, and effects from intermediate lessons are familiar.

Route guards run before or during navigation to enforce rules: authentication, unsaved changes, or role-based access. They return true, false, or a UrlTree redirect.

Guard types

CanActivate — allow entering a route?
CanDeactivate — allow leaving when a form is dirty?
Resolve — prefetch data before the component renders

Functional guards (modern style)

Angular 15+ favors functional guards with inject() instead of class-based guards—same semantics, less boilerplate.

Important interview questions and answers

Q: What happens when CanActivate returns false?
A: Navigation is cancelled; you may redirect via UrlTree to a login page.
Q: Guard vs HTTP interceptor?
A: Guards gate routes; interceptors attach to HTTP requests (auth headers, error mapping).

Self-check

Name one scenario for CanDeactivate.
What does a resolver prefetch?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

CanActivate when?
Resolver prefetch?

No discussion yet. Be the first to ask a question.