Angular2 RouterLink breaks routes by replacing slash with /

Question

Since the latest Angular2 version (2.0.0-beta.14) it is possible to have query parameters that contain multiple slashes, like /foo/bar.

This works great, however whe

Answer 1

So I found the solution thanks to the Angular2 Issues page on Github (thanks Günter!).

My route was configured like this:

({ 
    path: "/:page",
    component: Page,
    name: "Page"
}),

but instead should have been

({
    path: "/*page",
    component: Page,
    name: "Page"
}),

Difference is the * wildcard in front of page.

I created this issue

Answer 2

Instead of trying to use strings with slashes in routerLink, we simply let the router handle it in the component.

<a (click)="goToPage(url)">Link</a>

url = 'group/8';

goToPage(url) {
    this.router.navigateByUrl(url);
}

Answer 3

You need to replace comma(,) with (+) like this

Wrong => <a [routerLink]="['/Page', page.url]" class="list-group-item">{{ page.title }}</a>
Right => <a [routerLink]="['/Page' + page.url]" class="list-group-item">{{ page.title }}</a>

Answer 4

If the path was something like

pathServedByTheController = 'foo/bar'

then in the view I can do something like

<my-button (click)="onEmitCta()" [routerLink]="['/'].concat(pathServedByTheController.split('/')).concat('')" class="banner-cta inverse shadow">NAVIGATE</my-button>

This works nicely to me!

Answer 5

If you use Angular 7 or higher, and the other answers don't work out for you, you might have some problems with your paths.

It works if you define a path with multiple slashes. However, when working with translations, I got an error.

[{
  path: 'parentX',
  children: [
   {
     path: 'y/z'
     component: AnyComponent
   }
  ]
}]

All credit goes to Dabbas' question and answer

It took me a while to land on his solution, which is why I added it here.

[{
  path: 'parentX',
  children: [
   {
     path: 'y',
     children: [
       {
        path: 'z',
        component: AnyComponent
       }
     ]
   }
  ]
}]