I seem to be encountering a problem with the Angular app I'm currently developing. It appears that when using relative paths with routerLink throughout the application, it fails to work properly. There are no errors thrown and the navigation does not occur as expected; this issue persists whether navigating to top-level components or child components. However, when absolute paths are used, everything functions correctly.
I've spent quite some time trying to troubleshoot this issue, but I haven't come across a similar problem on platforms like Stack Overflow. I am unsure where to begin looking for a solution, so any guidance would be greatly appreciated.
Edit: It seems that the issue only occurs once when the app initially loads, if the first link is clicked. Subsequent clicks do not trigger any action.
Update: Following suggestions, I have replicated the problem in a StackBlitz environment. Please refer to this link and review the comments in nav-component.component.html.
For example, the first link in the menu does not function at all, while all other links perform as expected. This behavior has been consistent across all links within the application:
<div class="list-group menu-list-group">
<a routerLink="./artists-profiles"
class="list-group-item btn btn-primary"
(click)="artistsMenuChoice('artist-profiles')">
Artist Profiles
</a>
<a [routerLink]="['/artists/artist-videos']"
class="list-group-item btn btn-primary">
Videos
</a>
<a [routerLink]="['/artists/artist-endorsement']"
class="list-group-item btn btn-primary">
Get Endorsed
</a>
</div>
<hr>
<div class="list-group menu-list-group">
<a href="#" class="list-group-item btn btn-primary">
Shopping Cart
</a>
<a href="#" class="list-group-item btn btn-primary">
{{ menuCredAction }}
</a>
</div>
Below is my app-routing module configuration:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent},
{ path: 'artists', component: ArtistsComponent, children: [
{path: '', component: ArtistsStartComponent},
{path: 'artist-profiles', component: ArtistProfilesComponent},
{path: 'artist-videos', component: ArtistVideosComponent},
{path: 'artist-endorsement', component: ArtistsGetEndorsedComponent},
] },
{ path: 'about', component: AboutComponent, children: [
{path: '', component: AboutStartComponent}
] },
{ path: 'shop', component: ShopComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'auth', component: AuthComponent },
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
],
})
export class AppRoutingModule {
}