用满日历和angular 8解决问题

Question

我从angular 8的控制台上得到了下一个问题：

模块‘“../../node_modules/@fullcalendar/angular/fullcalendar-angular”’没有导出的成员“CalendarOptions”。

在上一个版本中，安装angular 3.6.1是可以解决的，但那是四年前的事了，它不应该是正确的，而且它也不适用于我的情况，另一个解决方案是更改到版本3.7.0，但它不起作用，并且angular的文档很糟糕，我使用的代码与文档要求使用它的代码完全相同。

https://fullcalendar.io/docs/angular

另一件事，我应该说清楚，插件可以工作，但如果控制台抛给我它是出于某种原因，所以我想知道如何修复它。

这是我的package.json：

{
  "name": "Project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.6",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "~9.1.6",
    "@angular/compiler": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@fullcalendar/angular": "^5.3.1",
    "@fullcalendar/daygrid": "^5.3.2",
    "@fullcalendar/interaction": "^5.3.1",
    "@fullcalendar/list": "^5.3.1",
    "@fullcalendar/resource-timeline": "^5.3.1",
    "@fullcalendar/timegrid": "^5.3.1",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "angular-ng-stepper": "^1.0.6",
    "chart.js": "^2.9.3",
    "jquery": "^3.5.1",
    "ng-sidebar": "^9.4.2",
    "ng-zorro-antd": "^9.3.0",
    "ngx-spinner": "^9.0.2",
    "popper.js": "^1.14.3",
    "rxjs": "~6.5.4",
    "sweetalert2": "^9.17.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler-cli": "~9.1.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

这是我的component.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { MainRoutingModule } from './main-routing.module';
import { MainComponent } from './main.component';
import { MyTasksComponent } from './components/myTasks/MyTasks.component';
import { DashboardComponent } from './components/dashboard/Dashboard.component';
import { TaskComponent } from './components/tasks/task.component';

//NgZorro
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzAvatarModule } from 'ng-zorro-antd/avatar';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzAffixModule } from 'ng-zorro-antd/affix';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzListModule } from 'ng-zorro-antd/list';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
import { NzSwitchModule} from 'ng-zorro-antd/switch';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
import { NzTabsModule } from 'ng-zorro-antd/tabs';


// Angular Material
import { DragDropModule } from "@angular/cdk/drag-drop";

// Full Calendar
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction'; // this plugin isn´t installed
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import { ViewTasksComponent } from './components/viewtasks/viewtasks.component';


FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin, //resourceTimelinePlugin
]);

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  interactionPlugin,
]);


@NgModule({
  declarations: [
    MainComponent,
    MyTasksComponent,
    DashboardComponent,
    TaskComponent,
    ViewTasksComponent
  ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    NzListModule,
    FormsModule,
    MainRoutingModule,
    FullCalendarModule,
    NzLayoutModule,
    NzIconModule,
    NzMenuModule,
    NzCollapseModule,
    NzAvatarModule,
    NzButtonModule,
    NzDropDownModule,
    NzGridModule,
    NzModalModule,
    NzAffixModule,
    NzSelectModule,
    NzCardModule,
    NzSkeletonModule,
    NzSwitchModule,
    NzDrawerModule,
    NzTabsModule,
    DragDropModule
  ]
})
export class MainModule { }

Answer 1

您还需要在app.module.ts中添加模块的寄存器。在您的示例中，如下所示：

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  interactionPlugin,
  resourceTimelinePlugin
])