Я новичок в Angular, и я хочу импортировать метод fullCalendar из Jquery, но он дает мне исключение, говорящее:
Angular4 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery (...). fullCalendar не является функцией
Это мой код:
import {Component, ViewChild, Input, Output, ElementRef, EventEmitter} from '@angular/core';
import * as jQuery from 'jquery';
import 'fullcalendar/dist/fullcalendar.js';
import 'style-loader!./baFullCalendar.scss';
@Component({
selector: 'ba-full-calendar',
templateUrl: './baFullCalendar.html',
})
export class BaFullCalendar {
@Input() baFullCalendarConfiguration:Object;
@Input() baFullCalendarClass:string;
@Output() onCalendarReady = new EventEmitter<any>();
@ViewChild('baFullCalendar') public _selector:ElementRef;
ngAfterViewInit() {
let calendar = jQuery(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
this.onCalendarReady.emit(calendar);
}
}
А это мой package.json:
{
"name": "ngx-admin",
"version": "2.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:hmr": "ng serve --hmr",
"start:aot": "ng serve --aot",
"build": "rimraf dist && ng build",
"build:prod": "npm run build -- --prod",
"build:prod:aot": "npm run build:prod -- --aot",
"build:ci": "npm-run-all -p -r build:prod build:prod:aot",
"test": "ng test -sr",
"test:coverage": "rimraf coverage && npm run test -- -cc",
"lint": "ng lint --type-check",
"lint:fix": "ng lint --fix",
"lint:styles": "stylelint ./src/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "ng e2e",
"prepush": "npm run lint:ci"
},
"dependencies": {
"@agm/core": "1.0.0-beta.0",
"@angular/animations": "4.3.2",
"@angular/common": "4.3.2",
"@angular/compiler": "4.3.2",
"@angular/core": "4.3.2",
"@angular/forms": "4.3.2",
"@angular/http": "4.3.2",
"@angular/platform-browser": "4.3.2",
"@angular/platform-browser-dynamic": "4.3.2",
"@angular/router": "4.3.2",
"@asymmetrik/angular2-leaflet": "2.1.4",
"@nebular/auth": "2.0.0-rc.2",
"@nebular/theme": "2.0.0-rc.2",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
"@ngx-translate/core": "^7.2.2",
"@ngx-translate/http-loader": "^1.0.2",
"@swimlane/ngx-charts": "5.2.0",
"@types/hammerjs": "^2.0.36",
"@types/jquery": "^3.2.15",
"angular-tree-component": "^8.0.2",
"angular2-chartjs": "^0.3.0",
"angular2-color-picker": "^1.3.1",
"angular2-toaster": "4.0.0",
"angular2-tree-component": "^3.1.0",
"bootstrap": "4.0.0-alpha.6",
"chart.js": "2.5.0",
"ckeditor": "4.6.2",
"classlist.js": "1.1.20150312",
"core-js": "^2.4.1",
"d3": "4.8.0",
"file-saver": "^2.0.0",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"hammerjs": "^2.0.8",
"intl": "1.2.5",
"ionicons": "2.0.1",
"jquery": "^3.2.1",
"jspdf": "^1.4.1",
"jspdf-autotable": "^2.3.5",
"leaflet": "1.0.3",
"mydatepicker": "^2.6.6",
"nebular-icons": "1.0.6",
"ng2-auto-complete": "^0.12.0",
"ng2-ckeditor": "1.1.6",
"ng2-slim-loading-bar": "^4.0.0",
"ng2-smart-table": "1.1.0",
"ng2-toasty": "^4.0.3",
"ng2-tree": "2.0.0-alpha.5",
"ng2-wizard": "^2.0.5",
"ngx-bootstrap": "^2.0.1",
"ngx-color-picker": "^4.5.3",
"ngx-echarts": "1.2.2",
"ngx-loading": "^2.0.1",
"ngx-toastr": "^6.4.1-beta.0",
"ngx-toggle-switch": "^2.0.5",
"ngx-ui-switch": "^1.6.1",
"ngx-uploader": "^7.0.0",
"ngx-wizard": "0.0.46",
"node-sass": "^4.5.3",
"normalize.css": "6.0.0",
"roboto-fontface": "0.8.0",
"rxjs": "5.4.2",
"socicon": "^3.0.5",
"tether": "1.4.0",
"tinymce": "4.5.7",
"tree-flatten": "^1.0.0",
"typeface-exo": "0.0.22",
"web-animations-js": "2.2.5",
"xlsx": "^0.14.1",
"zone.js": "0.8.16"
},
"devDependencies": {
"@angular/cli": "1.2.6",
"@angular/compiler-cli": "4.3.2",
"@angular/language-service": "4.3.2",
"@types/bootstrap": "^3.3.36",
"@types/d3-color": "1.0.4",
"@types/jasmine": "2.5.38",
"@types/jasminewd2": "2.0.2",
"@types/leaflet": "1.0.60",
"@types/node": "^6.0.74",
"angular-cli-ghpages": "0.5.0",
"codelyzer": "3.0.1",
"husky": "0.13.3",
"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.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"npm-run-all": "4.0.2",
"protractor": "5.1.2",
"rimraf": "2.6.1",
"stylelint": "7.13.0",
"ts-node": "3.0.4",
"tslint": "5.4.2",
"tslint-language-service": "0.9.6",
"typescript": "2.3.4"
}
}
Я пыталсядля приведения jQuery к «любому», как многие из постов, указанных здесь в stackoverflow: Как я могу остановить «свойство не существует в синтаксических ошибках типа JQuery» при использовании Typescript? , и я даже объявил его как глобальную переменную, нобольше ничего не дает.