clean url for multiple router outlets in angular

Question

I was able to use multiple router outlets in angular with this routing

const appRoutes: Routes = [
    { path: '', component: HomeComponent, outlet: 'main' },
    { path: 'product', component: ProductDetailComponent, outlet: 'main' },
    { path: 'chat', component: ChatComponent, outlet: 'chat' }
  ]  ;

and in component html

<button
  [routerLink]="['/', {outlets: {'chat': ['chat']}}]">
  Chat
</button>

<button
  [routerLink]="['/', {outlets: {'main': ['product']}}]">
  main
</button>

<router-outlet name="main"></router-outlet>

 <router-outlet name="chat"></router-outlet>

export const AppRouting = RouterModule.forRoot(appRoutes);

and it works perfectly fine as you can see in this plunker

https://plnkr.co/edit/r8Vb9zktJblD2nNUXiBz?p=preview

However, the url for these routes are like

localhost:4200/(chat:chat//main:product)

which seems dirty and i feel not good to use in a real website

Is there anyway to clean this url in any way so it does look like a normal url and still make use of multiple router outlets? If not is it fine to use this kind of urls on a real website?

diopside diopside · Accepted Answer · 2017-08-23T07:15:23

You can disable path changes / rewrites with any router link by using the 'skipLocationChange' property:

 router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

or

<a [routerLink]="..." skipLocationChange>click me</a>

You could probably even disable path modification entirely with a runtime configuration option, I'm not sure. You could try just not providing 'Location' and 'PathLocationStrategy', but I have a feeling the router would throw exceptions without it. The angular router kinda drove me nuts, so I started writing a service to do my own path management. And that turned into writing an entirely new router. :P

I don't believe what the other commenter said is true. The path in the URL bar is just a value put there by the router. It doesn't store any information, the information is all stored within the controlling service. Its just an output basically. You can modify it however you like, as long as you make sure to configure your webserver properly so you don't get 404's on page refreshes from a non home page.

clean url for multiple router outlets in angular

1 Answers