routing is not working in src/index.html angular

Question

Routing is not working in src/index.html angular.

I mean I have a header some links there to navigate:

    <header>
      <div class="logo">
        <div class="logo-img-div">
          <img src="../../assets/img/logo.png" alt="" class="logo-img" />
        </div>
      </div>

      <nav>
        <div class="elements">
          <ul>
            <li class="header-item">
              <a routerLink="/">Home</a>
            </li>
            <li class="header-item">
              <a routerLink="/category">Category</a>
            </li>
            <li class="header-item">
              <a routerLink="/about">About us</a>
            </li>
            <li class="header-item">
              <a routerLink="/contact">Contact us</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

But when I click on, nothing happens. I have also added paths properly, as in the component if I paste the same code, it works fine but appears twice.

Answer 1

routerLink is an angular directive, it won't work in index.html, It works inside a component of some module. You can copy your code to app.component.html

For more details, read this article

Answer 2

That is because your index.html is placeholder for angular to render the component.

You are using routerLink inside index.html but you dont have router module so you cant use routerLink.

That kind of routing only work inside angular component