Angular SSR - ReferenceError: Element is not defined

Question

I have an angular 7 project that I'm developping. I use server-side rendering to allow facebooks crawler to work properly. Until now, I've developped already some components and haven't encountered any troubles yet. But now I'm having a problem since I'm working on a component using fullcalendar...

There are no troubles serving the application using ng s. But when I try to build the application using server-side rendering npm run build:ssr && npm run serve:ssr, I'm now receiving the following error: npm ERR! code ELIFECYCLE

Until now I made a npm install and npm audit fix but this hasn't helped. I suppose that the problem comes from a bad configuration in either my app.module.ts or app.server.module.ts but I can't figure it out.

Here the content of the error message:

C:myApp\dist\server.js:151900
    var matchesMethod = Element.prototype.matches ||
                        ^

ReferenceError: Element is not defined
    at C:myApp\dist\server.js:151900:25
    at C:myApp\dist\server.js:151801:13
    at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
    at __webpack_require__ (C:myApp\dist\server.js:20:30)
    at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
    at __webpack_require__ (C:myApp\dist\server.js:20:30)
    at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
    at __webpack_require__ (C:myApp\dist\server.js:131212:30)
    at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
    at __webpack_require__ (C:myApp\dist\server.js:131212:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\myUser\AppData\Roaming\npm-cache\_logs\2019-04-28T20_11_07_675Z-debug.log

Content of npm debug.log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'serve:ssr' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve:ssr', 'serve:ssr', 'postserve:ssr' ]
5 info lifecycle [email protected]~preserve:ssr: [email protected]
6 info lifecycle [email protected]~serve:ssr: [email protected]
7 verbose lifecycle [email protected]~serve:ssr: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve:ssr: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\myApp\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Bitvise SSH Client;C:\Program Files (x86)\AOMEI Backupper;C:\Program Files\nodejs\;C:\Program Files (x86)\GNU Tools Arm Embedded\7 2018-q2-update\bin;C:\Users\myUser\AppData\Local\Microsoft\WindowsApps;C:\Users\myUser\AppData\Roaming\Composer\vendor\bin;C:\Program Files (x86)\GnuWin32\bin;C:\mingw\bin;C:\Users\Uchendu\AppData\Roaming\npm;C:\Users\myUser\Desktop\Etudes\Math spec\programmation\bin;C:\Program Files\Java\jdk1.8.0_144\bin;
9 verbose lifecycle [email protected]~serve:ssr: CWD: C:myApp
10 silly lifecycle [email protected]~serve:ssr: Args: [ '/d /s /c', 'node dist/server' ]
11 silly lifecycle [email protected]~serve:ssr: Returned: code: 1  signal: null
12 info lifecycle [email protected]~serve:ssr: Failed to exec serve:ssr script
13 verbose stack Error: [email protected] serve:ssr: `node dist/server`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\myApp
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve:ssr"
18 verbose node v10.15.3
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve:ssr: `node dist/server`
22 error Exit status 1
23 error Failed at the [email protected] serve:ssr script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Are there any suggestions how I can solve that problem?

I had an ElementRef without Element type in a constructor. Since that elementRef wasn't actually used I deleted it. Sadly this hasn't changed anything, I'm still receiving the same error message. — Uchendu
– Uchendu, Commented Apr 29, 2019 at 21:09

Reactgular · Accepted Answer · 2019-04-30 13:11:53Z

3

The problem is coming from a third-party library.

https://github.com/fullcalendar/fullcalendar-angular

ReferenceError: Element is not defined
    at C:myApp\dist\server.js:151900:25
    at C:myApp\dist\server.js:151801:13
    at Object.<anonymous> (C:myApp\dist\server.js:151803:2)
    at __webpack_require__ (C:myApp\dist\server.js:20:30)
    at Module.<anonymous> (C:myApp\dist\server.js:151309:76)
    at __webpack_require__ (C:myApp\dist\server.js:20:30)
    at Object.@fullcalendar/angular (C:myApp\dist\server.js:134654:18)
    at __webpack_require__ (C:myApp\dist\server.js:131212:30)
    at Module../node_modules/@fullcalendar/angular/fullcalendar-angular.ngfactory.js (C:myApp\dist\server.js:131336:79)
    at __webpack_require__ (C:myApp\dist\server.js:131212:30)

It looks like it's failing to import the component factory for the calendar component, and this makes me think that you're missing some node dependencies.

Verify that you've installed the @fullcalendar/core @fullcalendar/daygrid packages.

This library is using another JavaScript library (the "core" package) which isn't designed for server-side rendering. While you might be able to compile the project. If there is anything in the "core" library that can't run on NodeJS then it will likely fail to compile or will fail to run.

edited Apr 30, 2019 at 13:11

answered Apr 29, 2019 at 22:41

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Uchendu Over a year ago

I have installed the two packages. Thanks to your answer I stumbled upon the following issue post of the fullcalendar angular plugin on github: github.com/fullcalendar/fullcalendar-angular/issues/129

Pardeep Jain Over a year ago

What will be the solution in that case if a third party plugin doesn't support SSR?

Uchendu Over a year ago

@PardeepJain Either adapt the plugin yourself to guarantee SSR support or search for an alternative... I choosed in my case to search for an alternative since adapting an existing plugin results in more work to keep your application maintained

alvinydev Over a year ago

@Uchendu do you know any better calendar alternatives which supports Angular Universal?

Uchendu Over a year ago

@AlvinYanson At the end, I made a small jQuery calendar myself which matched my needs. You may take a look at Matt Lewis Angular Calendar. But I didn't test it with SSR. Probably there are new plugins for the latest Angular version. I used Angular 7 when I asked my question. Another possible solution could be to search for other javascript calendar plugins.

NickCoder · Accepted Answer · 2019-08-02 11:00:00Z

-1

ReferenceError: window is not defined
    at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:11220:30237)
    at 5RHE.module.exports (D:\bid\mii\pdfconvetor\dist\server\main.js:11181:37)
    at Object.5RHE (D:\bid\mii\pdfconvetor\dist\server\main.js:11183:112)
    at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
    at Module.K011 (D:\bid\mii\pdfconvetor\dist\server\main.js:61812:17)
    at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
    at Object.0 (D:\bid\mii\pdfconvetor\dist\server\main.js:992:18)
    at __webpack_require__ (D:\bid\mii\pdfconvetor\dist\server\main.js:20:30)
    at D:\bid\mii\pdfconvetor\dist\server\main.js:84:18
    at Object.<anonymous> (D:\bid\mii\pdfconvetor\dist\server\main.js:87:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: `node dist/server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mittal\AppData\Roaming\npm-cache\_logs\2019-08-02T10_47_18_582Z-debug.log

edited Aug 2, 2019 at 11:00

NickCoder

1,5302 gold badges24 silver badges37 bronze badges

answered Aug 2, 2019 at 10:50

Santhiya Mittal

11 bronze badge

4 Comments

Santhiya Mittal Over a year ago

i will get this error on the time of run a serve:ssr

Santhiya Mittal Over a year ago

i will current versions are

NickCoder Over a year ago

Ask A New Question for that

Santhiya Mittal Over a year ago

Angular CLI: 8.0.6 Node: 10.15.1 OS: win32 x64 Angular: 8.0.3

NickCoder · Accepted Answer · 2019-08-02 12:08:37Z

-1

Add this line in your server.ts File :

global['Event'] = null;
global['KeyboardEvent'] = null;

edited Aug 2, 2019 at 12:08

NickCoder

1,5302 gold badges24 silver badges37 bronze badges

answered Jul 22, 2019 at 12:35

Vibhu kumar

4065 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular SSR - ReferenceError: Element is not defined

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related