skip to content

In Angular's router, what is the difference between pathMatch 'full' and 'prefix', and why does an empty-path redirect need 'full'?

level: middleimportance: must knowfreq 65%

answer

  1. prefix is the default
  2. leaf routes already need the whole URL
  3. matters for redirects and children
  4. an empty string prefixes every URL
  5. dev mode demands it explicitly

basics

~20 s

'prefix', the default, matches when the path is the start of the remaining URL; 'full' requires the path to be the whole remaining URL. An empty path is a prefix of every URL, so an empty-path redirect without 'full' would redirect everything.

solid answer

~40 s

`pathMatch` controls how much of the remaining URL a route's `path` has to cover. With the default `'prefix'`, the route matches when its path is the beginning of the remaining segments; the rest goes to its children or, for a redirect, is carried along. With `'full'`, the path must be the entire remaining URL. For a plain leaf route it rarely changes anything, because a route without children must consume everything anyway. It matters for **redirects** and **routes with children**. The empty path `''` is a prefix of every URL, so `{ path: '', redirectTo: 'posts' }` with prefix matching would redirect every navigation — `/about` becomes `/posts/about`. With `pathMatch: 'full'` it only fires on the empty URL. Angular's dev-mode route validation refuses an empty-path redirect without an explicit `pathMatch` for exactly this reason.

code

ts · 12 lines
ts
import { Routes } from '@angular/router';
import { PostList } from './posts/post-list';
import { PostDetail } from './posts/post-detail';

export const routes: Routes = [
  // Only the empty URL: '/' -> '/posts'
  { path: '', redirectTo: 'posts', pathMatch: 'full' },
  // Whole section rename: '/news/hello' -> '/posts/hello'
  { path: 'news', redirectTo: 'posts' },
  { path: 'posts', component: PostList },
  { path: 'posts/:slug', component: PostDetail },
];

go deeper

for a junior

Recall that prefix is the default and that the empty-path redirect needs pathMatch: 'full'.

for a middle

Explain why '' prefixes every URL, why leaf routes already need the whole URL, and where pathMatch actually changes behaviour.

for a senior

Spot misuse in reviews: 'full' on parents with children, prefix redirects that carry unwanted segments, and cargo-cult 'full' on leaf routes.

for a principal

Use prefix redirects deliberately when restructuring URL sections, and document which old URLs are guaranteed to keep working.

## What `pathMatch` controls Every Angular `Route` has a `pathMatch` of either **`'prefix'`** (the default) or **`'full'`**. When the router tests a route against the URL segments that are still unmatched at that level: - **`'prefix'`** — the route matches if its `path` equals the **first** segments of what remains. Anything left over is passed on. - **`'full'`** — the route matches only if its `path` equals **all** of what remains, with nothing left over and no child segment groups. | Route | `/posts` | `/posts/hello` | |---|---|---| | `{ path: 'posts', component: PostList }` (prefix, leaf) | matches | no: leftover `hello`, no children | | `{ path: 'posts', component: PostList, pathMatch: 'full' }` | matches | no | | `{ path: 'news', redirectTo: 'posts' }` (prefix) | — | `/news/hello` becomes `/posts/hello` | | `{ path: 'news', redirectTo: 'posts', pathMatch: 'full' }` | — | `/news/hello` is not redirected | | `{ path: '', redirectTo: 'posts' }` (prefix) | every URL is redirected | `/about` becomes `/posts/about` | ## Why it rarely changes a leaf route A route with a `component` but no `children` has nothing to hand leftover segments to. If segments remain after its path is consumed, the router treats the route as not matching and tries the next one. So for a leaf route, `'prefix'` and `'full'` usually behave the same, and adding `'full'` everywhere is noise rather than safety. ## Where it does matter 1. **Redirects.** A prefix redirect matches its path and carries the remaining segments to the target: `{ path: 'news', redirectTo: 'posts' }` sends `/news/2026/launch` to `/posts/2026/launch`. That is useful for renaming a whole section, and wrong when you meant to redirect one exact URL. 2. **Empty paths.** `''` is a prefix of every URL. A prefix empty-path redirect therefore fires for every navigation at that level. With `'full'`, it fires only when nothing remains — the root URL, or a parent URL with nothing after it. 3. **Routes with children.** A parent `{ path: 'posts', component: PostsLayout, children: [...] }` must use prefix matching so that `/posts/hello` can reach a child. Setting `'full'` on it means it only ever matches `/posts` itself, and its children are unreachable except for an empty-path child. ## The dev-mode guard Because the empty-path redirect mistake was so common, Angular's route validation (run in development builds when the router receives its configuration) throws for any route with `path: ''` and `redirectTo` but no `pathMatch`. The message says that the default is `'prefix'` but that the intent is often `'full'`, and asks you to state it. Setting `pathMatch: 'prefix'` explicitly is allowed — for example on an empty-path redirect inside a child array, when you really mean to redirect everything below. ## Redirect results are not re-redirected at the same level A related detail explains why a prefix empty redirect does not loop forever: after a **relative** redirect, the router re-matches the rewritten segments against the same routes array with redirects disabled at that level. `/about` becomes `/posts/about`, and if no non-redirect route matches that, the navigation fails with a "Cannot match any routes" error instead of redirecting again. ## A quick rule set - Use `pathMatch: 'full'` on **empty-path redirects** that should fire only on the empty URL, and on **exact-URL redirects**. - Leave the default on **parent routes with children**. - Do not sprinkle `'full'` on leaf component routes; it does not change their behaviour. - Use prefix redirects deliberately for **section renames**, where carrying the rest of the URL is the point. ## What interviewers listen for The definitions, the observation that `''` prefixes everything, the dev-mode error, and the insight that leaf routes already need the whole URL, which shows you understand the matcher rather than memorising a rule.

  • What happens if you set pathMatch: 'full' on a parent route that has children?
    The parent then matches only when nothing follows its path, so `/posts/hello` cannot reach a `:slug` child; only an empty-path child can render under it. Parents with children should keep the default `'prefix'` so the remaining segments flow to the children.
  • Why does Angular throw in development for { path: '', redirectTo: 'posts' }?
    Its route validation requires an explicit `pathMatch` on every empty-path redirect, because the default `'prefix'` would redirect every URL at that level and that is rarely intended. The error text says the default is `'prefix'` but the intent is often `'full'`. The check runs only in development builds.

saying these in an interview costs you the question

  • pathMatch defaults to 'full'
  • Every route needs pathMatch: 'full' to avoid matching longer URLs
  • A prefix redirect drops the rest of the URL
  • An empty-path redirect without pathMatch redirects only the root URL
  • pathMatch: 'full' on a parent still lets its children match