Fullcalendar + angular 6 и jquery: ts2304: не удается найти имя 'jquerypromise'

Я использую пакет Creative Tim "Light Bootstrap Dashboard Pro Angular" (ref: https://demos.creative-tim.com/light-bootstrap-dashboard-pro-angular2/dashboard)

В этом примере он использует Fullcalendar, например:

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'
                }
            ]
        });
    }
}

(см. 4 declare var $: any;)

Я проделал то же самое со своим проектом (буквально скопировал) и получаю эту ошибку:

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

npm install --save-dev @types/jquery уже пробовал (см .: fullcalendar и Angular 5)

И npm install --save fullcalendar@3.6.1 (см .: fullcalendar '' не имеет экспортированного члена 'Options'. - ошибка получения в Angular) и npm i @types/fullcalendar -s для установки типов fullcalendar

Я также пробовал импортировать jQuery вот так:

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

но я получаю ошибку

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

Я также положил

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

в файле typings.d.ts ...

Единственное решение, которое я нашел, - это добавлять комментарий //@ts-ignore перед каждой "проблемной" строкой в ​​ядре плагина ...

Пакет Creative Tim изначально находится в версии Angular 2, но я обновил Angular и CLI до 6+.

Я больше не знаю, что мне делать ...

Большое спасибо за вашу помощь, я борюсь уже три дня ...

Обновлено: Вот 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"
  }
}

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

Вы импортировали fullcalender js в файл angular-cli.json?

Shashikant Devani 10.09.2018 08:33

Эй, да, я имплантировал его с помощью locale-all.js и scheduler.js

Doddo 10.09.2018 08:50

Также попробуйте import * as $ from 'jquery' вместо import * as JQuery from 'jquery';, потому что вы используете $ в своем компоненте, а не переменную JQuery.

Shashikant Devani 10.09.2018 09:12

Большое спасибо за ваши комментарии. Я добавил к вопросу angular.json и package.json. Я уже пробовал import* as $ from 'jquery', но не могу вспомнить результат, попробую прямо сейчас

Doddo 10.09.2018 09:34

Согласно вашему package.json, вы используете версию jquery 2-летней давности, пожалуйста, сначала обновите ее. npm install jquery@latest --save

Shashikant Devani 10.09.2018 09:41

Ой, большое спасибо, я не могу поверить, что мой jQuery был тем старым Оо

Doddo 10.09.2018 09:56

@ShashikantDevani Я попытался импортировать как $, а не как jQuery, проблема осталась прежней, по-прежнему написано $(...).fullCalendar is not a function> <

Doddo 10.09.2018 10:07

ваша ошибка JQueryPromise исчезла?

Shashikant Devani 10.09.2018 10:44

Когда я импортирую jQuery через import * as $ from 'jquery', JQueryPromise и другие пропали, но я получаю ошибку .fullCalendar. Когда я удаляю импорт и пытаюсь использовать declare, ошибка .fullCalendar исчезла, и ошибки JQueryPromise вернулись.

Doddo 10.09.2018 11:04

Просто используйте import * как $ from 'jquery'. и Запустить полный календарь в ngAfterViewInit() вместо ngOnInit().

Shashikant Devani 10.09.2018 11:07

Я уже пробовал в ngOnInit и ngAfterViewInit, та же проблема: /

Doddo 10.09.2018 11:11

Не могли бы вы создать для этого демонстрацию stackblitz: stackblitz.com

Shashikant Devani 10.09.2018 11:14

Я даже не могу импортировать jquery на stackblitz: stackblitz.com/edit/angular-f7ffm7

Doddo 10.09.2018 11:34

Добавьте это в свой файл stackblitz angular.json: "../node_modules/jquery/dist/jquery.js"

Shashikant Devani 10.09.2018 11:44

Я только что скопировал ваш stackblitz и успешно создал новый stackblitz в этом рендере полного календаря. Пожалуйста, обратитесь по этой ссылке: stackblitz.com/edit/angular-fygcag

Shashikant Devani 10.09.2018 12:05

Понятно ... Меня это передергивает> <Я забыл указать, я использую Bootstrap 3, и мне пришлось включить файлы jquery в angular.json.

Doddo 10.09.2018 13:59

Я попытался переключиться с import * as $ на import * as jQuery, и он работает (npm start в порядке и ng build too) .. Но у меня есть n.fullCalendar is not a function на собранном проекте ...

Doddo 10.09.2018 15:24

Аааа и последний (может?) Я думаю, что нашел "проблему". Я не понимаю, но это работает ... Я просто импортировал jQuery с import * as $ и использую jQuery.fullCalendar() ... да, вы правильно прочитали ...

Doddo 10.09.2018 15:57

Вау, здорово, наконец, у тебя есть решение ..

Shashikant Devani 10.09.2018 16:15

Ага, и, наконец, мне просто нужно было import 'jquery'; ....

Doddo 11.09.2018 08:36

Просто добавьте import * как $ from 'jquery'; это будет работа

Raja Rama Mohan Thavalam 10.01.2019 14:43
2
21
4 652
2

Ответы 2

Я нашел какое-то решение, теперь оно работает для меня, я обновлен до

npm install fullcalendar@3.6.1

Если кто-то еще застрял в будущем: используйте ссылку FullCalendar инициализировать E6

Другие вопросы по теме