I currently have a range of components that utilize the router with absolute paths for navigation in certain scenarios.
Let's take for example the EntityComponent, which has an action that navigates to /otherEntity/* URLs.
This setup works perfectly.
Recently, I introduced another top-level component and configured the router with the URL localhost/PREFIX/ to target that component. I also included the existing routes as child routes.
While I can access the existing components using localhost/prefix/entities, the navigation within these components is now broken. Whenever I perform actions, I am directed to /otherEntity/ instead of /prefix/otherEntity.
Is there a solution to this issue? I try to use relative paths wherever possible for some components, but there are certain cases where it's not feasible.
Main routes:
const routes: Routes = [
{
path: '',
component: AppComponent,
children: [
applicationRoutes
]
},
{
path: 'prefix/',
component: AppPrefixComponent,
children: [
applicationRoutes
],
},
]
Application level routes:
export const applicationRoutes: Routes =
[
{
path: 'entities',
component: EntityComponent
},
{
path: 'anotherEntity',
component: AnotherEntityComponent,
},
]
Sample for Navigation:
export class EntityComponent {
navigateToAnotherEntity() {
this.router.navigate('/anotherEntity');
}
}