angular-datatables ReferenceError: $ is not define

Question

I have created a Angular 4 with dot net core application using visual studio template. I want to use datatables in my app and tried to follow steps using https://l-lin.github.io/angular-datatables/#/getting-started But I received error as : ReferenceError: $ is not defined. I tried to use import * as $ from "jquery"; But did not work. Please advice. Thank you.

Answer 1

You can't follow https://l-lin.github.io/angular-datatables/#/getting-started for a .Net Core - Angular Application. The setup requires .angular_cli.json and since you're not using ng serve, it will not work that way.

Possibly you can add CDN .js packages on your ASP .NET index.cshtml file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

And add css on your _Layout.cshtml file:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />

Please check and let us know if that works. Good Luck.