Angular2 : incorrect encoding of colon in the URL

Question

I'm trying to build an app with two router-outlets so that one of them would be a left menu. I have a link in this left menu that loads a component in the main outlet, but if I click on it, the left-menu component disappears, so I added (left-menu:leftmenu) to it. This is the template for the left menu (left-menu.component.html):

<div class="leftmenu">
  <a routerLink="/form(left-menu:left-menu)">Go to the form!</a>
</div>

And this is the routes array that I pass to RouterModule.forRoot(routes):

  const appRoutes: Routes = [
  {
    path: '',
    component: LeftMenuComponent,
    outlet: 'left-menu',
    pathMatch: 'full'
  },
  {
    path: 'leftmenu',
    component: LeftMenuComponent,
    outlet: 'left-menu',
  },
  {
    path: 'form',
    component: ProjectFormComponent
  },
  {
    path: '**', redirectTo: ''
  }];

But what I see is that the rendered URL in the link is not /form(left-menu:left-menu) but /form(left-menu%3Aleft-menu), so the link doesn't work. On the other hand, if I write the right URL (with the colon) in the browser it works properly (that is, the ProjectFormComponent is loaded and the LeftMenuComponent remains in the left outlet).

Anyone knows why this happens?

Thank you in advance.

does it work if you put square brackets around the routerlink, and surround the url in single quotes, eg `[routerLink]="'form(left-menu:left-menu)'"`? — danimal, Apr 22 '17 at 20:16
I don't want to take credit for this solution by providing it as an answer, but this works. https://stackoverflow.com/questions/41476193/angular-2-disable-url-encoding — Will, Jul 19 '17 at 16:32

Angular2 : incorrect encoding of colon in the URL

0 Answers0