As applications grow in complexity, flat routing structures become insufficient. Advanced routing techniques are essential for maintaining performance and organization.
2Performance at Scale
Lazy Loading is a 'must-have' for large apps. By splitting your application into feature modules and only loading them when needed, you drastically reduce the 'Time to Interactive'. Angular handles the complexity of fetching the JavaScript chunks behind the scenes, providing a smooth experience for the user while keeping the initial download size minimal.
3Step-by-Step Breakdown
As your app grows, flat routes become hard to manage. Child routes allow you to nest views inside other views.
Think of a Dashboard. It might have 'profile' and 'settings' sections. We can nest these under a single '/dashboard' path.
To render these children, the parent (DashboardComponent) MUST have its own <router-outlet> in its template.
Checkpoint: Which property in a route object is used to define nested routes?
- →nested
- →children
Now let's talk speed. 'Lazy Loading' prevents your app from downloading every single module at once.
We use 'loadChildren' to tell Angular: 'Download this module ONLY when the user clicks the link'.
Checkpoint: What is the main benefit of using Lazy Loading in an Angular application?
- →It makes the code unreadable
- →It reduces initial load time by loading features on demand
Combining nested routes and lazy loading is how professional Angular developers build enterprise-scale applications.
Ready for user input? Next, we'll start our journey into Angular Forms!
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Route Transitions Should Move Focus, Not Leave It Stranded
By default, navigating to a child route doesn't move keyboard focus anywhere — sighted keyboard users and screen reader users are left focused on whatever link they clicked, with no indication the page changed. Programmatically move focus to the new view's heading after navigation.
2Announce Route Changes to Screen Reader Users
Because Angular's router swaps content without a full page reload, screen readers don't get the same natural 'new page loaded' cue they would from a traditional navigation — use an `aria-live` region updated with the new route's title to close that gap.
SEO Implications
- 1
Lazy-Loaded Modules Must Still Be Reachable by Server-Side Rendering
If a lazy-loaded feature module contains content that should be indexed, ensure your Angular Universal setup actually resolves and renders those routes server-side — lazy loading optimizes client bundle size, but shouldn't accidentally exclude a route from SSR.
- 2
Deep Child Routes Need Their Own Title and Meta Tags
Every meaningfully distinct child route should call Angular's `Title`/`Meta` services with content specific to that route — inheriting the parent route's generic title for every nested child wastes an opportunity for more precise search snippets.
Best Practices
Lazy-Load Feature Modules by Route, Not Just by File Size
Split at meaningful feature boundaries (e.g., an admin section a typical user never visits) rather than arbitrarily — this keeps the initial bundle small for the common path while deferring genuinely optional code.
Use a Resolver to Prevent Rendering a Route Before Its Data Is Ready
A `Resolve` guard fetches required data before the route activates, avoiding a flash of empty or partially-loaded UI that a plain `ngOnInit` fetch inside the component would produce.
Frequent Bugs
A lazy-loaded module's routes work when navigated to directly but fail when linked from elsewhere in the app.
Check that the parent route's lazy-loading configuration (`loadChildren`) is correctly registered and that the child module's own routing exports the expected routes — a common cause is forgetting to import `RouterModule.forChild()` in the lazy-loaded feature module.
After navigating between child routes, keyboard focus and screen reader announcements don't reflect the page change.
Angular's router doesn't move focus automatically on navigation, unlike a full page load. Subscribe to router events and programmatically call `.focus()` on the new view's main heading, and update an `aria-live` region with the new page title.
Real-World Examples
Lazy-Loaded Admin Feature Module
A large app defers loading its entire admin section until a user actually navigates there, keeping the initial bundle small for the vast majority of users who never visit it.
const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];