Angular 22 Router In Depth (Signals Edition)

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!