问题：
Fullcalendar+Angular 6和jQuery:TS2304:找不到名称“JQueryPromise”
戚明朗
我正在使用Creative Tim的包“Light Bootstrap Dashboard Pro Angular”（参考: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'
}
]
});
}
}
我已经尝试了NPM安装--save-dev@types/jquery（参见：fullcalendar&Angular 5）
和NPM安装--保存fullcalendar@3.6.1（请参见：fullcalendar“”没有导出的成员“选项”。-获取角度错误）和NPM i@types/fullcalendar-s以安装fullcalendar类型
我还尝试像这样导入jQuery：
$(...).FullCalendar()不是函数
我还把
interface JQuery {
fullCalendar(options?: any);
}
在typings.d.ts文件中...
{
"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"
}
}
}
共有1个答案
戚阳文
我找到了一些解决方案，现在它为我工作，我更新为
npm install fullcalendar@3.6.1
类似资料：
-
我是angular 2和typescript的新手，正在尝试为我的弹出窗口调用RocketLaunch函数。 如果我在弹出窗口外声明它不调用，但如果我在弹出窗口内移动它抛出此错误： 错误TS2304:找不到名称“$event” 提供以下相关代码和错误：
-
这是我的工作树 我已经搜索了这个问题，但我还没有弄清楚问题是什么。救命啊！
-
我使用名为jnca的库来捕获从路由器发送的netflow udp数据包。 当它被导入到IntellijIDea中的一个新项目中时，它就可以工作了。 如果在maven项目中使用它，它就不起作用，并出现了这个异常。
-
问题内容： 我正在使用依赖于jfreechart（v 1.0.9）的库。 当我尝试运行.jar时，我得到： 我尝试创建LocalizationBundle.properties文件，但是没有做到。我已经检查了CLASSPATH，仍然无法执行。 有任何想法吗？ 问题答案： 到目前为止，异常消息详细告知您需要在类路径中包含以下文件之一： 要么 要么 另请参见Sun自己的关于resourcebundle
-
问题内容： 我开始使用TypeScript编写AngularJS应用。我有这个简单的模块命令： 当我跑步时，我得到了： 我是否需要包括一些内容以使他们理解？ 问候， 问题答案： 您可以通过告诉编译器“您对角度的全部了解”来简单地告诉编译器不再担心： 为了获得所有好的工具和类型检查，您需要提取Angular类型定义，以便编译器知道可用的东西。 如果您对自己喜欢的IDE使用Visual Studio或