Angular 6 routerLinkActive not working

Question

I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:

header.component.html  
    <div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
  <li class="main-links" [routerLinkActive]="['active']">
    <a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
  </li>
  <li class="main-links">
    <a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
  </li>
</ul>

This is my declaration for active in header.component.less:

    .active {
color: #009fdb;
font-family: font-bold;

}

When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from @angular/core.

I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.

I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.

After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?

Answer 1

Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file

import { RouterModule } from '@angular/router';
// some other imports here

@NgModule({
  imports: [
    RouterModule
  ],
  exports: [
    // export UI components
  ],
  declarations: [
    // declare UI components
  ]
})

When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML

<li class="nav-list">
  <a routerLinkActive="active" 
    [routerLinkActiveOptions]="{exact: true}"
    routerLink="/" 
    href="/">
    <i class="material-icons nav-link-icon">person</i>
    <span class="nav-link-text">Profile</span>
  </a>
</li>

The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.