Angular 14 : Header buttons disappear when routeLink added inside <a> tag for redirecting to a page

I am facing an issue while creating a link for header buttons.
I created the header using below code snippet for the project. When I add routeLink inside the <a> tag for the [home and Countries] button, both buttons disappear from the head. If I remove it from the <a> buttons are shown in the header.

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link "  routerLink="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="countries">Countries</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

When I check on console The names(Home and Countries) is missing(between) from the '` tag.

How can I fix this?