fullcalendar-angular: Full calendar does not work when is used in a lazy-loaded module

angular 15.0.2 fullcalendar 6.0.0-beta.3

I have tried to use full calendar in a module that is not lazy loaded - it works ok.

But when I use it in a module that is lazy loaded (via routing), then it bails an error:

Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

This happens likely, because you are importing BrowserModule, which you should not do. You can import CommonModule.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 14
  • Comments: 17 (1 by maintainers)

Most upvoted comments

Thanks for the report. This is now fixed in v6.0.0-beta.4

Please prio! 😃

Same here, just upgraded to Angular 14, with 6.0.0-beta3.

Offending import: https://github.com/fullcalendar/fullcalendar-angular/blob/v6.0.0-beta.3/lib/src/full-calendar.module.ts#L14

Is there a specific reason why BrowserModule is imported?

Works great now on v15, thanks for the quick fix and all your efforts.

Small workaround:

  • Go to app.module.ts
  • Replace BrowserModule with FullCalendarModule in imports
  • Add your component(s) which are using FullCalendar in declarations there

No lazy loading possible yet.

This is because FullCalendarModule is importing BrowserModule https://github.com/fullcalendar/fullcalendar-angular/blob/v6/lib/src/full-calendar.module.ts As I understand it, BrowserModule should never be imported inside a library and should only be imported in the root module of an application

I suspect what should be imported inside FullCalendarModule is CommonModule

No, downgrade does not solve the problem. 😦 Still got the same error message

This issue is preventing us from testing the v6 beta for event projection, as we use the module in two lazy loaded feature modules. I presume that the solution proposed by @Lightw3ight should work, a library should not import the BrowserModule.

I can test the content projection in a simpler project, but I can’t really justify keeping the workaround and preventing two large modules to be loaded upfront

I want to update my project to Angular 15 but I cannot get fullcalendar 6.0.0-beta3 running.

If I run it in the app.module like in the sample project everything is fine. But I use it in a submodule (AppModule => MyServiceModule => MyCalendarModule). I always get the error:

Error: Providers from the BrowserModule have already been loaded.

Please provide a fast solution. I have to do an update as soon as possible. Thank you very much!

You can downgrade to 6.0.0.beta2 with Angular 15 waiting there update fullcalendar

I don’t think there’s a quick workaround for using 6.0.0-beta3 with Angular 14+ in a lazy-loaded Angular module - except from repackaging the lib in your own fork, but this isn’t what I would call ‘quick’, especially since the setup to build the package looks quite extensive.

However, there exists a workaround for using version 5.x in Angular 14:

https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/angular14#workarounds

It involves customizing Webpack to prevent the Angular build from trying to process Full Calendar’s CSS. We’ve put this in place in our project and the workaround works fine.