I am creating a single page application using angular2 and it needs to display a different application template depending on the application routing. At the highest level, he should be able to switch between the main application template and the application administrator template.
Routing Rules:
- If the URL path starts with / auth, then it is processed by AuthApp
- If it starts with something else, then MainApp should be processed
Implementation:
For this, I have a top-level component application that takes responsibility for AuthApp or MainApp like this.
@RouteConfig([ { path: '/auth/...', component: AuthApp, as: 'Auth' }, { path: '/...', component: MainApp, as: 'Main' } ])
Then each auxiliary application (for example, AuthApp, MainApp) has its own route definitions, such as.
@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 application, where the application’s route configuration does not indicate the path (e.g. /... => MainApp), I don’t want the sub-URL. For example, if you navigate the application (routerLink) in CurrentVacancies, it updates the URL and adds an extra unwanted slash. The url now reads like this .../#//current-vacancies when I want it to read .../#/current-vacancies .
Actual application routing works when you type .../#/current-vacancies in the address bar, it goes correctly. However, when navigating through applications, the routerLink directive adds an extra unwanted slash.
I understand logically why this is happening, the root component that delegates itself to MainApp has a path to '/', and it combines with its child components to form the full URL. BUT in this case it is undesirable to have an additional slash. Any ideas how I can remove it or somehow override this behavior.
By the way, I thought about moving the routing of the MainApp component to the highest level, and although this fixes the problems with the URLs that I'm reporting, it does not allow me to switch to the upper levels of the templates.
Finally
Please help me either
- how to remove unwanted
/ on the main routes of the application "preferred option" or - as a development application, it has top-level switchable templates with routing of embedded components.
thanks