Как правильно использовать Resolver-ы в ангуляре?

Question

[laravel_creative_3103]

Resolve:

import { Injectable } from '@angular/core';
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from '@angular/router';
import { Observable, EMPTY } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { IProducts } from '../models/products';
import { ProductsService } from './products.service';
import { HttpClientModule } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class ProductResolver implements Resolve<IProducts> {
  constructor(private productService: ProductsService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<IProducts> {
    switch (state.url) {
      case `http://localhost:3000/product/${route.params?.['id']}`:
        return this.productService.getProduct(route.params?.['id']).pipe(
          catchError((error) => {
            console.error('Error fetching product:', error);
            return EMPTY; // Возвращаем пустой Observable в случае ошибки
          })
        );
      default:
        return EMPTY; // Возвращаем пустой Observable, если URL не соответствует
    }
  }
}

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { IProducts } from '../models/products';

@Injectable({
  providedIn: 'root',
})
export class ProductsService {
  url: string = 'http://localhost:3000/products';

  constructor(private http: HttpClient) {}

  getProducts() {
    const products = this.http.get<IProducts[]>(this.url);

    return products;
  }

  getProduct(id: number) {
    const product = this.http.get<IProducts>(`${this.url}/${id}`);

    return product;
  }
}

ERROR NullInjectorError: R3InjectorError(Environment Injector)[_ProductResolver -> _ProductsService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!

Выходит такая ошибка, в чем может быть проблема