JQuery datepicker in angular 7 cli app not working

Question

I am trying to get the jquery datepicker to work in the application that I'm building. I have an angular cli app. I've added jquery-datepicker with npm and jquery with npm.

package.json dependencies looks like:

"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.1",
"bootstrap": "^4.2.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"jquery-datepicker": "^1.12.3",
"moment": "^2.23.0",
"popper.js": "^1.14.6",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"

The error that I get is:

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__(...).datepicker is not a function

pollyfills.ts looks like:

import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'moment';
import 'jquery-datepicker';

Then my component looks like:

ngOnInit() {
    $( "#datepicker" ).datepicker();
  }

Can someone tell me why I would be getting this error?

Answer 1

1. Create a jquery.ts in the same location as your main.ts and paste the following in it,

   import * as $ from 'jquery';

   window['jQuery'] = window['$'] = $;

2. Insert the following at the top of your main.ts,

   import 'jquery';

   import 'popper.js';

   import 'bootstrap';

   import 'moment';

   import 'jquery-datepicker';

3. Remove any other script references to jquery or bootstrap from your html or angular cli config.