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)

[irustm]

@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.

[hamzou247]

Hello everybody,

I have been trying with all the proposed solutions but no luck. Does anyone get passed this error. I think i soved it somehow in the past but i have unfortunaltely lost the related code. Can anyone help me please? i’m using version 4.4.2