Angular 4 router %2F symbols in path

Question

There is some problem with angular4 router.

I have created a list of menu items and i got object from back-end for router link creation, but if menuItem.link equals to mypath/example it will be replaced by angular to mypath%2Fexample if i clicked in this item.

So routing is not working because it cannot match any routes, because i have defined it for (mypath/example)

<a [routerLink]="['/', menuItem.link, menuItem.id]" routerLinkActive="active_link">

I have tried to add /* to router link but it still not working. Thanks for your answers.

Dunleavy

Add $locationProvider.hashPrefix(''); in your config – Elohim

@Elohim is it working for angular4? – Dunleavy

Answer 1

%2F render as / character ( percent-encoding ) . the problem is in your routing configuration. make sure you use something like this :

({ path: "/*yourroute", component: yourcomponent, name: "Name" }),

basically make sure you have * after /

Homogenesis

I have already tried that. In my app i have a several modules and in my child route i have defined it like that: { path: '', component: MainChildComponent, children: [ {path: '/*mypath/example/:id', component: ExampleComponent} ] } but when i start app i have an error: Invalid configuration of route path cannot start with a slash – Dunleavy

Did you find the answer for this ? I got the exact same problem – Fraternity

Answer 2

When you use routerLink as an array like this:

<a [routerLink]="[var1, var2]">title</a>

It will URLEncode each member of the array. This is expected behavior because it assumes you would pass each variable as route or child.

If you don't want this, pass it as a string.

<a [routerLink]="var1 + var2">title</a>

Larval