CODEWITHSUNDEEP
angularangular2-routing
Jon Miles
Jon Miles

Reputation: 9863

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

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:

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

Thanks

Upvotes: 6

Views: 1131

Answers (1)

Cobus Kruger
Cobus Kruger

Reputation: 8605

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

Upvotes: 2

Related Questions