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

[satishbluone]

I am using below versions: "@fullcalendar/angular": "^5.3.0", "@fullcalendar/bootstrap": "^5.3.0", "@fullcalendar/core": "^5.3.0", "@fullcalendar/daygrid": "^5.3.0", "@fullcalendar/interaction": "^5.3.0", "@fullcalendar/list": "^5.3.0", "@fullcalendar/timegrid": "^5.3.0",

and "typescript": "~3.8.3" Angular v9.1

It's working well in development mode. but getting the error "Please import the top-level fullcalendar lib before attempting to import a plugin." in production. I already moved the "FullCalendarModule" on top of all modules. please help me to resolve this issue.

[acerix]

I believe it's the same issue that was reported here: https://github.com/fullcalendar/fullcalendar-angular/issues/306

So it should work if you include the plugins as described here:

https://fullcalendar.io/docs/angular

[satishbluone]

I resolved it myself. Thanks.

[faisalshafisit]

@satishbluone How did you solve this. Please explain. I'm stuck in the same issue after upgrading my angular 7 application to angular 10 with aspnetboilerplate.

[satishbluone]

@faisalshafisit please follow the below steps:

1. Add FullCalendarModule in module file and don't register plugins in module file.
2. now import all plugins according to your requirements in Component file and then use the below code to register your plugins calendarOptions: CalendarOptions = { plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, bootstrapPlugin ], themeSystem: "bootstrap", ....... ....... ....... }

[ajaykumarsana]

@satishbluone , @faisalshafisit

looks like below solution would fit best: import { Calendar } from '@fullcalendar/core'; in constructor of the component.ts file, add below constructor() { const name = Calendar.name; }

[Slavrix]

This is what I did to solve this in my project.

in my module import in this order and register my plugins.

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
]);

in the component I use this inside my constructor just before I prepare my calendarOptions

forwardRef(() =>Calendar);

[arshaw]

I've written something explaining why this problem is happening and how I plan to solve it in the future: https://github.com/fullcalendar/fullcalendar-angular/issues/371