Использование Angular Datatables не отображается

Я работаю над проектом и хочу внедрить таблицы данных Angular. показывать динамические таблицы с фильтрами и т.п.

Сначала возникает моя проблема, так как я успешно установил все зависимости, которые они запрашивают в документах, и следую шаг за шагом, но ничего не происходит.

Это мой package.json.

"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"
  }

А это мой angular.json

 "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"
            ]

А вот и мои компоненты.

device.component.ts

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

device.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>

Я также добавил его в любой .module.ts, который, по моему мнению, необходим для его работы. К сожалению, он показывает только это:

Любые идеи, что я делаю неправильно?

Изменить Извините, поскольку люди комментировали, я забыл поделиться своим app.module.ts:

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 { }