routerLinkActive is applied to every fragment (anchor) link [duplicate]

In my header in every link I have routerLinkActive, but the style-class is applied to every single link because, I guess, Angular doesn't care when it's fragments. Does anyone know how to apple routerLinkActive only when the fragment (anchor) link is clicked?

I expected the routerLinkActive to only be applied when I manually click the link in the header, but the routerLinkActive is applied to all links.

<ul class="nav-links">
<li class="nav-link-item">
<a class="header__link" routerLink="" fragment="home" routerLinkActive="active-link">{{ 'home' | transloco }}</a>
</li>
<li class="nav-link-item">
<a class="header__link" routerLink="" fragment="services" routerLinkActive="active-link">{{ 'ourServices' | transloco }}</a>
</li>
<li class="nav-link-item">
<a class="header__link" routerLink="" fragment="domestic-product" routerLinkActive="active-link">{{ 'domesticProduct' | transloco }}</a>
</li>
<li class="nav-link-item">
<a class="header__link" routerLink="" fragment="we-offer" routerLinkActive="active-link">{{ 'whatWeOffer' | transloco }}</a>
</li>
</ul>


import { Routes } from '@angular/router';
import { HomeComponent } from './main-layout/pages/home/home.component';
import { NotFoundPageComponent } from './shared/components/not-found-page/not-found-page.component';

export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'error', component: NotFoundPageComponent },
{ path: '**', redirectTo: 'error' },
];

Continue reading...