fullcalendar/fullcalendar-angular

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

neverlose-lv opened this issue · 17 comments

neverlose-lv commented

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.

davidmarquis commented

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?

  • 👍3
stehag commented

Please prio! :)

  • 👍4
AblHoang commented

Same here, anyone has a workaround?

davidmarquis commented

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.

  • 👍1
FazioNico commented

Got same. Currently using 6.0.0.beta2 and waiting solution to update to 6.0.0.beta3

Snoppi-Wizard commented

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!

FazioNico commented

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

  • 👍1
Snoppi-Wizard commented

No, downgrade does not solve the problem. :-( Still got the same error message

  • 👍2
FazioNico commented

No, downgrade does not solve the problem. :-( Still got the same error message

Oh sorry for this... you can checkout my packages version.. my project is working find.

    "@angular/animations": "~15.0.0",
    "@angular/common": "~15.0.0",
    "@angular/compiler": "~15.0.0",
    "@angular/core": "~15.0.0",
    "@angular/forms": "~15.0.0",
    "@angular/platform-browser": "~15.0.0",
    "@angular/platform-browser-dynamic": "~15.0.0",
    "@angular/router": "~15.0.0",
    "@fullcalendar/angular": "6.0.0-beta.2",
    "@fullcalendar/core": "6.0.0-beta.2",
    "@fullcalendar/google-calendar": "6.0.0-beta.2",
    "@fullcalendar/interaction": "6.0.0-beta.2",
    "@fullcalendar/list": "6.0.0-beta.2",
    "@fullcalendar/timegrid": "6.0.0-beta.2",

Try delete package-lock.json and node_modules then run npm install

Snoppi-Wizard commented

No, still not better. Instead of the other modules in version 15.0.0 I use 15.0.2.
But the point is, as far as I guess, that the fullcalender imports the BrowserModul.
Also in Version 6.0.0-beta2.

What I try to do now is to remove fullcalendarmodule from MyCalendarModule and put it in the app.module.
And also my components go from MyCalendarModule to the app.module (in the declarations and exports). Seems to work, but of course I lose the lazy loading :-(

BenRacicot commented

@arshaw can you confirm that this BrowserModule issue we're seeing is related to an improper import within FullCalendar?

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.

I can confirm this only occurs in feature modules where FullCalendarModule is imported.

Lightw3ight commented

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

  • 👍2
DywiTom commented

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.

  • 👍2
oliverguenther commented

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

  • 👍1
maxime216-pro commented

>

This works for me as well even if its a bit dirty. Thanks for that.

arshaw commented

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

  • 👍5
  • ❤️5
oliverguenther commented

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

  • 👍2