All topics
38 / 100
Routingbeginner

Router Configuration Fundamentals

Explain how Angular's Router maps URL paths to components via a route configuration array.

Angular's Router turns a single-page application into something that still behaves like the web is supposed to — distinct, bookmarkable URLs, working browser back/forward buttons, deep linking — by mapping URL path patterns to components through a declarative route configuration array. Interviewers ask about this early because it's the entry point to nearly every other routing topic, and because a shaky grasp of the basic Routes array shape makes advanced questions (guards, resolvers, lazy loading) much harder to reason about correctly.

It's like a hotel directory board in the lobby — each room number (URL path) maps to a specific room (component), and the elevator (router-outlet) takes you to the right floor the moment you specify where you want to go.

Key Concepts

1
Each route is an object with, at minimum, a path and a way to say what renders there — component (older API) or loadComponent/component in modern standalone routing. Routes are matched top-to-bottom, first match wins, which is why more specific routes generally need to be listed before more general ones (a wildcard ** route, for instance, must always come last, since it matches everything).
pathcomponentloadComponent**
2
In modern Angular, the router is configured via provideRouter(routes) passed into bootstrapApplication(), replacing the older RouterModule.forRoot(routes) pattern — functionally similar, but fitting the standalone, function-based configuration style used throughout modern Angular bootstrap code. The <router-outlet> directive marks where the router renders the currently matched route's component.
provideRouter(routes)bootstrapApplication()RouterModule.forRoot(routes)<router-outlet>
3
A good interview answer also touches on route matching strategies — exact matching via pathMatch: 'full' (commonly needed for an empty path '' route, to avoid it matching every URL as a prefix) versus the default prefix matching — since getting this wrong is one of the most common real-world routing bugs new Angular developers hit.
pathMatch: 'full'''
Use cases:routingfundamentalsnavigation