ANGULAR - Can't bind to 'dtOptions' since it isn't a known property of 'table'

Bonjour,

Dans le cadre du développement d'une appli web avec Angular, je souhaite utiliser une datables.
Pour celà j'ai donc installé les différents modules nécessaires, comme décrit sur ce site :
https://l-lin.github.io/angular-datatables/#/getting-started

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

Mon code (tout simple) récupère une liste d'achet via un service et cherche simplement à l'afficher :

purchases-list.component.ts

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import { Purchase } from '../../models/Purchase.model';
import { PurchasesService } from '../../services/Purchases.service';

@Component({
  selector: 'app-purchases-list',
  templateUrl: './purchases-list.component.html',
  styleUrls: ['./purchases-list.component.css']
})
export class PurchasesListComponent implements OnInit, AfterViewInit, OnDestroy {

  private purchases: Purchase[] = [];
  purchasesSubscription: Subscription;

  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private purchasesService: PurchasesService) { }

  ngOnInit() {
    this.purchasesSubscription = this.purchasesService.purchasesSubject.subscribe(
      (purchases: Purchase[]) => {
        this.purchases = purchases;
      }
    );
    this.purchasesService.getAll();
  }

  ngAfterViewInit() {
    this.dtTrigger.next();
  }

  ngOnDestroy() {
    this.purchasesSubscription.unsubscribe();
    this.dtTrigger.unsubscribe();
  }

}

purchases-list.component.html

<table dataTable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered">
  <thead>
    <tr>
      <td>Demandeur</td>
      <td>Projet</td>
      <td>Nombre d'articles</td>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let purchase of purchases">
      <td>{{ purchase.loginUser }}</td>
      <td>{{ purchase.project }}</td>
      <td>{{ purchase.articles.length }}</td>
    </tr>
  </tbody>
</table>

A la compilation, tout se passe normalement, mais lorsque je lance mon appli, la page reste blanche et une erreur apparaît :
SCRIPT5022: Template parse errors: Can't bind to 'dtOptions' since it isn't a known property of 'table'.

Je ne sais absolument pas d'où elle peut provenir... J'ai déjà cherché sur plusieurs forums mais aucune solution n'a marché chez moi !
Je tente donc ma chance ici.

Merci par avance !!

Pour vous aider, voici le contenu de mon app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { DataTablesModule } from 'angular-datatables';
import { PurchasesService } from '../services/Purchases.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app/app.component';
import { PurchasesListComponent } from './purchases-list/purchases-list.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NewPurchaseComponent,
    PurchasesListComponent,
    HomeComponent,
    ErrorComponent,
  ],
  imports: [
    BrowserModule,
    DataTablesModule.forRoot(),
    AppRoutingModule
  ],
  providers: [PurchasesService],
  bootstrap: [AppComponent]
})

export class AppModule {

  constructor() { }
}

Et de mon packages.json

{
  "name": "order",
  "version": "0.0.0",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "^7.2.15",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "angular-datatables": "^8.0.0",
    "core-js": "^2.5.4",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "jquery": "^3.4.1",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/datatables.net": "^1.10.17",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.29",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}