error TS2339: Property 'modal' does not exist on type 'JQuery'

Question

I'm using Typescript with AngularJS. I have a problem with modals using typed definition of jQuery library. I get the following error: 'error TS2339: Property 'modal' does not exist on type 'JQuery'.'

Version: jQuery library, version 1.10.x / 2.0.x Definitions: https://github.com/borisyankov/DefinitelyTyped

Code

$scope.delete = function (id) {
  Photo.get({id: id}, function(result) {
     $scope.photo = result;
     $('#deletePhotoConfirmation').modal('show');// error line 
  });
};

I'm referencing to jquery.d.ts in angular.d.ts

<reference path="../jquery/jquery.d.ts" />

and my global vendor reference file looks like:

<reference path='../vendor/types/angular/angular.d.ts' />
<reference path='../vendor/types/angular/angular-mocks.d.ts' />
<reference path='../vendor/types/jasmine/jasmine.d.ts' />

Prud

$scope.delete = function (id) { Photo.get({id: id}, function(result) { $scope.photo = result; $('#deletePhotoConfirmation').modal('show'); // error line }); }; – Prud

I'm referencing to 'jquery.d.ts' in 'angular.d.ts' file: /// <reference path="../jquery/jquery.d.ts" /> and my global vendor reference file looks like: /// <reference path='../vendor/types/angular/angular.d.ts' /> /// <reference path='../vendor/types/angular/angular-mocks.d.ts' /> /// <reference path='../vendor/types/jasmine/jasmine.d.ts' /> – Prud

@Prud please do not post code in comments, edit the question post it there, there is edit link at bottom of question below tags – Scorpaenoid

https://mcmap.net/q/398775/-error-ts2339-property-39-modal-39-does-not-exist-on-type-39-jquery-39 explains all steps to get rid of this issue – Jubilant

Answer 1

with newer versions of typescript (>v2 i believe):

npm install -D @types/bootstrap

Edit: As hughjdavey said in his comment, you also need the following import lines:

import * as bootstrap from "bootstrap";
import * as $ from 'jquery';

Apery

This worked for me in a project with jquery types also installed - it added to the jQuery interface such that $(modal-selector).modal('show') etc compiles fine – Humour

I also had to add import * as bootstrap from "bootstrap"; to my app.module.ts otherwise IntelliJ stopped complaining but it still wouldn't compile on command line with the same error. Doesn't matter what you call it (doesn't have to be bootstrap). For absolute clarity, I also have import * as $ from "jquery"; in the same file which lets me use $(...) in my components. – Humour

thank you @hughjdavey!!! for including those specific import statements... i can't believe how obscure this is for how common of a need it must be?!? – Extract

I don't know why but this does not work properly for me...A times it works. But most of the times, it does not work... Do you know why ? I ran the command and imported bootstrap.js in the component ts file but it still fails – Pleiades

You can avoid polluting your code with unused references to 'bootstrap' if you add "bootstrap" to the "types" property of the "compilerOptions" object in tsconfig.json. – Nathalie

in my agular 4 project, i was getting this warning with Bootstrap imported as import 'bootstrap' while running tests (with karma), and this fix fixed it. – Turman

Answer 2

Your problem is caused by the lack of property with name modal in the jquery.d.ts file.

If you sure that this work in pure JS you can trick with it like this

$scope.delete = function (id) {
  Photo.get({id: id}, function(result) {
     $scope.photo = result;
     (<any>$('#deletePhotoConfirmation')).modal('show');
  });
};

Also, you can find additional d.ts file where this option has already been defined.

Try to consider this library that has already had modal option

Good Luck!

Deuce

I've checked 'jquery.simplemodal.d.ts '. It works fine, thanks! – Prud

Answer 3

In my case I had to use

npm install -D @types/bootstrap

and then I had to import bootstrap

import * as bootstrap from 'bootstrap';

but most important step was to remove jquery

import * as $ from 'jquery';

otherwise it was giving me this error:

TypeError: $(...).modal is not a function

Jubilant

Answer 4

When I upgrade angular to version 9, I faced this issue.

Here are my solution, I shared for whom concerned.

Property 'modal' does not exist on type 'JQuery'

$('#ManualMinMaxModal').modal('show');

change to

($('#ManualMinMaxModal') as any).modal('show');

And

Property 'DataTable' does not exist on type 'JQuery'

$('#realTimeTable').DataTable()

change to

($('#realTimeTable') as any).DataTable()

With

!$.fn.DataTable.isDataTable('#realTimeTable')

change to

!($.fn as any).DataTable.isDataTable('#realTimeTable')

Updated:

cast to any sometime not work, and finally solution is change declare from import * as $ from 'jquery' to declare var $: any;

Gangling

Answer 5

this work for me, i add in first row:
declare var $ :any;
this declare $ type is any ,

Korns

where did u add this – Lover

first row in file that i use that – Korns

Answer 6

I could resolve it as follows:

import * as $ from "jquery";

($('#menuModal') as any).modal('toggle');

Millrace

Answer 7

Try installing the typings for Bootstrap DefinitelyTyped

typings install --global --save dt~bootstrap

Winkelman

Answer 8

Just add

import * as bootstrap from "bootstrap";
import * as $ from "jquery";

in your app.module.ts

And install these packages

npm install @types/jquery --save-dev

npm install @types/bootstrap --save-dev

Quadruplicate

Answer 9

Solution for Angular 8+ versions :

Not working:

$('#deletePhotoConfirmation').modal('show');

Instead use this:

($('#deletePhotoConfirmation') as any).modal('show');

For Import :

import * as $ from 'jquery';

Good Luck

Definition

Answer 10

Yep, I too had to include both of these imports in order to make my app publishable by angular:

import * as bootstrap from "bootstrap";
import * as $ from "jquery";

I added them in the component that was using jQuery.

Lizalizabeth

Answer 11

Did you add bootstrap.js to your angular.json?

"scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Cerebrum

Answer 12

declare var $ :any;

This worked for me.

Remove