title: Fullcalendar + Angular 6 and jQuery: TS2304: Cannot find name 'JQueryPromise'
body: <p>I'm using Creative Tim's package "Light Bootstrap Dashboard Pro Angular" (ref: <a href="https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/dashboard" rel="nofollow noreferrer">https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/dashboard</a>)</p>
  
  <p>In the example, he's using Fullcalendar, like this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  declare var swal: any;
  declare var $: any;
  
  @Component({
      moduleId: module.id,
      selector: 'calendar-cmp',
      templateUrl: 'calendar.component.html'
  })
  
  export class CalendarComponent implements OnInit{
      ngOnInit(){
          var $calendar = $('#fullCalendar');
  
          var today = new Date();
          var y = today.getFullYear();
          var m = today.getMonth();
          var d = today.getDate();
  
          $calendar.fullCalendar({
              viewRender: function(view, element) {
                  // We make sure that we activate the perfect scrollbar when the view isn't on Month
                  if (view.name != 'month'){
                      var $fc_scroller = $('.fc-scroller');
                      $fc_scroller.perfectScrollbar();
                  }
              },
              header: {
                  left: 'title',
                  center: 'month,agendaWeek,agendaDay',
                  right: 'prev,next,today'
              },
              defaultDate: today,
              selectable: true,
              selectHelper: true,
              views: {
                  month: { // name of view
                      titleFormat: 'MMMM YYYY'
                      // other view-specific options here
                  },
                  week: {
                      titleFormat: " MMMM D YYYY"
                  },
                  day: {
                      titleFormat: 'D MMM, YYYY'
                  }
              },
  
              select: function(start, end) {
  
                  // on select we show the Sweet Alert modal with an input
                  swal({
                      title: 'Create an Event',
                      html: '&lt;br&gt;&lt;input class="form-control" placeholder="Event Title" id="input-field"&gt;',
                      showCancelButton: true,
                      closeOnConfirm: true
                  }, function() {
  
                      var eventData;
                      var event_title = $('#input-field').val();
  
                      if (event_title) {
                          eventData = {
                              title: event_title,
                              start: start,
                              end: end
                          };
                          $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
                      }
  
                      $calendar.fullCalendar('unselect');
  
                  });
              },
              editable: true,
              eventLimit: true, // allow "more" link when too many events
  
  
              // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
              events: [
                  {
                      title: 'All Day Event',
                      start: new Date(y, m, 1),
                      className: 'event-default'
                  },
                  {
                      id: 999,
                      title: 'Repeating Event',
                      start: new Date(y, m, d-4, 6, 0),
                      allDay: false,
                      className: 'event-rose'
                  },
                  {
                      id: 999,
                      title: 'Repeating Event',
                      start: new Date(y, m, d+3, 6, 0),
                      allDay: false,
                      className: 'event-rose'
                  },
                  {
                      title: 'Meeting',
                      start: new Date(y, m, d-1, 10, 30),
                      allDay: false,
                      className: 'event-green'
                  },
                  {
                      title: 'Lunch',
                      start: new Date(y, m, d+7, 12, 0),
                      end: new Date(y, m, d+7, 14, 0),
                      allDay: false,
                      className: 'event-red'
                  },
                  {
                      title: 'Md-pro Launch',
                      start: new Date(y, m, d-2, 12, 0),
                      allDay: true,
                      className: 'event-azure'
                  },
                  {
                      title: 'Birthday Party',
                      start: new Date(y, m, d+1, 19, 0),
                      end: new Date(y, m, d+1, 22, 30),
                      allDay: false,
                      className: 'event-azure'
                  },
                  {
                      title: 'Click for Creative Tim',
                      start: new Date(y, m, 21),
                      end: new Date(y, m, 22),
                      url: 'https://www.creative-tim.com/',
                      className: 'event-orange'
                  },
                  {
                      title: 'Click for Google',
                      start: new Date(y, m, 21),
                      end: new Date(y, m, 22),
                      url: 'https://www.creative-tim.com/',
                      className: 'event-orange'
                  }
              ]
          });
      }
  }
  </code></pre>
  
  <p>(see 4 <code>declare var $: any;</code>)</p>
  
  <p>I did the exact same thing on my project (litterally copy-pasted) and I'm getting this error:</p>
  
  <blockquote>
    <p>ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(696,36):
    error TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(697,29): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(698,20): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(760,22): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(776,50): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(989,23): error
    TS2304: Cannot find name 'JQueryEventObject'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(1402,70): error
    TS2304: Cannot find name 'JQueryAjaxSettings'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(1609,50): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(1629,50): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar/dist/fullcalendar.d.ts(2615,50): error
    TS2304: Cannot find name 'JQueryPromise'.
    node_modules/fullcalendar-scheduler/dist/scheduler.d.ts(749,66): error
    TS2304: Cannot find name 'JQueryAjaxSettings'.
    node_modules/fullcalendar-scheduler/dist/scheduler.d.ts(813,44): error
    TS2304: Cannot find name 'JQueryPromise'.</p>
  </blockquote>
  
  <p>I've already tried <code>npm install --save-dev @types/jquery</code> (see: <a href="https://stackoverflow.com/questions/47950588/fullcalendar-angular-5">fullcalendar &amp; Angular 5</a>)</p>
  
  <p>And <code>npm install --save fullcalendar@3.6.1</code>(see: <a href="https://stackoverflow.com/questions/47899427/fullcalendar-has-no-exported-member-options-getting-error-in-angular">fullcalendar&#39;&#39; has no exported member &#39;Options&#39;.- getting error in Angular</a>) and <code>npm i @types/fullcalendar -s</code>to install fullcalendar types</p>
  
  <p>I also tried to import jQuery like this:</p>
  
  <p><code>import * as jQuery from "jquery";
  (window as any).$ = (window as any).jQuery = jQuery;</code></p>
  
  <p>but I get the error </p>
  
  <blockquote>
    <p>$(...).fullCalendar() is not a function</p>
  </blockquote>
  
  <p>I also put</p>
  
  <pre><code>interface JQuery {
     fullCalendar(options?: any);
  }
  </code></pre>
  
  <p>in the <code>typings.d.ts</code> file...</p>
  
  <p>The only solution I found, is to append <code>//@ts-ignore</code> comment before every "problematic" line in the plugin core...</p>
  
  <p>The Creative Tim package is originally in Angular 2 Version, but I updated Angular and CLI to 6+</p>
  
  <p>I don't know what can I do anymore... </p>
  
  <p>Thanks a lot for your help, i'm struggling for three days...</p>
  
  <p>EDIT:
  Here is the <code>package.json</code> </p>
  
  <pre><code>{
    "name": "my-project",
    "version": "1.0",
    "license": "****",
    "repository": {
      "type": "git",
      "url": "https://github.com/*****"
    },
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "6.1.3",
      "@angular/common": "6.1.3",
      "@angular/compiler": "6.1.3",
      "@angular/core": "6.1.3",
      "@angular/forms": "6.1.3",
      "@angular/http": "6.1.3",
      "@angular/platform-browser": "6.1.3",
      "@angular/platform-browser-dynamic": "6.1.3",
      "@angular/platform-server": "6.1.3",
      "@angular/router": "6.1.3",
      "@auth0/angular-jwt": "^1.0.0",
      "@ngui/map": "0.18.3",
      "angular-signature-pad": "0.0.14",
      "angular2-moment": "^1.9.0",
      "angular2-signaturepad": "^2.8.0",
      "bootstrap": "3.3.5",
      "bootstrap-notify": "3.1.3",
      "bootstrap-select": "1.12.2",
      "bootstrap-switch": "3.3.4",
      "bootstrap-tagsinput": "0.7.1",
      "chartist": "0.9.4",
      "core-js": "2.4.1",
      "datatables": "1.10.12",
      "datatables.net-bs": "1.10.12",
      "datatables.net-responsive": "^2.2.3",
      "eonasdan-bootstrap-datetimepicker": "4.17.47",
      "fullcalendar": "^3.9.0",
      "fullcalendar-scheduler": "^1.9.4",
      "iban": "0.0.10",
      "intl-tel-input": "^12.1.15",
      "jasny-bootstrap": "3.1.3",
      "jquery": "^1.12.4",
      "jquery-validation": "1.16.0",
      "jw-bootstrap-switch-ng2": "2.0.0",
      "jwt-decode": "^2.2.0",
      "libphonenumber-js": "^1.2.12",
      "md-autocomplete": "0.0.1-alpha.1",
      "ng2-nouislider": "1.6.1",
      "ngx-chips": "1.4.5",
      "ngx-google-places-autocomplete": "^2.0.1",
      "ngx-order-pipe": "^2.0.1",
      "node-sass": "^4.9.3",
      "nouislider": "9.2.0",
      "rxjs": "5.6.0-forward-compat.4 ",
      "semver": "^5.5.0",
      "twitter-bootstrap-wizard": "1.2.0",
      "web-animations-js": "2.2.2",
      "zone.js": "0.8.4"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.7.0",
      "@angular/cli": "^6.1.4",
      "@angular/compiler-cli": "6.1.3",
      "@types/bootstrap": "3.3.32",
      "@types/chartist": "0.9.34",
      "@types/jasmine": "2.5.38",
      "@types/jquery": "^3.3.6",
      "@types/node": "6.0.73",
      "codelyzer": "3.0.1",
      "jasmine-core": "2.6.2",
      "jasmine-spec-reporter": "4.1.0",
      "karma": "1.7.0",
      "karma-chrome-launcher": "2.1.1",
      "karma-cli": "1.0.1",
      "karma-coverage-istanbul-reporter": "1.2.1",
      "karma-jasmine": "1.1.0",
      "karma-jasmine-html-reporter": "0.2.2",
      "nl2br-pipe": "^1.1.0",
      "protractor": "^5.4.0",
      "ts-node": "3.0.4",
      "tslint": "5.3.2",
      "typescript": "2.9.2"
    }
  }
  </code></pre>
  
  <p>And <code>angular.json</code></p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
      "MyProject": {
        "root": "",
        "sourceRoot": "src",
        "projectType": "application",
        "architect": {
          "build": {
            "builder": "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist",
              "index": "src/index.html",
              "main": "src/main.ts",
              "tsConfig": "src/tsconfig.app.json",
              "polyfills": "src/polyfills.ts",
              "assets": [
                "src/assets",
                "src/favicon.ico"
              ],
              "styles": [
                "src/assets/sass/light-bootstrap-dashboard.scss",
                "node_modules/intl-tel-input/build/css/intlTelInput.css",
                "node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
              ],
              "scripts": [
                "node_modules/jquery/dist/jquery.js",
                "node_modules/bootstrap/dist/js/bootstrap.js",
                "node_modules/moment/moment.js",
                "node_modules/chartist/dist/chartist.js",
                "node_modules/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js",
                "node_modules/bootstrap-notify/bootstrap-notify.js",
                "node_modules/fullcalendar/dist/fullcalendar.js",
                "node_modules/fullcalendar/dist/locale-all.js",
                "node_modules/fullcalendar-scheduler/dist/scheduler.min.js",
                "src/assets/js/perfect-scrollbar.min.js",
                "src/assets/js/jquery-jvectormap.js",
                "node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
                "node_modules/nouislider/distribute/nouislider.min.js",
                "node_modules/datatables.net/js/jquery.dataTables.js",
                "node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
                "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
                "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
                "node_modules/bootstrap-switch/dist/js/bootstrap-switch.js",
                "node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js",
                "node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
                "node_modules/intl-tel-input/build/js/intlTelInput.js",
                "src/assets/js/sweetalert2.js"
              ]
            },
            "configurations": {
              "production": {
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                  }
                ]
              },
              "test": {
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "aot": true,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "fileReplacements": [
                  {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.test.ts"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "MyProject:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "MyProject:build:production"
              },
              "test": {
                "browserTarget": "MyProject:build:test"
              }
            }
          },
          "extract-i18n": {
            "builder": "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "MyProject:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "karmaConfig": "./karma.conf.js",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.spec.json",
              "scripts": [
                "node_modules/jquery/dist/jquery.js",
                "node_modules/bootstrap/dist/js/bootstrap.js",
                "node_modules/moment/moment.js",
                "node_modules/chartist/dist/chartist.js",
                "node_modules/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js",
                "node_modules/bootstrap-notify/bootstrap-notify.js",
                "node_modules/fullcalendar/dist/fullcalendar.js",
                "node_modules/fullcalendar/dist/locale-all.js",
                "src/assets/js/perfect-scrollbar.min.js",
                "src/assets/js/jquery-jvectormap.js",
                "node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
                "node_modules/nouislider/distribute/nouislider.min.js",
                "node_modules/datatables.net/js/jquery.dataTables.js",
                "node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
                "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
                "node_modules/bootstrap-select/dist/js/bootstrap-select.js",
                "node_modules/bootstrap-switch/dist/js/bootstrap-switch.js",
                "node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js",
                "node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
                "node_modules/intl-tel-input/build/js/intlTelInput.js",
                "src/assets/js/sweetalert2.js"
              ],
              "styles": [
                "src/assets/sass/light-bootstrap-dashboard.scss",
                "node_modules/intl-tel-input/build/css/intlTelInput.css"
              ],
              "assets": [
                "src/assets",
                "src/favicon.ico"
              ]
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "src/tsconfig.app.json",
                "src/tsconfig.spec.json"
              ],
              "exclude": []
            }
          }
        }
      },
      "MyProject-e2e": {
        "root": "e2e",
        "sourceRoot": "e2e",
        "projectType": "application",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "./protractor.conf.js",
              "devServerTarget": "MyProject:serve"
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "e2e/tsconfig.e2e.json"
              ],
              "exclude": []
            }
          }
        }
      }
    },
    "defaultProject": "MyProject",
    "schematics": {
      "@schematics/angular:component": {
        "prefix": "app",
        "styleext": "scss"
      },
      "@schematics/angular:directive": {
        "prefix": "app"
      }
    }
  }
  </code></pre>