href и routerlink моего подменю не работают, но другие ссылки в проекте работают нормально

Я использую Angular 7 для создания веб-сайта, и у меня динамически создается панель меню навигации. Все пункты меню работают отлично (используя href ), маршрутизация работает нормально. Но в одном компоненте у меня есть другие ссылки, которые должны направлять меня к другим компонентам, но только те и те не работают. Я пытался использовать href и routerLink, но ни один из них не работает. Но когда я просматриваю страницу и вручную нажимаю на ссылку в href, она работает.

ссылка здесь: "product/{{categ.id}}. Я покажу вам свои маршруты.

<div class="row">
  <div class="menu-cat mx-auto">
    <ul class="nav nav-pills" id="pills-tab" role="tablist">
      <li *ngFor="let categ of cat" class="nav-item">
        <a class="nav-link active" id="pizza-tab" data-toggle="pill" href="product/{{categ.id}}" role="tab" aria-controls="pizza"
          aria-selected="true">{{categ.name}}</a>
      </li> 
    </ul>
  </div>
</div>

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: ':categ/:id', component: PastriesComponent  },
    { path: 'Ice cream', component: IcecreamComponent },
    { path: 'FreakShake', component: FreakShakesComponent },
    { path: 'product/:id', component: EclairComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' }
];

поскольку сопоставление маршрутов совпадает, я должен быть отправлен в EclairComponent, но когда я нажимаю на ссылку, ничего не происходит. Тем не менее, если я вручную пишу ссылку в строке поиска, она работает.

Спасибо заранее за вашу помощь.