Error: Invalid providers for "MyTableComponent" - only instances of Provider and Type are allowed, got: [?undefined?] (ANGULAR 2)?

Question

typescript

Good evening.
The above error is displayed.

Component and service scripts (Full code, right after the screenshot):

myTable.component.ts

import { Component } from "@angular/core";
import { ProductsService } from "../index";

@Component({
  moduleId: module.id,
  selector: "my-table",
  templateUrl: "myTable.component.html",
  styleUrls: ["myTable.component.css"],
  providers: [ProductsService],
  inputs: ["rows"]
})
export class MyTableComponent {
  rows: number;
  info = [];
  categories = {
    category1: [],
    category2: [],
    category3: []
  };
  newProductName: string = "Default Name";
  newProductPrice: number = 0;

  constructor(private products: ProductsService) {}

  getCategory(product) {
    var result;
    if (product.price <= 300) {
      result = 'Category 1';
      this.categories.category1.push(product);
    } else if (product.price <= 700 && product.price > 300) {
      result = 'Category 2';
      this.categories.category2.push(product);
    } else if(product.price > 700) { 
      result = 'Category 3';
      this.categories.category3.push(product);
    }
    return result;
  }

  sort(cat) {
    let that = this;
    switch(cat) {
      case '*':
        sorting(this.info);
        break;
      case 1:
        sorting(this.categories.category1);
        break;
      case 2:
        sorting(this.categories.category2);
        break;
      case 3:
        sorting(this.categories.category3);
        break;
    }

    function sorting(category) {
      that.info.map(function(product) {
        product.hiddenByCategory = true;
      });
      category.map(function(product) {
        product.hiddenByCategory = false;
      });
    }
  }

  addProduct() {
    let product = {
      id: this.info.length + 1,
      name: this.newProductName,
      price: this.newProductPrice
    };

    this.info.push(product);
  }

  ngOnInit() {
    this.info = this.products.products.slice(0, this.rows);
  }
}

products.ts (Service)

import { Injectable } from '@angular/core';

@Injectable()
export class ProductsService {
  products = [
    { id: 1, name: "product 1 ", price: 100 },
    { id: 2, name: "product 2 ", price: 200 },
    { id: 3, name: "product 3 ", price: 300 },
    { id: 4, name: "product 4 ", price: 400 },
    { id: 5, name: "product 5 ", price: 500 },
    { id: 6, name: "product 6 ", price: 600 },
    { id: 7, name: "product 7 ", price: 700 },
    { id: 8, name: "product 8 ", price: 800 },
    { id: 9, name: "product 9 ", price: 900 },
    { id: 10, name: "product 10", price: 1000 }
  ];

  addProduct(newProduct) {
    this.products.push(newProduct);
  }
}

Identical code here: plunker , the only difference is that the plunker doesn't throw errors.
If you have read up to this line, then thank you very much for not passing by indifferently.
I really hope for your help. Thank you in advance.