Import 3rd Party JS file into Angular component

Question

I'm trying to import this DataTable Jquery plugin in Angular 5 (I include both scripts after JQuery and Bootstrap have been loaded)

" https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js " " https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js "

But I keep getting this error:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery_dist_jquery___default(...)(...).DataTable is not a function

I've added the dependencies to the angular-cli.json :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../3rdParty/data-tables/js/jquery.dataTables.min.js",
        "../3rdParty/data-tables/js/dataTables.bootstrap.min.js"
      ],

and in my component.ts file I import jquery and the plugin

import $ from 'jquery/dist/jquery';
import * as dt1 from '../../../../../3rdParty/jquery.dataTables.min';
import * as dt2 from '../../../../../3rdParty/dataTables.bootstrap.min';

Answer 1

Have you seen this ? DataTables adapted for Angular, works with v5.0.0