Angular2 and routing with multiple, optional parameters

Question

I have an Angular2 app that has a module with multiple route parameters, some of which are optional. The routing works completely fine inside Angular itself but generated URLs break if used directly. I'm trying to work out why. I'm also trying to work out how I can get the link to be active when /champion is access, no matter what the parameters are.

Routes as defined in the module

RouterModule.forChild([
  { path: 'champion/:id', component: ChampionComponent },
  { path: 'champion/:id/:version', component: ChampionComponent }
])

Link (this works when clicked)

<a class="item" [routerLink]="['/champion', 1, '7.9.1']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">Champion Analysis</a>

But trying to access the URL directly (localhost:5555/champion/1/7.9.1) fails with Cannot GET /champion/1/7.9.1

EDIT: I should note it is only for the second route that it fails. Typing localhost:5555/champion/1 into the address bar works fine.

Possible duplicate of Angular 2.0 router not working on reloading the browser — user2033671
– user2033671, Commented May 5, 2017 at 15:00
Hi, @ProfessorAllman, I've edited the original. Other routes work fine, it's just the entry with multiple parameters that does not. — Acaeris
– Acaeris, Commented May 5, 2017 at 15:15

Michael · Accepted Answer · 2017-05-05 15:40:10Z

3

Try swapping the routing lines.

RouterModule.forChild([
  { path: 'champion/:id/:version', component: ChampionComponent },
  { path: 'champion/:id', component: ChampionComponent }
])

Order matters (scroll down a bit from the anchor)

answered May 5, 2017 at 15:40

Michael

3682 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Acaeris Over a year ago

No, same issue I'm afraid. Clicking a link that includes the second parameter works but using the address bar doesn't. Same result no matter which way around the routes are.

Collectives™ on Stack Overflow

Angular2 and routing with multiple, optional parameters

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related