Angular Datatable не может использовать jquery

Я новичок в angular и datatables. Я следую документации по созданию Angular DataTable, но вижу эту ошибку, когда отображаю страницу, и нет заполнения, только чистая таблица.

core.js:6142 ERROR ReferenceError: $ is not defined
    at angular-datatables.directive.js:72
    at ZoneDelegate.invokeTask (zone-evergreen.js:402)
    at Object.onInvokeTask (core.js:28500)
    at ZoneDelegate.invokeTask (zone-evergreen.js:401)
    at Zone.runTask (zone-evergreen.js:174)
    at invokeTask (zone-evergreen.js:483)
    at ZoneTask.invoke (zone-evergreen.js:472)
    at timer (zone-evergreen.js:2538)

Я считаю, что не могу настроить dtOptions, потому что он не смог найти jquery. Я использовал ng add angular-datatables для установки таблиц данных. Вот мой файл angular.json.

  "projects": {
    "library1": {
      "projectType": "library",
      "root": "projects/library1",
      "sourceRoot": "projects/library1/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/library1/tsconfig.lib.json",
            "project": "projects/library1/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/library1/tsconfig.lib.prod.json"
            }
         }       
      }
    },
    "library2": {
      "projectType": "library",
      "root": "projects/library2",
      "sourceRoot": "projects/library2/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/library2/tsconfig.lib.json",
            "project": "projects/library2/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/library2/tsconfig.lib.prod.json"
            }
          }    
       }
  },
    "main": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../static/dist",
            "index": "",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ]
          }
...
        },
      }
    }
  },

У меня есть две библиотеки, которые будут использовать эту директиву datatables. Я прямо сейчас пытаюсь добавить данные в библиотеку1. Вот как я настроил модуль.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
import {HttpClientModule, HttpClient} from "@angular/common/http";
import { DataTablesModule } from "angular-datatables";

@NgModule({
  declarations: [DataFindComponent, DataCreateComponent, DataUpdateComponent],
  imports: [
    DataTablesModule,
    DataRoutingModule,
    CommonModule,
    HttpClientModule
  ],
  providers: [HttpClient]
})
export class DataModule { }

Вот мой DataFindComponent

import { Component, OnDestroy, OnInit } from '@angular/core';
import { DataService } from "../../util";
import { Data } from "../data";
import { DataService } from "../data.service";
import { Subject } from "rxjs";

@Component({
  selector: 'app-data-find',
  templateUrl: './data-find.component.html',
  styleUrls: ['./data-find.component.scss']
})
export class DataFindComponent implements OnDestroy, OnInit {

  dtOptions: DataTables.Settings = {};

  pageName: string;

  messages: any[];

  datas: Data[];

  dtTrigger: Subject<any> = new Subject<any>();

  constructor(private data: DataService,
              private dataService: DataService) {
  }

  ngOnInit(): void {
    this.pageName = this.data.appData[DataService.PAGE_NAME];

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      searching: false,
    }

    this.dataService.query({}).subscribe(data => {
      this.datas= data;

      this.dtTrigger.next();
    }, error => console.log(error));
  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

Вот мой html

   <table class="table table-sm row-border hover" datatable [dtOptions]="dtOptions"
               [dtTrigger]="dtTrigger">
          <thead>
            <th>ID</th>
            <th>name</th>
            <th>surname</th>
          </thead>
          <tbody>
          <tr *ngFor="let data of datas">
            <td>{{ data.id }}</td>
            <td>{{ data.name}}</td>
            <td>{{ data.surname}}</td>
          </tr>
          </tbody>
        </table>

Вот мой файл package.json

{
  "name": "main",
  "version": "0.1.0-SNAPSHOT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --deploy-url /static/dist/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "peerDependencies": {
    "library1": "0.1.0-SNAPSHOT",
    "library2": "0.1.0-SNAPSHOT"
  },
  "dependencies": {
    "@angular/animations": "~11.1.2",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/localize": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/router": "~11.1.2",
    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
    "angular-datatables": "^11.1.1",
    "bootstrap": "^4.5.0",
    "datatables.net": "^1.10.20",
    "datatables.net-dt": "^1.10.20",
    "jquery": "^3.4.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler-cli": "~11.1.2",
    "@types/datatables.net": "^1.10.18",
    "@types/jasmine": "~3.6.0",
    "@types/jquery": "^3.3.33",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^11.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.2"
  }
}

Я не могу понять, почему он не может найти jquery. Кто-нибудь может увидеть проблему с этим?