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

我有一个错误：

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';

---

您必须在组件中包含日历核心对象：

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引用。

您必须在组件中包含日历核心对象：

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引用。

这就是我在项目中解决的问题

在我的模块中，按此顺序导入并注册我的插件

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=>日历

这就是我在项目中解决这个问题所做的

在我的模块中，按此顺序导入并注册我的插件

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=>日历

这将暂时起作用，但随着时间的推移，代码被修改，如果日历变得未使用，TypeScript将省略导入，并且再次失败。为了避免这种可能性，请明确表示，因为这有一个语法。导入“@fullcalendar/core”；。这意味着导入此模块以消除其副作用。这将暂时起作用，但随着时间的推移，代码会被修改，如果日历变得未使用，TypeScript将删除导入，并再次失败。为了避免这种可能性，请明确表示，因为这有一个语法。导入“@fullcalendar/core”；。这意味着导入此模块以了解其副作用。