Prova de Conceito - Angular

Professor, terminado o primeiro modulo comecei a praticar e me emperrei no código.. estou conhecendo as coisa no angular.. e tentando assimilar todo esse novo conhecimento.

Estou fazendo um modulo para pequisa de produtos, fiz a seguinte estrutura; => App => products => products-list => product

no folder product, criei o arquivos;

product interface

prodcut service => consumir minha api e voltar com os dados.

import { HttpClient } from '@angular/common/http';
import { Product } from "./produto";

const API = "http://localhost:3001";

export class ProductService {

  constructor(private http: HttpClient) {}

  listProducts() {
    return this.http.get<Product[]>(API + "/products");
  }
}

product component ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'bml-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  @Input() id: number = 0;
  @Input() description: string = '';
  @Input() url: string = '';
  @Input() alt: string = '';
  @Input() price: string = '';
  btnComprar: string = 'Comprar';

  constructor() { }

  ngOnInit() {
  }

}

product component html

<div class="col col-sm-3">
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h3 class="my-0 font-weight-normal">{{ description }}</h3>
    </div>
    <div class="text-center">
      <img class="img-thumbnail bml-img" [src]="url" [alt]="alt">
    </div>
    <div class="card-body">
      <h4 class="card-title pricing-card-title mb-4"> {{ price }} <small class="text-muted">á vista</small></h4>
      <button type="button" class="btn btn-lg btn-block btn-primary">{{ btnComprar }}</button>
    </div>
  </div>
</div>

no products list component ts => fiz a chamada do serviço

import { Component, OnInit } from '@angular/core';

import { Product } from './product/produto';
import { ProductService } from './product/produtc.service';

@Component({
  selector: 'bml-products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.css']
})
export class ProductsListComponent implements OnInit {

  products: Product[] = [];

  constructor(private productsListService: ProductService,) { }

  ngOnInit(){
    this.productsListService
      .listProducts()
      .subscribe( product => { this.products = this.products.concat(product); });
  }
}

products list component html

<div *ngFor='let product of products'>
    <bml-product
        description='product.description'
        url='product.url'
        price='product.price'>
    </bml-product>
</div>

no app component html, faço a chamada do;

<bml-products-list></bml-products-list>

Tenho somente o erro no console => ERROR Error: "StaticInjectorError(AppModule)[ProductsListComponent -> ProductService]: StaticInjectorError(Platform: core)[ProductsListComponent -> ProductService]: NullInjectorError: No provider for ProductService!"