Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Angular 22 Router In Depth (Signals Edition)

Name: Angular 22 Router In Depth (Signals Edition)
Rating: 4.4 (1750 reviews)

A modern deep dive into Angular 22 routing, from core concepts to advanced navigation patterns

Created byAngular University

Last updated 8/2026

English

English [Auto],Spanish [Auto],

What you'll learn

Configure the router of a modern signal-based Angular application from scratch
Follow along with the complete course code in a GitHub repository
Build lazy-loaded routes, child routes, and nested router outlets
Use route parameters, query parameters, resolvers, and input signals
Implement authentication, feature-flag, child-route, and exit guards
Pass data between routes using state, info, and route data
Configure preloading strategies, router events, and loading indicators
Use advanced Router features, signals, view transitions, and error handling
Apply Angular Router best practices and avoid common routing mistakes

Course content

8 sections • 79 lectures • 9h 44m total length

IMPORTANT0:18
00 Angular In Depth (Signals Edition) Introduction7:32
Build and configure the Angular router from scratch, adding routes, navigations, redirects, resolvers, and guards, with lazy loading in a signals-based, zoneless app using standalone components.
01 Angular Router Essentials - Routes, Router Outlets11:32
Set up the router configuration with provide router, map routes for login and about, render them through a router outlet in the application component, enabling lazy loading with load component.
02 Angular Router Navigation with routerLink and routerLinkActive6:25
Master declarative navigation in Angular using RouterLink for absolute routes and RouterLinkActive to highlight active links, with examples for /about and /login and notes on route order and debugging.
03 Setting a Page Not Found Fallback Route2:39
Configure a page not found fallback route in the Angular router, using a double-asterisk path to catch all unmatched routes and load the page not found component via dynamic import.
04 Introducing Child Routes - The Home Component7:14
Set up the home component under the slash courses path and link child routes via a dedicated routing file, enabling lazy loading of the home component and guards and resolvers.
05 Configuring a Static Route Redirect2:29
Configure a simple static redirect from the app root to /courses by setting a top-level route with path '', using pathMatch: 'full' to trigger only on the exact root URL.
06 Route Parameters and Resolvers13:22
Learn to use route parameters and data resolvers to preload the edit screen. Implement a course resolver to fetch data and inject it into the component for seamless routing.
07 Injecting Route Path Parameters and Query Parameters as Input Signals3:40
Inject route path parameters and query parameters as input signals with the Angular router and signals. Bind inputs like course URL and mode (edit or create) directly in the component.
08 Router Aware Loading Indicator12:05
Build a router aware global loading indicator that turns on during navigation and off after completion. Adapt the loading component with router events and signals.
09 Master Detail and Nested Child Routes - Setting Up The Master Page6:14
Implement a master-detail navigation with nested child routes to display a course page featuring a persistent master area and a lesson list, enabling view course and back navigation with url.
10 Implementing a Child Nested Route Outlet9:15
Implement a child nested route outlet in angular router to enable master detail navigation, displaying a lessons list via a resolver in a secondary outlet with a default empty path.
11 Implementing a Detail Child Route With Detail to Detail Navigation13:23
Learn to implement a master-detail navigation with detail-to-detail routing in Angular. Use a lesson detail resolver, add previous/next controls, and explore navigation to self and component reuse.
12 Introduction To Authentication Guards14:35
Learn how authentication guards control navigation with canActivate in Angular routing, including front-end redirects after login and the effect of guard arrays on access, while emphasizing UX over security.
14 Implementing an Authentication Guard3:16
Implement the canActivate guard by introducing a reusable checkAuthenticated function that uses the authentication service's isLoggedIn and redirects unauthenticated users to /login via the router, parsing the url.
15 Understand CanActivateChild Guards10:48
Understand how CanActivateChild guards protect child routes after the parent is granted access, handle session expiration, and ensure proper re-authentication for nested routes in Angular router.

