错误 TS2305：模块“fullcalendar”没有导出的成员“选项”。角

Question

我正在使用 Angular 5 中的 fullCalendar 及其 fullcalendar-scheduler

app.module.ts

    import { CalendarModule } from "ap-angular2-fullcalendar";
@NgModule({
  imports: [
    CalendarModule,

home.component.ts

    import { CalendarComponent } from 'ap-angular2-fullcalendar';
    import * as $ from 'jquery';
    import 'fullcalendar';
    import 'fullcalendar-scheduler';

export class HomeComponent implements OnInit {

 calendarOptions: Object = {
    defaultView: 'agendaDay',

    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    resources: [
      { id: 'a', title: 'Resource 1' },
      { id: 'b', title: 'Resource 2', eventColor: 'green' },
      { id: 'c', title: 'Resource 3', eventColor: 'orange' },
      { id: 'd', title: 'Resource 4', eventColor: 'red' }
    ],
    events: [
      { id: '1', resourceId: 'a', start: '2018-03-07T09:00:00', end: '2018-03-07T10:00:00', title: 'event 1' },
      { id: '2', resourceId: 'b', start: '2018-03-07T07:30:00', end: '2018-03-07T08:30:00', title: 'event 2' },
      { id: '3', resourceId: 'c', start: '2018-03-07T07:30:00', end: '2018-03-07T08:30:00', title: 'event 3' },
      { id: '4', resourceId: 'd', start: '2018-03-07T10:10:00', end: '2018-03-07T10:40:00', title: 'event 4' },
      { id: '5', resourceId: 'a', start: '2018-03-07T10:10:00', end: '2018-03-07T10:40:00', title: 'event 5' }
    ]
  };

我收到以下错误：

错误 node_modules/ap-angular2-fullcalendar/src/calendar/calendar.d.ts(3,10)： 错误 TS2305：模块 ''fullcalendar'' 没有导出的成员 '选项'。 node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.d.ts(2525,10)： 错误 TS2717：后续属性声明必须具有相同的 类型。属性“fullCalendar”必须是“Calendar”类型，但在这里 具有“对象”类型。

在

ng build

This solution does not worked for me

package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "rm -Rf ./node_modules/app-angular2-fullcalendar/node_modules"
  },

我们将不胜感激。

Answer 1

我已经解决了这个问题。

错误：无法在 Angular 5 中添加完整日历，并显示以下错误。

错误 node_modules/ap-angular2-fullcalendar/src/calendar/calendar.d.ts(3,10)： 错误 TS2305：模块 ''fullcalendar'' 没有导出的成员 '选项'。 node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.d.ts(2525,10)： 错误 TS2717：后续属性声明必须具有相同的 类型。属性“fullCalendar”必须是“Calendar”类型，但这里有 输入“对象”。

问题： 使用 Typescript 有另一种使用全日历调度程序的方法。它与 AngularJs 中的不同

---

解决方案：

第 1 步： 安装以下包

• npm install --save jquery fullcalendar fullcalendar-scheduler
• npm install --save-dev typescript webpack awesome-typescript-loader 源地图加载器
• npm install --save-dev @types/jquery

第 2 步： 在 view/html 中添加以下代码

<div id='calendar'></div>

第 3 步： 在component.ts中

import * as $ from 'jquery';
import 'fullcalendar';
import 'fullcalendar-scheduler';

@Component({
  moduleId: module.id,
  templateUrl: 'calendar.view.html'
})
export class CalendarComponent implements OnInit {
  containerEl: JQuery = $('#calendar');;

ngOnInit() {

  calendarOptions: Object = {
    defaultView: 'agendaDay',
    editable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    resources: [
      { id: 'a', title: 'Resource 1' },
      { id: 'b', title: 'Resource 2', eventColor: 'green' },
      { id: 'c', title: 'Resource 3', eventColor: 'orange' },
      { id: 'd', title: 'Resource 4', eventColor: 'red' }
    ],
    events: [
      { id: '1', resourceId: 'a', start: '2018-04-18T09:00:00', end: '2018-04-18T10:00:00', title: 'event 1' },
      { id: '2', resourceId: 'b', start: '2018-04-18T07:30:00', end: '2018-04-18T08:30:00', title: 'event 2' },
      { id: '3', resourceId: 'c', start: '2018-04-18T07:30:00', end: '2018-04-18T08:30:00', title: 'event 3' },
      { id: '4', resourceId: 'd', start: '2018-04-18T10:10:00', end: '2018-04-18T10:40:00', title: 'event 4' },
      { id: '5', resourceId: 'a', start: '2018-04-18T10:10:00', end: '2018-04-18T10:40:00', title: 'event 5' }
    ]                                                                         
  };
}

最重要的

1. 无需在app.module.ts

   中添加任何模块引用

   从“ap-angular2-fullcalendar”导入 { CalendarModule }； @NgModule({ 进口：[ 日历模块，

2. 无需在您的 component.ts 中添加任何组件引用

   从 'ap-angular2-fullcalendar' 导入 { CalendarComponent }；