Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

$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' />
                $scope.delete = function (id) {             Photo.get({id: id}, function(result) {                 $scope.photo = result;                 $('#deletePhotoConfirmation').modal('show');  // error line             });         };
– TomekB
                Sep 23, 2015 at 9:20
                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' />
– TomekB
                Sep 23, 2015 at 9:24
                @TomekB please do not post code in comments, edit the question post it there, there is edit link at bottom of question below tags
– Shehary
                Sep 23, 2015 at 9:40
Edit:
As hughjdavey said in his comment, you also need the following import lines:
import * as bootstrap from "bootstrap";
import * as $ from 'jquery';
                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
– hughjdavey
                Nov 13, 2017 at 13:40
                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.
– hughjdavey
                Nov 13, 2017 at 14:17
                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?!?
– Beej
                Dec 12, 2017 at 1:34
                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
– Jason Krs
                Apr 18, 2018 at 10:35
                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.
– Andrew Kvochick
                Feb 1, 2019 at 11:14
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!
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');
Property 'DataTable' does not exist on type 'JQuery'
$('#realTimeTable').DataTable()
change to
($('#realTimeTable') as any).DataTable()
!$.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;
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
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.
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"
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.