16 Section 2 Introduction - Route-Scoped Providers and Route-Scoped Services8:23
Explore route scoped services in Angular router and how the in-memory lessons progress service demonstrates shared local state across course, lessons list, and detail views; contrast with component-scoped providers.
17 RedirectCommand and Navigations Extra State - Redirecting to Denied Page afte12:10
Implement a login redirect flow with redirect command and navigation extra state to return users to the originally requested page after authentication, and replace history entry to avoid back navigation.
18 CanDeactive Guards - Route Exit Confirmation7:51
implement a reusable can deactivate guard with a confirm route exit interface and a dialogue service. it blocks navigation when there are unsaved changes and prompts for confirmation before leaving.
19 Navigation Extras Info Transient State - Skipping Exit Confirmation6:48
Introduce and demonstrate the info transient state in router navigation, showing how to pass a skip confirm flag via navigation extras to bypass exit confirmation, without persisting in URL.
20 Comparing Navigations Extras State and Info - When to Use Each and Why7:03
Compare info and state navigation extras in Angular Router and learn when to use; use state to persist a return url across refreshes via history api, while info stays transient.
21 Functional Redirects3:39
Implement functional redirects in the Angular router to preserve legacy URLs by using a redirectTo function that consumes router and query parameters to compute the target URL.
22 Router Outlet Data6:58
Learn how to use router outlet data to pass a captions config from a parent course component to child routes, enabling captions on or off in the lesson detail.
23 Router Outlet Events .mp42:24
Learn how the Angular router outlet emits activate and deactivate events to track component lifecycle and log the activated component instance to the console.
24 Custom Url Matchers5:43
Design and apply a custom url matcher for the login page that recognizes login, sign in, and sign-in variants, and test its behavior within the router configuration.
25 Skipping HTTP Request on Resolver Using Extra Options State or Info7:10
Discover how to avoid extra http requests in an angular resolver by using navigation extras state or info. Compare persistence across back, forward, refresh, and new tabs.
26 CanMatch Guards - Conditional Routing and Feature Flags8:43
Explore can match guards for conditional routing using feature flags to map the same path to different components, enabling A/B testing and admin vs standard views.
27 Preloading and Custom Pre-Loading Strategies8:48
Explore how angular's router preloads lazy loaded modules, compare default on-demand loading with a custom preloading strategy using a preload flag, and implement it in config.
28 Advanced Query Parameters and queryParamsHandling8:22
Explore advanced query parameters in Angular router, including the default replace behavior. Learn how to use merge or preserve strategies to control parameter retention and app-wide defaults.
29 Decoupling The Visible Url from the Router Url - The browserUrl property6:51
Learn how to decouple the visible url from the router url using the browser url property, preserving the user's original address while redirecting to not found page for unknown courses.
30 The exact mode of routerLinkActive - routerLinkActiveOptions4:18
Explore advanced RouterLink Active features by using exact mode via routerLinkActiveOptions to ensure precise highlighting of active routes, ignore query parameters, and resolve prefix versus exact matching.
31 - Relative Route Navigation with relativeTo5:03
Learn how to implement relative route navigation with the relativeTo property in the Angular router, using activated route context to navigate nested routes and avoid building full URLs.
32 Router viewTransitions1:56
Enable view transitions in the router and apply vt-slidein keyframes with CSS to style screen transitions. Ensure styles in styles.sas follow the naming conventions to render visible route transitions.
33 Configuring Scrolling Behavior5:56
Configure and understand how the Angular router handles scrolling during route transitions by enabling in-memory scrolling, anchor scrolling, and scroll position restoration to control top positioning and fragment navigation.
34 Navigation Error Handler3:23
Explore navigation error handling in the Angular 22 router by managing failed HTTP requests during route navigation and redirecting to a not found or error page.
35 The isActive() Signal Utility3:01
Use the isActive signal utility to check if a route or any child route is active, emitting a boolean to toggle a css class on the title with prefix logic.
36 Refresh Logic By Reloading Current Route - Re-Running Resolvers7:50
Discover how to refresh the route in the Angular router by navigating to self with relative navigation, using on same URL navigation reload and retriggering resolvers to fetch fresh data.
37 Understanding skipLocationChange4:45
Learn how skip location change in the Angular Router creates ghost navigations that do not update the URL or browser history, unlike replace or visual URL changes.
38 - Understanding paramsInheritanceStrategy and Router Parameters Inheritance5:44
The lesson explains the router parameters inheritance strategy, showing that child routes inherit parent parameters. It also covers name collisions and the empty only option to isolate parameters.
39 - Understanding canceledNavigationResolution6:13
Discover the cancelled navigation resolution parameter in Angular router, its interaction with canDeactivate guards and browser history, and why computed resolution avoids history replacement.
40 Navigation Promises Behavior - resolveNavigationPromiseOnError5:39
Explore how resolveNavigationPromiseOnError alters navigation promise results in Angular router, switching from throwing to resolving true or false, and show how to override with a navigation error handler.
41 - Url Responsiveness - urlUpdateStrategy1:54
Learn how the Angular router's urlUpdateStrategy controls when the address bar updates during navigation, comparing deferred versus eager modes, and how eager updates enable instant feedback and quick back navigation.
42 Secondary Named Router Outlets10:35
Learn about named outlets in the Angular router, including a main default outlet and a secondary chat outlet, their URL syntax, and why this niche feature is not recommended.
43 - Conclusions and Key Takeways3:23
Explore how the signal-based Angular router treats the URL as application state, enables nested outlets and lazy-loaded, standalone components, with functional guards, resolvers, and inject-based dependency injection.

