Мои ссылки на теги не работают в моем файле app.comComponent.html для моего углового проекта. ⇐ Html

[Anonymous]

Сейчас я работаю с маршрутами, и у меня есть ссылка, которая должна вести на определенный путь, но по какой-то причине она не работает. Когда я вручную ввожу путь в строку поиска веб-браузера, он работает. Итак, я думаю, что это что-то в моем html. На этом веб-сайте вы должны иметь возможность щелкнуть ссылку на боковой панели, которая приведет к появлению определенной категории продуктов интернет-магазина. Также нет ошибок компиляции.
Это мой HTML:

• 
  19.22 2
  
  
  
  
  
  
  
  
  
  
  >
  
  
  
  
  
  
  
  • About Us
  • Contact Us
  • Help
  
  Компонент служб:
  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Product } from '../common/product';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Injectable({
  providedIn: 'root'
  })
  export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';
  constructor(private httpClient: HttpClient) { }
  
  getProductList(theCategoryId: number): Observable
  {
  
  //need to build URL based on category id
  const searchUrl = `${this.baseUrl}/search/findByCategoryId?id=${theCategoryId}`;
  
  return this.httpClient.get(searchUrl).pipe(
  map(response => response._embedded.products)
  );
  }
  }
  interface GetResponse{
  _embedded: {
  products: Product[];
  }
  }
  
  Компонент списка продуктов:
  import { Component, OnInit } from '@angular/core';
  import { ProductService } from '../../services/product.service';
  import { Product } from '../../common/product';
  import { CommonModule } from '@angular/common';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
  selector: 'app-product-list',
  imports: [CommonModule],
  templateUrl: './product-list-grid.component.html',
  styleUrl: './product-list.component.css'
  })
  export class ProductListComponent implements OnInit{
  products: Product[] = [];
  currentCategoryId: number = 1;
  
  constructor(private productService: ProductService,
  private route: ActivatedRoute) { }
  
  ngOnInit() {
  this.route.paramMap.subscribe(() => {
  this.listProducts();
  });
  }
  
  listProducts() {
  
  // check if "id" parameter is available
  const hasCategoryId: boolean = this.route.snapshot.paramMap.has('id');
  
  if (hasCategoryId) {
  // get the "id" param string. convert string to a number using the "+" symbol
  this.currentCategoryId = +this.route.snapshot.paramMap.get('id')!;
  }
  else {
  // not category id available ... default to category id 1
  this.currentCategoryId = 1;
  }
  
  // now get the products for the given category id
  this.productService.getProductList(this.currentCategoryId).subscribe(
  data => {
  this.products = data;
  }
  )
  }
  }
  
  
  Подробнее здесь: https://stackoverflow.com/questions/793 ... ular-proje