pathMatch routing error

Question

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'.

it was the Error Massage.

here is my syntax on app.module.ts:

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

];

why I still have the error??

Answer 1

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).

Answer 2

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

Answer 3

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