adding ngbNavLink cause all subsequent elements to be invisible

[arnaud.nauwynck]

Bug description:

after a ngbNavLink, all elements are invisible: their text content are empty.
For example

 <a ngbNavLink>SomeText</a>   
becomes 
<a></a>

Notice that in stackblitz, this is even worse, all elements are removed, not only element after the directive (?)

example code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul ngbNav class="navbar-nav mr-auto">
    <li ngbNavItem>
      <a class="nav-link" routerLink="/">Item1</a>
    </li>
    <li ngbNavItem>
      <a class="nav-link" routerLink="/">Item2</a>
    </li>
    <li ngbNavItem >
      <a ngbNavLink class="nav-link" routerLink="/">Item3</a>  <!-- ngbNavLink here ... so Item3 and Item4 are not visible (but Item1 +Item2 are OK) -->
    </li>
    <li ngbNavItem>
      <a class="nav-link" routerLink="/">Item4</a>
    </li>
  </ul>
</nav>

Link to minimally-working StackBlitz that reproduces the issue:

https://ng-bootstrap-bug-ngbnavlink-3wbhwp.stackblitz.io/

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 17.0.9

ng-bootstrap: 16.0.0

Bootstrap:

[JB Nizet]

The problem comes from the fact that you're using the routerLink directive without having provided the router (with provideRouter([]) when bootstrapping the application. Open the browser console, and you'll see the error causing the issue.