0

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?

Kaneki21
  • 1,323
  • 2
  • 4
  • 22
ritik
  • 1
  • 1
  • this looks fine(https://stackblitz.com/edit/angular-router-basic-example-n2puqj), can you add a reproducible example?(Note: I just removed the collapse class from #navbarNav element for visibility) – harpal Sep 22 '22 at 16:40
  • Removing collapse class does not work. And what do you mean by "reproducible example". – ritik Sep 22 '22 at 18:49
  • Everything works fine . Till I add routeLink inside the tags – ritik Sep 22 '22 at 18:59
  • can you share your app module routing configuration ? hope you have followed the steps for adding routing from [docs](https://angular.io/guide/router) – Kaneki21 Sep 24 '22 at 12:26
  • thanks for docs. I think I missed something. – ritik Sep 27 '22 at 15:53

2 Answers2

0

The problem is form app-routing.module.ts file try Remove "/" from path

Fouad Abatouy
  • 1
0

I had the same issue I had put the routes like this before

const routes: Routes = [
  {path: "/", component: HomeComponent },
];

so just change the routes to

const routes: Routes = [
  {path: "", component: HomeComponent },
];
Abhilash Narayan
  • 157
  • 2
  • 14