Angular 16独立依赖项注入问题

以下是我的包含服务的独立api调用:

import { Injectable} from '@angular/core';
import { ProductEndPoints } from '../../constants/apiConstants/product-endpoints';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment.development';
import { product } from '../../models/product.types';
@Injectable({
  providedIn: 'root',
})
export class ProductService {

  constructor(private http:HttpClient) { }

  getAllProducts():Observable<product[]>{
     return this.http.get<product[]>(environment.apiUrl+`${ProductEndPoints.getAllProduct}`)
  }

  getProductDetailById(id:string):Observable<product>{
    return this.http.get<product>(environment.apiUrl+`${ProductEndPoints}/${id}`)
  }
}

我还将此服务添加到目标组件的提供者数组中。

我在将其注入独立组件时遇到的错误是:

src_app_pages_Product_product-routing_ts.js:2 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[ProductListComponent])[HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
NullInjectorError: R3InjectorError(Standalone[ProductListComponent])[HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (core.mjs:8890:27)
    at R3Injector.get (core.mjs:9334:33)
    at R3Injector.get (core.mjs:9334:33)
    at R3Injector.get (core.mjs:9334:33)
    at R3Injector.get (core.mjs:9334:33)
    at ChainedInjector.get (core.mjs:14018:36)
    at lookupTokenUsingModuleInjector (core.mjs:4608:39)
    at getOrCreateInjectable (core.mjs:4656:12)
    at ɵɵdirectiveInject (core.mjs:11801:19)
    at Module.ɵɵinject (core.mjs:848:60)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10757:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11070:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)