0

I am following the Angular Tour of Heroes Guide. I have stumbled upon the "default route" section and decided to try getting rid of the pathMatch attribute of the Route corresponding to the empty string.

Here is how my code looks:

const routes: Routes = [
  {path: 'heroes', component: HeroesComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'hero-details', component: HeroDetailComponent},
  {path: '', redirectTo: 'dashboard'}
]

The behavior I encounter is a blank page whatever the address is.

If I change the last path, I experience something differently.

{path: '', redirectTo: 'dashboard', pathMatch: 'full'}

Now, even if I target a nonexisting route, I get redirected to the default path (and not redirected), and the index.html is shown.

What's strange for me here is why the former one does not behave similarly. Why does it not redirect me to the index.html?

Changing the last path to use pathMatch: 'prefix' behaves even more unexpectedly.

{path: '', redirectTo: 'dashboard', pathMatch: 'prefix'}

Similarly, if I target a nonexisting address, I get redirected to the index.html, even though everywhere is said that '' prefixes everything, so shouldn't I be redirected to 'dashboard'?

I would be extremely grateful if someone clears this concept up. Thanks!

Kaloyan
  • 41
  • 1
  • 6

1 Answers1

1

First of all in the docs you will find all about pathMatch. Look here.

The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'.

By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match. Importantly there must still be a config match for each segment of the URL. For example, '/team/11/user' matches the prefix 'team/:id' if one of the route's children matches the segment 'user'. That is, the URL '/team/11/user' matches the config {path: 'team/:id', children: [{path: ':user', component: User}]} but does not match when there are no children as in {path: 'team/:id', component: Team}.

The path-match strategy 'full' matches against the entire URL. It is important to do this when redirecting empty-path routes. Otherwise, because an empty path is a prefix of any URL, the router would apply the redirect even when navigating to the redirect destination, creating an endless loop.

How will it works now?

If you enter a url which "not" exists, so you need todo a special thing:

const routes: Routes = [
  {path: 'heroes', component: HeroesComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'hero-details', component: HeroDetailComponent},
  {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
  {path: '**', redirectTo: 'dashboard'}
]

The path: '**' will catch all undefined routes and redirect now to your dashboard. So the blank page you told will not longer display.

The full path mean: Only if the route IS the path -> true The prefix (which still is the default by Angular): Contains the url the path -> true.

Why we need the full path match in path: ''? The "empty" path so to say is in every url. So it can be always true if no other match found.

Flo
  • 2,232
  • 2
  • 11
  • 18
  • Damn, I hadn't known that the default value is `prefix`... However, it turns out that Angular throws `Error: NG04014` if no explicit `pathMatch` is defined on the empty path, as "The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'." Still, I cannot understand why putting `pathMatch: 'prefix'` on the empty path does not redirect everything to the 'dashboard' page. When I try to reach a random address (i.e. 'a'), the thrown error is `Error: NG04002: Cannot match any routes.`. – Kaloyan Mar 15 '23 at 18:14
  • Which Angular version are you using? And: it only make sense to use "full" in a empty route. All other will be always true – Flo Mar 15 '23 at 18:17
  • Angular 14. I agree it makes sense to use it only with 'ful', but I decided to play around and see what the behavior would be and realized when 'prefix', it does not actually match everything, but rather throws the beforehand mentioned error. – Kaloyan Mar 15 '23 at 18:27
  • I have googled a little and: Yes, since Version 14 angular must have the `full` path on empty routes. < 14 you could use both. If my post helps you, you can set it as answer. Thx! – Flo Mar 15 '23 at 18:34
  • Would you share the resource? I seem unable to find such a thing and everyone says “” prefixes anything. – Kaloyan Mar 15 '23 at 18:47
  • Something like this: https://stackoverflow.com/questions/73208616/upgrade-from-angular-13-to-14-routing-problem-error-ng04014 Or this: https://stackoverflow.com/questions/75171393/angular-14-ng04014-invalid-configuration-of-route – Flo Mar 15 '23 at 18:48
  • This is actually wrong. I ended up downgrading my angular version and encountered the exact same behaviour. It seems as '' (together with the 'prefix') matches _none_ but the empty route itself, whereas the __wildcard__ matches everything. – Kaloyan Mar 15 '23 at 21:21
  • 1
    But again, this makes absolutely sense. I have never used prefix with empty routes. – Flo Mar 15 '23 at 21:22