Angular 35: Angular Router Basics
easy⏱ 5 mincourseangular
Routes: a plain array mapping paths to components
A Routes array is just data — each entry is { path: 'about', component: AboutComponent }. An empty-string path (path: '') matches the application's root URL. There's no magic file-based routing here; the array is the single source of truth for what renders where.
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
provideRouter(routes): registering the router with the app
In a standalone application's bootstrap config, provideRouter(routes) is passed to bootstrapApplication(AppComponent, { providers: [provideRouter(routes)] }) — it's what turns the plain Routes array into a working router service that the rest of the app can inject and react to.
// main.ts
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)],
});
RouterLink + router-outlet: navigation without a page reload
<a routerLink="/about">About</a> intercepts the click, updates the URL via the History API, and swaps whatever component is currently rendered inside <router-outlet /> for the one matching the new path — no full-page navigation, no server round trip.