Получение ошибок jQuery после установки Angular Datatables

Question

Я следую инструкциям для установки Angular Datatables

После установки всех модулей и добавленных стилей и сценариев для angular-cli.json Я использую тестовые данные, такие как this

Но я получаю две ошибки:

ОШИБКА TypeError: $ (...). DataTable не является функцией

ОШИБКА: существует элемент NomDatatable.

Module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { UsuariosComponent } from "./usuarios.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { DefaultComponent } from "../../default.component";
import { LayoutModule } from "../../../../layouts/layout.module";
import { DataTablesModule } from "angular-datatables";

// This Module's Components
const routes: Routes = [
  {
    path: "",
    component: DefaultComponent,
    children: [
      {
        path: "",
        component: UsuariosComponent
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    LayoutModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    DataTablesModule
  ],
  declarations: [UsuariosComponent]
})
export class UsuariosModule {}

Component.ts:

import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

@Component({
  selector: "app-base-data-json",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})


export class UsuariosComponent {
  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService
  ) {}

  ngOnInit() {}

  ngAfterViewInit() {
    this._script.loadScripts("app-base-data-json", [
      "assets/app/base/usuarios/get-usuarios.js"
    ]);
  }
}

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>

Angular-cli

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

Что я делаю не так?Привет