Свойство 'модальное' не существует для типа 'JQuery <HTMLElement>'

Question

Я работаю с Angular 7 и пытаюсь использовать .modal функцию jQuery в моем компоненте:

show() {
    $('#' + this.id).modal('show');
}

Но я получаю эту ошибку ... И вот изображение:

Я также добавил в мою app.module.ts эту строку:

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

Но проблема все еще существует.

Я нашел похожий вопрос здесь и выполнил те же шаги, но проблема все еще существует.

Вот мой package-lock.json файл, и я видел некоторые вещи, связанные с jquery:

 "@types/bootstrap": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.3.0.tgz",
      "integrity": "sha512-v1BkpRVgNH9eXE+RtWFP1wh/+SAkPZaxHthS6umqf1sGV0tAvHdPHZpAOB+H74e91ElOxtS56dxbon+lXWk4AQ==",
      "dev": true,
      "requires": {
        "@types/jquery": "*",
        "popper.js": "^1.14.1"
      }

  "@types/jquery": {
      "version": "3.3.29",
      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.29.tgz",
      "integrity": "sha512-FhJvBninYD36v3k6c+bVk1DSZwh7B5Dpb/Pyk3HKVsiohn0nhbefZZ+3JXbWQhFyt0MxSl2jRDdGQPHeOHFXrQ==",
      "dev": true,
      "requires": {
        "@types/sizzle": "*"
      }
    },

"jquery": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
    },

Если бы кто-нибудь мог помочь, это было бы здорово! Спасибо!

Answer 1

Я столкнулся с этой же проблемой.То, что работало для меня просто, устанавливало официальные наборы для JQuery.

npm install @types/jquery --save-dev

А затем в вашем файле .tsconfig найдите массив "types" и вставьте его следующим образом:

"types": [
...
"jquery",
...
]

С вашим import * as $ from 'jquery';,тебе должно быть хорошо идти.

Answer 2

Я решил проблему, добавив вручную файл с именем typings.d.ts , как в Angular 7 и выше, он не идет, как в предыдущих версиях, и там в этом файле я добавиля nterface JQuery { ... } и все работает сейчас!:)

interface JQuery {
  dataTable: any;
  datepicker: any;
  datetimepicker: any;
  moment: any;
  select2: any;
  DataTable: any;
  iCheck: any;
  animateCss: any;
  actual: any;
  fullscreen: any;
  noUiSlider: any;
  modal: any;
  tab: any;
  multiselect: any;
  spectrum: any;
}