Warning - Legacy Router Section0:22
Angular Router In Depth Course - Helicopter View5:28
Explore building large-scale single-page apps with the Angular router, emphasizing lazy loading, guards, resolvers, and master-detail routing for advanced navigation.
Download the Angular Router Jumpstart E-Book0:05
IMPORTANT0:17
Angular Router In Depth - Development Environment Setup10:55
Set up angular router development environment by installing nodejs and an IDE, installing dependencies with npm, and running the front end on port 4200 alongside an API on port 9000.
What are Single Page Applications? Advantages and Downsides14:31
Explain the benefits and downsides of single page applications and demonstrate basic Angular router setup, including configuration and outlets, with a home page, about, login, and page not found routes.
What is the Angular Router? Essential Concepts (Routes, Paths and Outlets)9:10
Set up the angular router from scratch, define a root routing module, and map paths like /login and /about to their respective components using a router outlet.
Router Essential Concepts - The routerLink and routerLinkActive Directives7:00
Learn to navigate with the routerLink directive and highlight the active route using routerLinkActive, applying absolute and relative paths, router outlets, and a top menu in an Angular app.

How to setup Lazy Loading with the Angular Router9:28
Learn to lazy load the Angular router, loading the home component via dynamic import, and fetch courses from /api/courses.
Angular Router Lazy Loaded Modules - Runtime Demo9:22
Angular Router Configuration - Best Practices10:21
Learn best practices for configuring the Angular router, including a page not found route with a wildcard path, an exact redirect using path match full, and the home /courses route.
Router Path Variables - Variable Target Routes with the Router Link Directive7:59
Navigate to the course page using a dynamic router link built from the course url, and fetch data with a router resolver to render only when data is ready.
Angular Router Resolver Services - Building a Linkable Page in a SPA16:42
Learn how to build linkable pages in a single page application using a router resolver to fetch course data before navigation, ensuring a full render without broken screens.
Angular Router Loading Indicator - Detecting Route Transitions and Lazy Loading9:55
Show a global loading indicator during routing transitions and lazy loading by integrating a loading service with the Angular router, using navigation and route config events.

Angular Router Child Routes - Step-by-Step Explanation9:08
Explain configuring child routes in a lazy loaded Angular courses module, using nested router outlets for lessons list and lesson detail, and introducing a resolver to supply data.
Angular Router Child Routes Demo - The Lessons List Component8:04
Explore Angular router child routes to display a course's lessons list, using a resolver to preload lesson summaries from a backend and enable lesson detail navigation.
Master Detail Implementation - Routing from the Master to the Detail Component4:38
master detail routing with detail-to-detail navigation by linking the lessons list to the lesson detail using a relative router link and a lesson sequence number.
Implementing the Lesson Detail Resolver12:21
Implement a lesson detail resolver to fetch lesson details from a rest endpoint using the course URL and lesson sequence number, then supply data to the lesson detail component.
Programmatic Router Navigation with the Router Service9:16
Explore programmatic router navigation with the angular router service, implementing back to course with routerLink, and previous and next controls using relative navigation to navigate between lessons.
Understanding Route Snapshots vs Route Observables - When to Use Each and Why12:09
Understand when to use route snapshots versus route observables. Subscribe to the data observable and use the async pipe to update a reused detail component during detail-to-detail navigation.

