Route Configuration

A route maps a path to a component, with optional data, guards, resolvers, and children — all defined as a plain Routes array.

4 min read Level 2/5 #angular#router#config

What you'll learn

Define a Routes array
Map paths to components
Add a wildcard route for 404s

Routes in Angular are not magic — they are a typed array of plain objects. Each entry describes a URL pattern and what should render.

A typical Routes array

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent },
];

Order matters

The router walks the array top-to-bottom and stops at the first match. Specific paths must come before wildcards.

export const routes: Routes = [
  { path: 'users/new', component: NewUserComponent }, // specific first
  { path: 'users/:id', component: UserComponent },    // then dynamic
  { path: 'users', component: UserListComponent },
  { path: '', redirectTo: '/users', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent },        // wildcard last
];

Optional metadata

Routes also accept data, title, canActivate, resolve, and children.

{
  path: 'admin',
  component: AdminComponent,
  title: 'Admin Console',
  data: { roles: ['admin'] },
}

The title is set on the document automatically as users navigate. We’ll cover guards and resolvers shortly.

RouterLink & RouterOutlet →