2

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.

Acaeris
  • 175
  • 2
  • 11
  • 2
    Possible duplicate of [Angular 2.0 router not working on reloading the browser](http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser) –  May 05 '17 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 May 05 '17 at 15:15

1 Answers1

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)

Michael
  • 368
  • 2
  • 8
  • 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. – Acaeris May 08 '17 at 08:25