Understanding Angular Router Specificity | Task

Ole Ersoy
Jan - 31  -  1 min

Scenario

Which of these router configurations is correct:

const routes: Routes = [
   { path: '404', component: NotFoundComponent },
   { path: ':category', component: CategoryComponent }
];

or 

const routes: Routes = [
   { path: ':category', component: CategoryComponent },
   { path: '404', component: NotFoundComponent }
];

Answer

const routes: Routes = [
   { path: '404', component: NotFoundComponent },
   { path: ':category', component: CategoryComponent }
];

Because if we configure the router like this:

const routes: Routes = [
   { path: ':category', component: CategoryComponent },
   { path: '404', component: NotFoundComponent }
];

The path /404 will be treated as a :category value, and so we will never hit /404.