Error in dataTables in Server side mode in Angular

Following this guide .

categoria.component.html

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody *ngIf="categorias?.length != 0">
      <tr *ngFor="let categoria of categorias">
	      <td>{{ categorias.id }}</td>
	      <td>{{ categorias.nombre }}</td>
	      <td>{{ categorias.status }}</td>
      </tr>
  </tbody>
  <tbody *ngIf="categorias?.length == 0">
    <tr>
      <td colspan="3" class="no-data-available">No data!</td>
    </tr>
  <tbody>
</table>

categoria.component.ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { HttpClient, HttpResponse } from '@angular/common/http';

import { CategoriaService } from '../services/categoria.service';
import { Categoria } from '../models/categoria';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
    selector: 'app-categoria',
    templateUrl: '../views/categoria.component.html',
    styleUrls: ['../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaComponent implements OnInit {

  dtOptions: DataTables.Settings = {};

  public id;
  public categoria: Categoria[] = [];

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _categoriaService:CategoriaService,
    private http: HttpClient
  ){
  }

  ngOnInit(): void {

    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post(
            'http://localhost/webapp-backend/index.php/categorias/listar',
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.categoria = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'id' }, { data: 'nombre' }, { data: 'status' }]
    }
  }
}

This gives me the following error:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError (AppModule) [CategoryComponent - > HttpClient]:   StaticInjectorError (Platform: core) [CategoryComponent - > HttpClient]:     NullInjectorError: No provider for HttpClient! Error: StaticInjectorError (AppModule) [CategoryComponent - > HttpClient]:   StaticInjectorError (Platform: core) [CategoryComponent - > HttpClient]:     NullInjectorError: No provider for HttpClient!     at NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js: 1062)     at resolveToken (core.js: 1300)     at tryResolveToken (core.js: 1244)     at