Router Guards Section Introduction - Authentication Store Review12:34
Use router guards such as canActivate, canActivateChild, canDeactivate, and canLoad with an authentication store to protect routes, handle login flows, and manage user state via observables.
CanActivate Router Guards - Authentication Guards11:30
Discover how canActivate router guards in Angular determine route access using an authentication store, returning true or a login URL tree to redirect unauthenticated users.
Understanding CanActivateChild Guards7:01
Learn how canActivateChild guards protect course and lesson routes by enforcing authentication for both parent and child routes, redirecting unauthenticated users to login.
CanDeactivate Router Guards - A Practical Example7:07
Implement a can deactivate guard in Angular to confirm exit from the course component with a dialog. It triggers when leaving the current route, not for child routes.
Angular Router CanLoad Guards9:37
Explore can load guards for lazy loaded modules, protecting the courses module by loading only when authenticated, using the isLoggedIn observable and first operator, then redirecting unauthenticated users to login.

What is an Angular Router Preloading Strategy?7:50
Explore custom preloading strategies in the Angular router to preload specific lazy loaded modules at startup based on runtime criteria, and compare no preloading with preload all modules.
Angular Router Custom Preloading Strategy7:17
Learn to create a custom preloading strategy for the Angular Router, controlling per lazy loaded module preload using the route data preload flag, implementing a preloading service and testing behavior.
Angular Router Query Parameters - Demo6:37
Learn to read and use URL query parameters with the Angular router, extracting a coupon code via route snapshot or the query parameter map for display.
Configuring routing behaviour with routerLinkActiveOptions6:31
Learn how to configure active navigation in Angular by using routerLinkActiveOptions to require an exact route match for highlighting, including handling nested routes and child routes.
Angular Router Secondary Outlets - Step-by-Step Explanation10:06
Explore Angular router secondary outlets and keep the chat window open across navigation by wiring a secondary outlet named chat with router link and routes.
Angular Router Secondary Outlets - Some Known Issues to be aware of4:59
Close the chat secondary outlet by setting it to null. A known issue prevents production use and requires a primary outlet navigation; consider an Angular Material dialog as a workaround.
Angular Router Module Extra Options - enableTracing and useHash6:08
Learn to configure the Angular router module with enableTracing for debug mode and useHash for hash-based URLs, including root module setup with the root array, preloading, and debug console logs.
Angular Router Extra Options - Recommended Settings10:48
Enable scroll position restoration, set parameters inheritance to always, and apply corrected relative link resolution along with a malformed url error handler for reliable navigation.

Requirements

Basic Angular knowledge is required, but no advanced Router experience is necessary
Basic knowledge of TypeScript, components, and dependency injection
A computer with Node.js and an Angular development environment installed

Description

This course is a modern, signals-based deep dive into the Angular Router, built on standalone components and zoneless change detection. It comes with a running Github repo

This Course In a Nutshell

The Angular Router is one of the least well-known parts of Angular once you dig beyond the basics. Most developers learn the essentials and stop there — not because they don't need more, but because the deeper features are rarely documented in one place or explained in a way that makes their purpose clear.

This course is a deep dive into that lesser-known territory. It covers a wide range of powerful features that solve real, recurring problems in Angular applications — problems that are otherwise surprisingly difficult to handle cleanly. Many of these features have been sitting in the router for years, quietly waiting to be discovered.

Everything is built on modern Angular — standalone components, signals, zoneless change detection, functional guards and resolvers — so the patterns you learn here are the ones that will last.

Course Overview

