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
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!
