JQuery datepicker в угловом приложении 7 cli не работает

Question

Я пытаюсь заставить указатель даты jquery работать в приложении, которое я создаю. У меня есть угловое приложение. Я добавил jquery-datepicker с npm и jquery с npm.

package.json зависимости выглядят так:

"@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"

Я получаю ошибку:

ОШИБКА TypeError: jquery__WEBPACK_IMPORTED_MODULE_4 __ (...). DatePicker не является функцией

pollyfills.ts выглядит так:

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

Тогда мой компонент выглядит так:

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

Может кто-нибудь сказать мне, почему я получаю эту ошибку?

Answer 1

1. Создайте jquery.ts в том же месте, что и ваш main.ts, и вставьте в него следующее:

   import * как $ из 'jquery';

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

2. Вставьте следующее в начало вашего main.ts,

   import 'jquery';

   import 'popper.js';

   import 'bootstrap';

   импорт 'момент';

   import 'jquery-datepicker';

3. Удалите все другие ссылки на скрипты для jquery или начальной загрузки из вашего html или углового конфига.