Uncaught TypeError: $(…).DataTable is not a function (when using with Angular 5 project)

Arcade

I'm trying to use https://datatables.net/ jquery datatables for my angular 5 project to nicely display some data.

The error I get is "Uncaught TypeError: $(...).DataTable is not a function" at the following piece of code:

$(document).ready( function () {
    (<any>$('#example')).DataTable();
} );

I've included the following links & scripts in my index.html page:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

As you can see I load jQuery first, then the DataTables. If I don't, or reverse the order, it gives the following error: "Uncaught ReferenceError: jQuery is not defined" so my order of loading in files should be correct.

I've also installed jQuery for my entire Angular project and then added following line of code in my app.component.ts:

import * as $ from 'jquery';  

And in my angular-cli.json I've had to add:

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
],

Why do I still get the error "Uncaught TypeError: $(...).DataTable is not a function"?

EDIT: here you can see my network tab and jquery being loaded before jquery datatables: https://imgur.com/a/p7HZ9Qk .

colin

Hi again

You may need to also import the DataTables libraries -

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';

Here's that link to the page where they're doing that.

Cheers,

Colin