Angular invalid configuration of main route (empty path)

Question

In my router configuration I have a DashboardComponent configured under the path 'dashboard' and I'd like to automatically redirect the user to this route when no path is specified (empty path, so just /).

This is my code:

const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard'},
  { path: 'dashboard', component: DashboardComponent },
  /* other routes... */
];

Unhandled Promise rejection: Invalid configuration of route '{path: "", redirectTo: "dashboard"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'

Answer 1

The problem was the lack of the pathMatch property of the empty route, which defaults to prefix.

However in this case the pathMatch value should be set to full:

const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  { path: 'dashboard', component: DashboardComponent },
  /* other routes... */
];

The reason is the following:

Technically, pathMatch = 'full' results in a route hit when the remaining, unmatched segments of the URL match ''. In this example, the redirect is in a top level route so the remaining URL and the entire URL are the same thing.

The other possible pathMatch value is 'prefix' which tells the router to match the redirect route when the remaining URL begins with the redirect route's prefix path.

Don't do that here. If the pathMatch value were 'prefix', every URL would match ''.

For more details refer to the official documentation: https://angular.io/guide/router#redirecting-routes