Menggunakan Tabel Data Angular tidak muncul

Saya sedang mengerjakan sebuah proyek dan saya ingin mengimplementasikan Angular Datatables untuk menampilkan tabel dinamis dengan filter dan semacamnya.

Masalah saya muncul pada awalnya, karena saya telah berhasil menginstal semua dependensi yang mereka minta di dokumen, dan mengikuti langkah demi langkah, tetapi tidak ada yang terjadi.

Ini paket.json saya.

"dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.10",
    "@angular/http": "^6.1.10",
    "@angular/material": "^6.3.2",
    "@angular/material-moment-adapter": "^7.3.0",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/router": "^6.1.10",
    "@covalent/core": "^1.0.1",
    "@gooddata/react-components": "^6.2.0",
    "@gorniv/ngx-transfer-http": "^2.2.9",
    "@nguniversal/express-engine": "^6.0.0",
    "@ngx-meta/core": "^6.0.0-rc.1",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "angular-4-dropdown-multiselect": "0.0.3",
    "angular-checklist": "^1.3.0",
    "angular-datatables": "^8.0.0",
    "angular-md5": "^0.1.10",
    "angular-tree-component": "^8.2.0",
    "angular6-json-schema-form": "^1.0.4",
    "bootstrap": "^4.2.1",
    "browserify-fs": "^1.0.0",
    "chart.js": "^2.7.3",
    "core-js": "^2.6.3",
    "datatables.net": "^1.10.19",
    "datatables.net-dt": "^1.10.19",
    "ease-component": "github:component/ease",
    "fbp-graph": "^0.1.0",
    "font-awesome": "^4.7.0",
    "google-maps-ng2": "^1.0.10",
    "hammerjs": "^2.0.8",
    "invariant": "^2.2.4",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "mock-fs": "^4.7.0",
    "moment": "^2.24.0",
    "ngx-analytics": "^4.6.3-patch1",
    "ngx-cookie-service": "^1.0.10",
    "ngx-smart-modal": "^7.1.1",
    "ngx-toastr": "^8.8.0",
    "normalize.css": "^8.0.1",
    "path-browserify": "^1.0.0",
    "popper.js": "^1.14.7",
    "primeicons": "^1.0.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "stream-browserify": "^2.0.2",
    "the-graph": "^0.12.2",
    "timezones.json": "^1.4.7",
    "ts-md5": "^1.2.4",
    "uuid": "^3.3.2",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "^6.1.10",
    "@angular/language-service": "^6.1.10",
    "@types/datatables.net": "^1.10.17",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/jquery": "^3.3.31",
    "@types/node": "^8.10.39",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.9.2"
  }

Dan ini adalah Angular.json saya

 "styles": [
              "./node_modules/bootstrap/scss/bootstrap.scss",
              "src/styles.scss",
              "./node_modules/ngx-toastr/toastr.css",
              "./node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
 "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/jquery/dist/jquery.js",
              "./node_modules/datatables.net/js/jquery.dataTables.js"
            ]

Dan inilah komponen saya.

perangkat.component.ts

@Component({
  selector: 'app-device',
  templateUrl: './device.component.html'
})
export class DeviceComponent {}

perangkat.component.html

<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Iamout</td>
      <td>Ofinspiration</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yoda</td>
      <td>Skywalker</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Patrick</td>
      <td>Dupont</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Barack</td>
      <td>Obama</td>
    </tr>
    <tr>
      <td>7</td>
      <td>François</td>
      <td>Holland</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Michel</td>
      <td>Popo</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Chuck</td>
      <td>Norris</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Simon</td>
      <td>Robin</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Louis</td>
      <td>Lin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Zelda</td>
      <td>Link</td>
    </tr>
  </tbody>
</table>

Saya juga telah menambahkannya ke .module.ts mana pun yang menurut saya perlu agar dapat berfungsi. Sayangnya, ini hanya menampilkan ini:

Adakah ide apa yang saya lakukan salah?

Edit Maaf, saat orang berkomentar, saya lupa membagikan app.module.ts saya:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './common/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ToastrModule } from 'ngx-toastr';
import { CoreModule } from './core/core.module';
import { ModalModule } from './shared/directives/modal.module';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MatStepperModule } from '@angular/material/stepper';
import { HomeModule } from './home/home.module';
import {MatInputModule, MatDatepickerModule, MatTooltipModule} from '@angular/material';
import {MatFormFieldModule} from '@angular/material/form-field';
import {NgxSmartModalModule} from 'ngx-smart-modal';
import {NgxAnalyticsGoogleAnalytics} from 'ngx-analytics/ga';
import {NgxAnalyticsModule} from 'ngx-analytics';
import { DataTablesModule } from 'angular-datatables';


export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CoreModule,
    HomeModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatTooltipModule,
    MatInputModule,
    ToastrModule.forRoot(),
    DataTablesModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ModalModule,
    MatStepperModule,
    NgxSmartModalModule.forRoot(),
    NgxAnalyticsModule.forRoot([NgxAnalyticsGoogleAnalytics]),
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
  exports: [
  ]
})
export class AppModule { }