The router is not just one more Angular feature among many — it is the skeleton of the entire application. It determines how the app is structured, how pages load, how data reaches components, and how users move through the product. Getting it right matters more than almost anything else in an Angular application.

And yet, the router is far more feature-rich than most developers realise. Beyond the basics of routes and navigation links lies a large surface area of capabilities — many of them little known, and most of them genuinely useful once you know they exist. Features that make certain hard problems surprisingly easy.

In this course we take a pragmatic, hands-on approach. We start with an existing application with no routing at all, and we progressively configure every routing scenario you are likely to encounter in a real Angular project — from the simplest redirect to the most advanced navigation patterns.

We start from scratch and build up the route configuration step by step. We cover the essentials — lazy loading, route parameters, resolvers, navigation links, child routes — and then keep going into the parts that courses usually skip: the full guard system in all its variations, the many ways to pass data during navigation, powerful configuration options that change how the router behaves globally or per-navigation, preloading, router events, outlet lifecycle, and deep signals integration.

By the end, you will have a complete picture of what the Angular Router can do — and just as importantly, you will know which tool to reach for in each situation, and which ones to avoid.

Table of Contents

This course covers the following topics:

Router setup with provideRouter and feature functions
Functional redirects — redirectTo as a function receiving params and query params
Lazy loading with loadComponent and loadChildren
Navigation with routerLink, routerLinkActive, and ariaCurrentWhenActive
Route parameters and withComponentInputBinding — params, query params, and resolved data as component inputs
Resolvers — ResolveFn, skipping HTTP with navigation state
Child routes, nested outlets, and relativeTo navigation
Route-scoped providers — services created and destroyed with a route subtree
Query parameters and queryParamsHandling (preserve, merge)
canActivate — authentication guard with redirect to login and return URL
canActivateChild — protecting an entire child route subtree
canDeactivate — unsaved-changes confirmation dialog; bypassing the guard with info
canMatch — feature-flag guard and auth guard; difference from canActivate
Navigation extras: state, info, replaceUrl, skipLocationChange, browserUrl
RedirectCommand — redirecting with state from a guard
Router configuration: paramsInheritanceStrategy, onSameUrlNavigation, urlUpdateStrategy
withInMemoryScrolling and scroll position restoration
Custom preloading strategy — data-driven preloading with route data
Router events — NavigationStart/End/Cancel/Error, RouteConfigLoadStart/End
Building a navigation-aware loading indicator using router events
RouterOutlet lifecycle: (activate) and (deactivate) events
ROUTER_OUTLET_DATA — passing reactive signal data from parent outlet to child component
UrlMatcher — matching routes by numeric ID or slug
Signals integration — isActive signal, withViewTransitions
withNavigationErrorHandler — redirecting to a 404 page on resolver errors
Named outlets — how they work and why to avoid them

What Will You Learn In this Course?

At the end of this course, you will have a thorough, practical understanding of the Angular Router — from the foundational concepts to the most advanced features available in modern Angular.

You will know how to configure guards, resolvers, lazy loading, and preloading strategies correctly, and you will understand exactly what each guard type does differently so you can pick the right one for every situation.

You will be confident working with the signals-based Angular APIs and integrating router state into your components reactively, without workarounds or manual subscriptions.

Have a look at the course free lessons below, and please enjoy the course!

Who this course is for:

Angular developers who want to master the Angular Router beyond the basics
Developers building modern Angular applications with signals and standalone components
Angular developers who want practical solutions to real-world routing problems

Angular 22 Router In Depth (Signals Edition)

What you'll learn

Explore related topics

Course content

00 Angular In Depth (Signals Edition) Introduction16 lectures • 2hr 5min

Section 2 Introduction - Route-Scoped Providers and Route-Scoped Services28 lectures • 2hr 51min

Introduction8 lectures • 48min

Angular Router Essentials6 lectures • 1hr 4min

Angular Router Master Detail with Detail to Detail Navigation6 lectures • 56min

Angular Router Guards In Depth5 lectures • 48min

Angular Router In Depth - Other Topics8 lectures • 1hr

Conclusion2 lectures • 14min

Requirements

Description

Who this course is for: