Jquery not defined in angular 6 after upgrade

Question

I recently upgraded my application from Angular-5 to Angular-6 and Jquery suddenly stopped working. It was working fine in Angular 5 but no longer working in Angular 6. The error states: $(...).DataTable is not a function

Answer 1

Make sure you have jQuery added into your angular.json file

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

And make sure to add the following to your component

declare var jquery:any;
declare var $ :any;

Outside the export class.

By the way it's not the best practice to use jQuery with Angular, I recommend you using a directive for the plugin instead:

you can check it out here: Angular Datatables directive