尝试导入插件angular之前，fullcalendar lib出错

Question

我有这个错误：

Error: Please import the top-level fullcalendar lib before attempting to import a plugin.

当我将resourceTimeGridPlugin添加到插件中时。

我的代码：

import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendarComponent } from '@fullcalendar/angular';
import timeGridPlugin from '@fullcalendar/timegrid';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';

Answer 1

您必须在组件中包含Calendar Core对象：

import { Calendar } from '@fullcalendar/core';

在您的构造函数中，您必须添加以下内容：

constructor() { 
const name = Calendar.name; 
}

完整示例：

import { Component } from '@angular/core';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
};
constructor() { 
const name = Calendar.name;
}
}

这会在插件需要之前强制加载/初始化核心组件和VDom引用。

Answer 2

这就是我在项目中解决这个问题的方法。

在我的模块中，按照这个顺序导入并注册我的插件。

import { FullCalendarModule } from "@fullcalendar/angular";
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import momentPlugin from '@fullcalendar/moment';
import rrulePlugin from '@fullcalendar/rrule';
import timeGridPlugin from '@fullcalendar/timegrid';
FullCalendarModule.registerPlugins([
dayGridPlugin,
interactionPlugin,
listPlugin,
momentPlugin,
rrulePlugin,
timeGridPlugin
]);

在组件中，就在我准备calendarOptions 之前，我在构造函数中使用了这个

forwardRef(() =>Calendar);