我是'm using Creative Tim' s package "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; ）
我在我的项目上做了完全相同的事情（litterally copy-pasted），我收到了这个错误：
node_modules / fullcalendar / dist / fullcalendar.d.ts中的错误（696,36）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts（697,29）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts（698,20）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts(760,22）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts（776,50）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts(989,23）：错误TS2304：找不到名称'JQueryEventObject' . node_modules / fullcalendar / dist / fullcalendar.d.ts(1402,70）：错误TS2304：找不到名称'JQueryAjaxSettings' . node_modules / fullcalendar / dist / fullcalendar.d.ts(1609,50）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts（1629,50）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar / dist / fullcalendar.d.ts(2615,50）：错误TS2304：找不到名称'JQueryPromise' . node_modules / fullcalendar-scheduler / dist / scheduler.d.ts（749,66）：错误TS2304：找不到名称'JQueryAjaxSettings' . node_modules / fullcalendar-scheduler / dist / scheduler.d.ts（813,44）：错误TS2304：找不到名称'JQueryPromise' .
我已经试过 npm install --save-dev @types/jquery （见：fullcalendar & Angular 5）
并 npm install --save fullcalendar@3.6.1 （参见：fullcalendar'' has no exported member 'Options'.- getting error in Angular）和 npm i @types/fullcalendar -s 安装fullcalendar类型
我也尝试像这样导入jQuery：
import * as jQuery from "jquery"; (window as any).$ = (window as any).jQuery = jQuery;
但我得到了错误
$（...） . fullCalendar（）不是函数
我也说
interface JQuery {
fullCalendar(options?: any);
}
在 typings.d.ts 文件中......
我找到的唯一解决方案是在插件核心中的每个"problematic"行之前附加 //@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"
}
}
}