Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →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
Configure an Angular route redirect with redirectTo in the route definition. Use pathMatch: 'full' for an exact match—especially for the empty-path default route—and put specific routes before broad routes and wildcard fallbacks. Angular describes redirects as a way to automatically navigate users from one route to another. Angular’s routing guide covers the patterns below.
Set a default route for the empty path
An empty route path can match the beginning of every URL. Set pathMatch: 'full' so the redirect applies only when the entire path is empty:
export const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
// Other routes follow.
];Without full, the default prefix strategy may match too broadly, including the redirect destination, and cause unintended navigation or a loop. The Angular Route API documents this behavior.
Choose how much of the path must match
pathMatch |
Behavior | When to use it |
|---|---|---|
prefix (default) |
The route can match the beginning of the URL path; later segments may also be carried through the redirect. | When a redirect should apply to a path and its nested paths, such as news/article redirecting through a news rule. |
full |
The entire URL path must match. | When redirecting only an exact path, particularly the empty root path. |
Use the strategy that reflects the intended match. A redirect from news to blog with prefix matching can also apply to nested paths; full matching restricts it to the complete path. See Angular’s redirect examples and the Route API.
#1 Best Overall
Redirect an old route and preserve its parameter
To keep an existing URL useful after changing route names, map the old path to the new one with redirectTo. Route parameters can be carried into the destination when its route accepts the same parameter:
export const routes: Routes = [
{ path: 'legacy-user/:id', redirectTo: 'users/:id' },
{ path: 'users/:id', component: UserComponent },
];Here, a URL such as /legacy-user/42 redirects to /users/42. Confirm that the target route defines and uses the parameter as intended. Angular’s guide demonstrates this legacy-route pattern.
Use absolute or relative destinations intentionally
A redirectTo value beginning with / is absolute; without the leading slash, Angular resolves it relative to the route path. For example, /dashboard names an absolute destination, while users/:id in the legacy route above is relative. Choose based on the route structure and verify the resulting URL. The distinction is specified in the Route API.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsRedirect conditionally with a function
Use a redirect function when the destination depends on values available during route matching. It can return a string or a UrlTree; the API type also permits asynchronous results. For example, Angular’s guide demonstrates choosing a destination based on route and query parameters.
Rank #3
A redirect function runs before route matching is complete, so it does not receive the full ActivatedRouteSnapshot data. Resolved titles and lazy-loaded components may not be available yet. Keep the condition limited to information available at this stage. See the redirect guide and Route API.
Order routes from specific to broad
Angular uses a first-match-wins strategy. Put specific route patterns before more general ones, or an earlier broad route may capture a URL before Angular reaches the intended route. Keep the wildcard route last, after the known paths it should not intercept. Angular explains route ordering in its route definition guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose what to do with unknown URLs
A wildcard path, **, catches URLs that did not match earlier routes. You can use it to display a not-found component or redirect to a chosen destination:
Recommended Free Tools
export const routes: Routes = [
// Known routes go first.
{ path: '**', component: NotFoundComponent },
];Use a not-found component when users should see that the requested path is invalid; use a redirect when sending them elsewhere is the intended product behavior. Angular documents both wildcard handling and wildcard redirects in its redirect guide and route definition guide.
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.
