How to achieve angular2 nested component routing without the additional slash in url path

Question

I'm building a single page application using angular2 and it needs to render a different application template dependent on the app's routing. At the highest level it should be able to switch between the main applications template and the app's admin template.

Routing Rules:

If the url path starts with /auth then it's handled by the AuthApp
If it starts with anything else then should be handled by the MainApp

Implementation:

In order to achieve this I have a component app at the highest level which delegates off responsibility to either the AuthApp or MainApp, like this.

@RouteConfig([
  {
    path: '/auth/...',
    component: AuthApp,
    as: 'Auth'
  },
  {
    path: '/...',
    component: MainApp,
    as: 'Main'
  }
])

Then each sub-app (e.g. AuthApp, MainApp) has it's own route definitions such as this.

@RouteConfig([
  { path: '/current-vacancies', CurrentVacancies, as: 'CurrentVacancies', useAsDefault: true },
  { path: '/candidates/create', CandidateCreate, as: 'CandidateCreate'},
  ...
])

Functionally and from a design point of view this works great!

Problem:

In the main app, where the application's route config doesn't specify a path (e.g. /... => MainApp) I do not want a nested url path. For example, if you navigate via the app (routerLink) to CurrentVacancies it updates the url and prepends an extra unwanted forward slash. The url path now reads like this .../#//current-vacancies when I want it to read .../#/current-vacancies.

The application routing actual works when you type .../#/current-vacancies in the address bar, it transitions correctly. Yet navigating via the applications routerLink directive prepends the addition unwanted forward slash.

I understand logically why this is happening, the root component which delegates off to MainApp has a path of '/' and it's concatenated together with it's child components to form a full url path. BUT in this instance it's not desirable to have the additional slash. Any ideas how I can remove it, or somehow override this behaviour.

Btw, I've considered moving the MainApp component routing to the top most level and although this does resolve the url path issues I'm reporting, it does not allow me to switch templates at the top-level.

In summary

Please help me with, either

how to remove the unwanted / on main app routes "preferred option", or
how design app to have switchable top-level templates with nested component routing.

Thanks

That's good enough for me, hopefully it will make it into the next beta release. Happy to wait a little while as I appreciate this is all pretty new. — Jonathan Miles

Cobus Kruger Cobus Kruger · Accepted Answer · 2017-07-26T09:42:06

This is working today (Angular 4) and seems to have been fixed before Angular 2 final was released.

How to achieve angular2 nested component routing without the additional slash in url path

1 Answers