CODEWITHSUNDEEP
angularangular-router
AraDeveloper
AraDeveloper

Reputation: 181

Why pathMatch gives "Invalid configuration of route" error?

This is the error message I get:

Error: Invalid configuration of route '{path: "teams/", redirectTo: "all"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.

Here is my syntax in app.module.ts:

 const routes = [
     { path: 'teams', component: TabsComponent, children: [
         { path: '', redirectTo: 'all', pathMatch: 'full' },
         { path: ':side', component: ListComponent }
     ] },
     { path: 'new-team', component: CreateTeamComponent },
     { path: '**', redirectTo: '/teams' }
];

Why do I still have the error?

Upvotes: 18

Views: 22284

Answers (5)

Majedur
Majedur

Reputation: 3242

In Angular 19, write even function on

redirectTo

{
    path: '', 
    pathMatch:'prefix',
    redirectTo: () => {
    return 'login'
}},

Upvotes: 0

Peppers
Peppers

Reputation: 386

For some beginners like me, here is my summary for this case.

  • pathMatch = 'prefix'. Route’s path is the prefix of what is left in the URL.
  • pathMatch = 'full'. The path is “equal” to what is left in the URL

Upvotes: 1

Singhak
Singhak

Reputation: 8896

By default, Angular matches paths by prefix. That means, that the following route will match both /recipes and just /

{ path: '', redirectTo: '/somewhere-else' }

Actually, Angular will give you an error here, because that's a common gotcha: This route will now ALWAYS redirect you! Why?

Since the default matching strategy is "prefix" , Angular checks if the path you entered in the URL does start with the path specified in the route. Of course every path starts with '' (Important: That's no whitespace, it's simply "nothing").

To fix this behavior, you need to change the matching strategy to "full" :

{ path: '', redirectTo: '/somewhere-else', pathMatch: 'full' }

Now, you only get redirected, if the full path is '' (so only if you got NO other content in your path in this example).

Upvotes: 24

CodeWarrior
CodeWarrior

Reputation: 5176

Try the following code:

const routes = [
 {
    path: 'teams', component: TabsComponent, children: [
        { path: '', redirectTo: 'all', pathMatch: 'full' },
        { path: ':side', component: ListComponent }
    ]
 },
 { path: 'new-team', component: CreateTeamComponent },
 { path: '**', redirectTo: '/teams' }
];

You have a typo, you are writing pathMacth instead of pathMatch

Upvotes: 3

stojevskimilan
stojevskimilan

Reputation: 1030

A redirect route requires a pathMatch property to tell the router how to match a URL to the path of a route. The router throws an error if you don't.

From angular docs

Upvotes: 4

Related Questions