Datatables style and sorting feature doesn't load on first load of the browser in Angular.

MinhajBoss

here is the video demo:
https://streamable.com/t49kwd

Debugger code (debug.datatables.net):

Getting an error on the console:
https://images2.imgbox.com/4f/0d/0hOjsLIu_o.png
create_dept:1
Refused to apply style from 'http://localhost:4200/node_modules/datatables.net-dt/css/jquery.dataTables.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.:

Datatables style and sorting feature doesn't load on first load of the browser in Angular. but it loads properly when I reload the browser

here is the code I have implemented:
HTML CODE:
**

Department ID	Department Name	Department Manager	Actions
{{dept.id}}	{{dept.dept_name}}	{{dept.dept_manager}}	Edit Delete

**

Code on Component:

**ngAfterViewInit(): void {
// this method if for data table
// tuts: https://webdamn.com/how-to-use-datatables-in-angular-8/
// https://datatables.net/examples/index
$(document).ready(function () {
$('#table_id').DataTable({
destroy: true
});

});

}**

kthorngren

I'm not familiar with Angular but the error:

Refused to apply style from 'http://localhost:4200/node_modules/datatables.net-dt/css/jquery.dataTables.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.:

Might be related to the Angular environment. Not sure if it will help but see this SO thread.

Is this the only Datatable config reference you have?

$('#table_id').DataTable({
destroy: true
});

In looking at the video it looks like the table has rows then you click a column to sort and the rows disappear. And it has something like Showing 0 to 0 of 0 entries. Before sorting does it show the same Showing 0 to 0 of 0 entries? This suggests the HTML table is populated after Datatables is initialized. In this case Datatables doesn't know about the added rows. Make sure to initialize Datatables after the HTML table is populated. Also see this FAQ.

If this doesn't help then please post a link to your page or a test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin