Twitter Bootstrap Question posted in

Fullcalendar + Angular 6 and jQuery: TS2304: Cannot find name 'JQueryPromise'-Twitter bootstrap

I’m using Creative Tim’s package “Light Bootstrap Dashboard Pro Angular” (ref: https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/dashboard)

In the example, he’s using Fullcalendar, like this:

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: '<br><input class="form-control" placeholder="Event Title" id="input-field">',
                    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'
                }
            ]
        });
    }
}

(see 4 declare var $: any;)

I did the exact same thing on my project (litterally copy-pasted) and I’m getting this error:

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’.

I’ve already tried npm install --save-dev @types/jquery (see: fullcalendar & Angular 5)

And npm install --save [email protected](see: fullcalendar'' has no exported member 'Options'.- getting error in Angular) and npm i @types/fullcalendar -sto install fullcalendar types

I also tried to import jQuery like this:

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

but I get the error

$(…).fullCalendar() is not a function

I also put

interface JQuery {
   fullCalendar(options?: any);
}

in the typings.d.ts file…

The only solution I found, is to append //@ts-ignore comment before every “problematic” line in the plugin core…

The Creative Tim package is originally in Angular 2 Version, but I updated Angular and CLI to 6+

I don’t know what can I do anymore…

Thanks a lot for your help, i’m struggling for three days…

EDIT:
Here is the package.json 

{
  "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"
  }
}

And angular.json

{
  "$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"
    }
  }
}
Tags:

2

Answers


  1. 0

    I Found some solution now its work for me, I’m Updated to 

    npm install [email protected]
    Login or Signup to reply.
  2. 0

    If anybody else stuck in future: use link FullCalendar initialize E6

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search