Angular 9 Sample Project not working with latest angular

[jgreer9514]

Clone example angular app from main git repo, npm install, ng update, ng serve.

Noticed missing dependency as well in package.json:
"@fullcalendar/angular": "5.0.0-beta.3",

Calendar fails to load and shows:

vdom.js:3 Uncaught Error: Please import the top-level fullcalendar lib before attempting to import a plugin.
at Module../node_modules/@fullcalendar/common/vdom.js (vdom.js:3)
at webpack_require (bootstrap:79)
at Module../node_modules/@fullcalendar/common/main.js (main.js:1)
at webpack_require (bootstrap:79)
at Module../node_modules/@fullcalendar/daygrid/main.js (main.js:1)
at webpack_require (bootstrap:79)
at Module../src/app/app.component.ts (app.component.ts:1)
at webpack_require (bootstrap:79)
at Module../src/app/app.module.ts (app.module.ts:1)
at webpack_require (bootstrap:79)

[dolphinsd]

We have the same issue, it worked fine with 5.0.0-beta.2
It works in development, but not in production

[enigmartin]

Any ideas or workarounds for this? I am having the same issue.

Edit: I got mine working, but I'm not sure what else I'll run into. I used the code from this example, which had different imports: https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/v5/angular?file=/src/app/app.component.html:295-445

[andrejm7]

and now?

[enigmartin]

For context, I'm running this via ng-serve.

FullCalendar was working until I installed the following packages (used in the example above):
"@fullcalendar/interaction": "5.0.0-beta.4"
"@fullcalendar/timegrid": "5.0.0-beta.4"
"@fullcalendar/list": "5.0.0-beta.4"

No errors (either in browser console, ng serve, or in vscode), no calendar. Just the presence of these plugins seems to bork it.

[efess]

This was occurring for me as well, when using the @fullcalendar/resource-timeline@5.0.0-beta.4 plugin with Angular 9. Looks like the vdom requires a window global object which is only initialized by the core component, and webpack either loads it either out of order or excludes it

A workaround would be to include the Calendar object in your component:

import { Calendar } from '@fullcalendar/core';

Then in your constructor actually "use" it so webpack treeshaking doesn't remove it:

const name = Calendar.name

This forces loading/initializing of the core component and the VDom reference before the plugin needs it.

Note: I believe this works in the embedded online sandbox because of the way the sandbox loads modules via service workers

[Aarklendoia]

Same problem for me. The workaround of efess works!

[enigmartin]

@efess that worked for me too. Grazi!

[arshaw]

I wasn't able to consistenly reproduce this. However, I've added a sideEffects:true to the @fullcalendar/core package in hopes that build systems will guarantee the ordering.'

Could someone please try out the new release candidate and see if the problem persists?

[ebiton-eig]

The problem isn't fixed with the RC (Angular 9.1.11):

Error: Please import the top-level fullcalendar lib before attempting to import a plugin.
at Module../node_modules/@fullcalendar/common/vdom.js (https://localhost:4200/vendor.js:155400:11) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../node_modules/@fullcalendar/common/main.js (https://localhost:4200/vendor.js:146169:63) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../node_modules/@fullcalendar/timegrid/main.js (https://localhost:4200/vendor.js:157790:78) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../src/app/components/cycles/cycles.component.ts (https://localhost:4200/main.js:3541:80) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../src/app/app-routing.module.ts (https://localhost:4200/main.js:87:93) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../src/app/app.module.ts (https://localhost:4200/main.js:202:77) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []
at Module../src/main.ts (https://localhost:4200/main.js:9319:73) []
at webpack_require (https://localhost:4200/runtime.js:80:30) []

[efess]

No change here as well, running Angular 9.1.3

vdom.js:3 Uncaught Error: Please import the top-level fullcalendar lib before attempting to import a plugin.
at Module../node_modules/@fullcalendar/common/vdom.js (vdom.js:3)
at webpack_require (bootstrap:79)
at Module../node_modules/@fullcalendar/common/main.js (main.js:1)
at webpack_require (bootstrap:79)
at Module../node_modules/@fullcalendar/resource-timeline/main.js (main.js:1)

[arshaw]

I don't have any reproducible projects from you all to be able to test the failure case, but I have a hunch about what's happening. If you would please look at the angular sample project while I pose a theory...

It's true that you must require the @fullcalendar/angular lib (and thus the @fullcalendar/core lib) before importing any plugins. It's just a requirement. That's what this line in the sample project is for:

https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/angular/src/app/app.component.ts#L2

import { CalendarOptions, DateSelectArg, EventClickArg, EventApi } from '@fullcalendar/angular';

However, that only imports types. That statement will get removed for runtime because it doesn't import any real classes/functions/etc.

On a related note, there is another @fullcalendar/angular import here:

https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/angular/src/app/app.module.ts#L3

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // <-- here!!!
import { AppComponent } from './app.component';

If the imports happen in the order depicted in that snippet, everything will turn out fine. However, if you switch the order, things will break:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; // order switched!!!
import { FullCalendarModule } from '@fullcalendar/angular'; // order switched!!!

Things will break because the FC plugins are loaded after @fullcalendar/core in the overall depth-first import order.

QUESTION FOR YOU: Does the snippet above reflect how any of your apps are set up? Are you importing your own app's component before the fullcalendar module?

Regardless, it's untenable to expect people to follow such arbitrary ordering for seemingly irrelevant import statements.

Assuming my theory is correct, I'll probably recommend that people add this line right above where they import their plugins:

around here... https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/angular/src/app/app.component.ts#L3

add...

import { Component } from '@angular/core';
import { CalendarOptions, DateSelectArg, EventClickArg, EventApi } from '@fullcalendar/angular';
+ import '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import { INITIAL_EVENTS, createEventId } from './event-utils';

Can you all try that out and see if it works? It's very similar to @efess's workaround.

[rattkin]

works!!!!

note: import order is tricky, because some people (me included) order imports alphabetically.
note2: almost nobody is anal-retentive to order import manually but many people use handy vscode keyboard-shortcut alt+shift+o which removes unused imports and auto-formats and alphabetizes the rest.
the auto-formatting seems to put imports from @zzzz above the ./aaaaa

My current import list, auto-formatted:

import { CalendarOptions, DateSelectArg, EventApi, EventClickArg } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import timeGridPlugin from '@fullcalendar/timegrid';

[efess]

Can you all try that out and see if it works? It's very similar to @efess's workaround.

Yep this works for me. I had the @fullcalendar/angular import late in the app.module.ts. Re-ordering it above the app.component.ts import solved it.

Thank you!

[adenta]

Just want to chime in and say this issue is also present with React. I was able to fix it with the same fix listed above, except importing react instead of angular.

[qdelettre]

This is really annoying. Imports order should not have side effects.
My library is using FC. How should i solve this issue, as i already have the suggested import order in my library module and still have the error ?

[arshaw]

@qdelettre I'd need a reduced test case to understand what's going on. Please open up a new ticket.

I officially released v5, and with the release of v5 I am now recommending a new technique in order to make this import-ordering problem less likely to happen.

Please see the updated Angular docs: https://fullcalendar.io/docs/angular
Please look at the registerPlugins part.

I'm encouraging people to use register their plugins in the same place they import them. This makes the ordering of the plugin imports relative to the order of the @fullcalendar/angular package more explicit.

@adenta, I have plans to emphasize how important the ordering is for react/vue/vanilla-js. I'll update the docs soon.