CODEWITHSUNDEEP
javascriptjqueryangular
rokie12234
rokie12234

Reputation: 63

Property 'modal' does not exist on type 'JQuery<HTMLElement>'

I'm working with Angular 7 and I'm trying to use .modal function of jQuery in my component :

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

But I'm receiving that error... And here is the image:

enter image description here

I've added also in my app.module.ts this line:

import * as $ from 'jquery';

But issue is still there.

I've found similar question here and followed same steps, but issue is still there.

Here is my package-lock.json file, and I've seen there some things related to 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=="
    },

If anyone might help that would be great! Thanks !

Upvotes: 0

Views: 5620

Answers (3)

rokie12234
rokie12234

Reputation: 63

I solved issue by adding manually file called typings.d.ts as in Angular 7 and above it does not coming like in previous versions, and there in that file I added interface JQuery { ... } and everything works now! :)

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;
}

Upvotes: 1

Bharathiraja
Bharathiraja

Reputation: 812

I have faced same issue and i have done the below steps and it got resolved.

# in your terminal paste this
npm install -D @types/bootstrap --save

# put this in your app.module.ts
import * as bootstrap from "bootstrap";
import * as $ from "jquery";

Upvotes: 1

moyeradon
moyeradon

Reputation: 453

I have run into this same issue. What worked for me simply was installing the official typings for JQuery.

npm install @types/jquery --save-dev

And then in your .tsconfig file find the "types" array and insert this like so:

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

With your import * as $ from 'jquery';, you should be good to go.

Upvotes: -1

Related Questions