Блог

Главная - Вопросы по программированию - Ошибка полной библиотеки календаря перед попыткой импортировать плагин angular

Ошибка полной библиотеки календаря перед попыткой импортировать плагин angular

#javascript #angular #webpack #types #fullcalendar

#javascript #angular #webpack #типы #полный календарь

Вопрос:

У меня эта ошибка:

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

Ответ №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 до того, как это понадобится плагину.

Комментарии:

1. Пока это будет работать, но по мере изменения кода с течением времени, если Calendar он станет неиспользуемым, TypeScript отменит импорт, и он снова завершится неудачей. Чтобы избежать такой возможности, будьте явны, поскольку для этого есть синтаксис. import '@fullcalendar/core'; . Это означает импортировать этот модуль из-за его побочных эффектов.

Ответ №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);