fullcalendar-angular: Angular Universal: Element is not defined

Hi there!

Thank you for this fantastic Angular wrapper of Fullcalendar.

Unfortunately it doesn’t seem to build with Angular Universal. Here’s a repo that reproduces the error:

https://github.com/martinsiden/fullcalendar-universal

Here’s the steps I took when creating the repo:

Fire up new Angular CLI project:

ng new fullcalendar-universal

Add Angular Universal:

ng add @nguniversal/express-engine --clientProject fullcalendar-universal

Test run without Fullcalendar:

npm run build:ssr && npm run serve:ssr

Install Fullcalendar:

npm i --save @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid

Adding Fullcalendar to app.module.ts:

imports: [
  ...
  FullCalendarModule
]

Adding fullcalendar to app.component.html and passing in dayGridPlugin to it.

Adding CSS to angular.json:

"styles": [
    "node_modules/@fullcalendar/core/main.css",
    "node_modules/@fullcalendar/daygrid/main.css",
    "src/styles.css"
],

Starting “normally” with:

npm start

But running via Universal with:

npm run build:ssr && npm run serve:ssr

fails with:

/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133941
    var matchesMethod = Element.prototype.matches ||
                    ^

ReferenceError: Element is not defined
at /workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133941:25
at /workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133842:13
at Object.<anonymous> (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133844:2)
at __webpack_require__ (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:20:30)
at /workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:142649:30
at Object.<anonymous> (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:142651:2)
at __webpack_require__ (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:20:30)
at Object.@fullcalendar/daygrid (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133311:18)
at __webpack_require__ (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:132835:30)
at Module../src/app/app.component.ts (/workspace/fullcalendar-universal/fullcalendar-universal/dist/server.js:133017:79)

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 23 (4 by maintainers)

Most upvoted comments

In app.component.ts

isBrowser = false;

  constructor(
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformBrowser(this.platformId)) {
      this.isBrowser = true
    }
  }

In app.component.html <full-calendar *ngIf="isBrowser" [options]="calendarOptions"></full-calendar>

For future readers, you could try this one to prevent reference errors

gitalvininfo on Mar 10, 2023

@jovpet @ajayashok @amunir9

If you still have a similar problem, try using this starter: https://github.com/Angular-RU/angular-universal-starter/

If you’re still in trouble, write to me about it.

irustm on Aug 19, 2019