Angular 2 routerLinkActive always active for base path
This appears to be a known issue. A few workarounds are detailed in this thread: https://github.com/angular/angular/issues/8397
From Github Thread:
"you need to add an additional option to your routerLink."
[routerLinkActiveOptions]="{ exact: true }"
Then your home route will only be active if you're on the exact route. The home route with an empty path will be a partial match on all routes
As suggested by @TomRaine in this answer, you can add the property [routerLinkActiveOptions]="{ exact: true }"
to your element:
<nav>
<a [routerLink]="['/']"
[routerLinkActive]="['nav-active']"
[routerLinkActiveOptions]="{ exact: true }">
HOME
</a>
...
</nav>