Angular 7 cli 应用程序中的 JQuery datepicker 不起作用

Question

我正在尝试让 jquery datepicker 在我正在构建的应用程序中工作。我有一个 Angular cli 应用程序。我已经添加了 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"

我得到的错误是:

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

pollyfills.ts 看起来像:

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

然后我的组件看起来像:

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

有人可以告诉我为什么会收到此错误吗？

Answer 1

1. 在与 main.ts 相同的位置创建一个 jquery.ts 并将以下内容粘贴到其中，

   从'jquery'导入*作为$；

   窗口['jQuery'] = 窗口['$'] = $;

2. 在 main.ts 顶部插入以下内容，

   导入“jquery”；

   导入“popper.js”；

   导入“ Bootstrap ”；

   导入“时刻”；

   导入'jquery-datepicker';

3. 从 html 或 Angular cli 配置中删除对 j​​query 或 bootstrap 的任何其他脚本引用。