Kenzo
Kenzo

Reputation: 377

Angular Router Wildcard not working

AngularCLI web app. Have a decent amount of routes with the ** wildcard at the end. This works when I type in http://localhost:4200/compasdasd which redirects me to the home component. But when I type in http://localhost:4200/company/dafsdf I get a 404 in the console, but no redirect. Is there a different format I should use for the wildcard for longer routes? Let me know if more info is needed.

{ path: '', component: HomeComponent},
{ path: 'company/:name', component: CompanyComponent},
{ path: '**', component: HomeComponent},

Upvotes: 3

Views: 3078

Answers (1)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

The route: http://localhost:4200/company/dafsdf matches your second route:

{ path: 'company/:name', component: CompanyComponent}

where it is considering dafsdh as the name parameter. For angular, that is perfectly valid. You are getting 404 in the console because you may be doing some API requests upon initialization of the CompanyComponent

Optional

Here your name parameter looks like a string type and dafsdh is also a string type, so there's no distiction at all, but if you want match route based upon the data type passed parameter, for example you wanted to only accept strings but not integers, then this SO question can be useful to you, just change the Regex. How to match route only if param is integer in Angular2?

Upvotes: 2

Related Questions