Reference Error: Element is not defined (Angular 9 Universal)

[gitalvininfo]

🐞 bug report

Affected Package

The issue is caused by package @angular/.... Not Exactly sure what package is causing the error/issue ### Is this a regression? Yes, the previous version in which this bug was not present was: .... First time facing this issue since this is my first time upgrading to Angular Universal ### Description A clear and concise description of the problem... So basically I run the command `ng add @nguniversal/express-engine` to install angular universal and everything works fine. I run the command `npm run build:ssr` and also everything works fine, the dist folder is created, however, when I try to run the command `npm run serve:ssr`, I am having an error which says **Reference Error: Element is not defined**. I don't know what causes the error since it just says **Reference Error: Element is not defined** everytime I try to run the command `npm run serve:ssr` ## 🔬 Minimal Reproduction

Cannot upload the code. Big App.

🔥 Exception or Error

ReferenceError: Element is not defined
    at D:\Alvin\PltradesUniversal\dist\gradus\server\main.js:1:4512778

🌍 Your Environment

Angular Version:

{
  "name": "sampleapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "serve": "clear && ng serve --poll=3000 --verbose",
    "build": "clear && ng build --prod --output-hashing=all --aot --verbose",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run gradus:serve-ssr",
    "serve:ssr": "node dist/gradus/server/main.js",
    "build:ssr": "ng build --prod && ng run gradus:server:production",
    "prerender": "ng run gradus:prerender"
  },
  "private": true,
  "dependencies": {
    "1.1.1": "^1.0.0",
    "@angular/animations": "^9.0.7",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "9.0.7",
    "@angular/compiler": "9.0.7",
    "@angular/core": "9.0.7",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "9.0.7",
    "@angular/http": "^7.2.16",
    "@angular/material": "^9.1.3",
    "@angular/platform-browser": "9.0.7",
    "@angular/platform-browser-dynamic": "9.0.7",
    "@angular/platform-server": "9.0.7",
    "@angular/router": "9.0.7",
    "@ctrl/ngx-emoji-mart": "^1.0.6",
    "@fullcalendar/angular": "^4.4.5-beta",
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/interaction": "^4.4.0",
    "@fullcalendar/timegrid": "^4.4.0",
    "@kolkov/ngx-gallery": "^1.0.11",
    "@nguniversal/express-engine": "^9.0.2",
    "@oasisdigital/angular-material-search-select": "^1.1.1",
    "@swimlane/ngx-charts": "^13.0.2",
    "@teamhive/lottie-player": "^1.0.0",
    "@types/date-fns": "^2.6.0",
    "@types/socket.io": "^2.1.4",
    "angular-calendar": "^0.28.2",
    "angular-detect-browser": "^1.0.2",
    "angular-draggable-droppable": "^4.3.8",
    "angular-fastclick": "^1.0.6",
    "angular-in-memory-web-api": "^0.9.0",
    "angular-resizable-element": "^3.3.0",
    "angular-zoom": "0.0.5",
    "angularx-social-login": "^2.2.1",
    "bowser": "^2.8.1",
    "calendar-utils": "^0.7.0",
    "classlist.js": "1.1.20150312",
    "core-js": "^3.6.4",
    "date-fns": "^2.9.0",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "2.0.8",
    "html-webpack-plugin": "^3.2.0",
    "html2canvas": "^1.0.0-rc.5",
    "is-base64": "^1.0.0",
    "leaflet-map": "0.2.1",
    "material-design-icons": "^3.0.1",
    "medium-zoom": "^1.0.5",
    "mysql": "^2.17.1",
    "ng-snotify": "^9.0.1",
    "ng-socket-io": "^0.2.4",
    "ngx-build-plus": "^9.0.6",
    "ngx-chips": "^2.1.0",
    "ngx-drag-scroll": "^8.0.0-beta.2",
    "ngx-gallery": "^5.10.0",
    "ngx-image-cropper": "^3.1.3",
    "ngx-lightbox": "^2.1.1",
    "ngx-mat-select-search": "^2.1.1",
    "ngx-order-pipe": "^2.0.4",
    "ngx-owl-carousel-o": "^3.0.0",
    "ngx-pagination": "^5.0.0",
    "ngx-quicklink": "^0.2.0",
    "ngx-quill": "^7.3.12",
    "npm-check": "^5.9.2",
    "rxjs": "6.5.4",
    "rxjs-compat": "^6.5.4",
    "socket.io-client": "^2.3.0",
    "tslib": "^1.10.0",
    "uninstall": "0.0.0",
    "web-animations-js": "^2.3.2",
    "webpack": "^4.41.5",
    "xmlhttprequest": "^1.8.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.7",
    "@angular/cli": "9.0.7",
    "@angular/compiler-cli": "9.0.7",
    "@angular/language-service": "9.0.7",
    "@nguniversal/builders": "^9.0.2",
    "@types/express": "^4.17.0",
    "@types/hammerjs": "2.0.36",
    "@types/jasmine": "^3.5.2",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "ftp-deploy": "^2.3.6",
    "https-proxy-agent": "^4.0.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^3.1.0",
    "karma-jasmine-html-reporter": "^1.5.1",
    "node-sass": "^4.13.1",
    "protractor": "5.4.2",
    "ts-node": "^8.6.2",
    "typescript": "^3.7.5"
  },
  "peerDependencies": {},
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.2.",
  "main": "webpack.config.js",
  "repository": {
    "type": "git",
    "url": "git+https://usertesting@bitbucket.org/sampleapp/frontend.git"
  },
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/sampleapp/frontend#readme"
}

Please tell me if I miss something. Thank you.

[alan-agius4]

Hi @gitalvininfo, Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[gitalvininfo]

Hi Already solved it. I just install domino in npm and that solved my problem. For future developers who may encounter this try this solution.

Import it at server.ts and try to put it below zone.js import.

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join('.', 'dist/gradus/browser', 'index.html')).toString();
Object.assign(global, domino.impl);
(global as any)['KeyboardEvent'] = domino.impl.Event;
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

[EmmanuelDemey]

We have the same kind of issue with Document.

@alan-agius4 : Is the solution proposed by @gitalvininfo the only solution to this issue ?

https://github.com/manfredsteyer/angular-oauth2-oidc/issues/773

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}