iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Angular, a route maps a URL path or pattern to the component that should display, with optional settings for redirects, child routes, titles, guards, and loading behavior. Define route objects in a Routes array, then register the array with Angular Router. In a standalone application, the usual registration point is provideRouter(routes) in the application providers.
Define routes and register them
A route commonly pairs a path with a component. For example, these routes display a home page at the root URL and an admin page at /admin:
import { Routes } from '@angular/router';
import { HomePage } from './home-page';
import { AdminPage } from './admin-page';
export const routes: Routes = [
{ path: '', component: HomePage },
{ path: 'admin', component: AdminPage },
];Register the array with the router in a standalone application configuration:
Free tools Windows power users keep installed
One-click scans. No signup required.
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig = {
providers: [provideRouter(routes)],
};Project file names and bootstrap arrangements vary, so place and register the array in the locations that fit the application’s existing setup. See Angular’s Define routes guide and routing overview.
#1 Best Overall
Choose paths and order matches
Static and parameterized paths
A static path names fixed URL segments, such as admin or settings/account. A colon-prefixed segment is a path parameter: user/:id can match URLs such as user/42, allowing the same route component to handle different IDs. Path parameters are part of the URL path; query-string values are separate.
Order specific routes before broad ones
Angular uses first-match-wins ordering. Put a specific path such as users/new before the broader users/:id pattern so that “new” selects its own route. Place a catch-all ** route last, after routes that should match normally.
export const routes: Routes = [
{ path: 'users/new', component: NewUserPage },
{ path: 'users/:id', component: UserPage },
{ path: '**', component: NotFoundPage },
];Redirect paths safely
Use redirectTo to send one path to another. An empty path is a prefix of every URL, so a root-only redirect needs pathMatch: 'full'; otherwise it can match URLs beyond the root. Angular’s default path-matching strategy is prefix.
{ path: '', pathMatch: 'full', redirectTo: '/dashboard' }See Angular’s redirecting routes guide for path matching and redirect options.
Rank #3
Add child routes, titles, and guards
Render nested routes
A parent route can define a children array. Add a <router-outlet> to the parent component’s template; Angular renders the active child view there.
Set a page title
A route’s title property sets the document title when that route activates. Use a meaningful title for each page, including for accessibility and browser-tab context.
Control navigation with guards
Guards such as canActivate and canMatch are configured on route definitions to control client-side navigation or route matching. Angular also supports multiple routes for the same path when guard logic should select among them. Guards do not replace authorization checks on trusted server-side systems. Details are in Angular’s route guards guide.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesChoose eager or lazy loading
Use component for a component included with the route configuration. Use loadComponent to load a component when its route becomes active, or loadChildren to load a route configuration on demand.
- Eager loading: keeps route components available with the initial application code, which can suit primary landing pages.
- Lazy loading: can reduce initial bundle work by fetching less-used routes later, but adds requests when those routes are visited. Nested lazy loading can also affect performance.
Angular generally recommends eager loading for primary landing pages and lazy loading for other pages, but there is no universal performance result. Measure the effect in the context of the application’s build and runtime. See the lazy-loaded routes guidance and Route API.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
