The Angular Router maps URL paths to components so SPAs update views without full page reloads. In CLI projects you configure Routes in app.routes.ts and place a <router-outlet> where child routes render.
Core pieces
{ path: '', component: HomeComponent }— default route{ path: 'users', component: UsersComponent }— segment matchloadComponent: () => import('./admin')— lazy loading for bundle size
Playground note
This sandbox focuses on components and signals; routing runs in full CLI apps. The editor logs a sample route config so you recognize the shape.
Important interview questions and answers
- Q: What does
router-outletdo?
A: Renders the component for the active route—like a dynamic slot for navigation targets. - Q: Why lazy load routes?
A: Split code so users download admin or reporting modules only when they navigate there.
Self-check
- What object shape does the playground print for a dashboard route?
- Where would
router-outletsit in a root component template?
Tip: Lazy loadComponent routes shrink initial bundle size for large apps.
Interview prep
- What does the Angular router do?
Maps URL paths to components, supports lazy loading, outlets, and navigation without full page reloads in SPAs.