Angular Universal SSR + Serverless Framework ReferenceError: Event is not defined when Trigger the URL

Question

I'm Trying to add SSR for my angular application and after days i was able to finally Build it right.

Build Command : npm run build:ssr

Out Put :

 Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {3} polyfills-es2015.458aac6b11c541194b4a.js (polyfills) 58.5 kB [initial] [rendered]
chunk {4} polyfills-es5.44c9dea30eed52ba4506.js (polyfills-es5) 150 kB [initial] [rendered]
chunk {2} main-es2015.3ba2902bcbc10c1675ba.js (main) 3.36 MB [initial] [rendered]
chunk {2} main-es5.3ba2902bcbc10c1675ba.js (main) 3.58 MB [initial] [rendered]
chunk {6} 6-es2015.53bbc3626530cc9d62a6.js () 875 kB  [rendered]
chunk {6} 6-es5.53bbc3626530cc9d62a6.js () 875 kB  [rendered]
chunk {0} runtime-es2015.a4937581a2ac14eb4b95.js (runtime) 2.31 kB [entry] [rendered]
chunk {0} runtime-es5.a4937581a2ac14eb4b95.js (runtime) 2.31 kB [entry] [rendered]
chunk {1} 1-es2015.1db2b7e193a26ab34e26.js () 14.8 kB  [rendered]
chunk {1} 1-es5.1db2b7e193a26ab34e26.js () 19.3 kB  [rendered]
chunk {7} 7-es2015.49a93052cb35da6a7127.js () 92 bytes  [rendered]
chunk {7} 7-es5.49a93052cb35da6a7127.js () 92 bytes  [rendered]
chunk {8} 8-es2015.f442eec7404ae5a74fa8.js () 2.87 kB  [rendered]
chunk {8} 8-es5.f442eec7404ae5a74fa8.js () 2.87 kB  [rendered]
chunk {5} styles.dd45993893183a374073.css (styles) 260 kB [initial] [rendered]
Date: 2020-05-05T23:11:30.255Z - Hash: 237a75faa10dbd147775 - Time: 74145ms
Hash: b0b68963644c131250a2
Time: 42240ms
Built at: 05/05/2020 7:12:16 PM
                                             Asset       Size  Chunks                    Chunk Names
                     highlight-js-lib-highlight.js  219 bytes       1  [emitted]         highlight-js-lib-highlight
                    highlightjs-line-numbers-js.js   9.92 KiB       2  [emitted]         highlightjs-line-numbers-js
                                           main.js   19.5 MiB       3  [emitted]  [big]  main
                           vendors~highlight-js.js   1.07 MiB       4  [emitted]  [big]  vendors~highlight-js
vendors~highlight-js~highlight-js-lib-highlight.js   45.4 KiB       0  [emitted]         vendors~highlight-js~highlight-js-lib-highlight
Entrypoint main [big] = main.js
chunk    {0} vendors~highlight-js~highlight-js-lib-highlight.js (vendors~highlight-js~highlight-js-lib-highlight) 45.3 KiB <{3}> ={1}= ={4}= [rendered] split chunk (cache group: vendors) (name: vendors~highlight-js~highlight-js-lib-highlight)
chunk    {1} highlight-js-lib-highlight.js (highlight-js-lib-highlight) 83 bytes <{3}> ={0}= [rendered]
chunk    {2} highlightjs-line-numbers-js.js (highlightjs-line-numbers-js) 9.81 KiB <{3}> [rendered]
chunk    {3} main.js (main) 19.1 MiB >{0}< >{1}< >{2}< >{4}< [entry] [rendered]
chunk    {4} vendors~highlight-js.js (vendors~highlight-js) 1.06 MiB <{3}> ={0}= [rendered] split chunk (cache group: vendors) (name: vendors~highlight-js)

> [email protected] compile:server /Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart
> webpack --config webpack.server.config.js --progress --colors

Hash: 3b040255852c8146c5c5
Version: webpack 4.39.2
Time: 22584ms
Built at: 05/05/2020 7:12:49 PM
    Asset      Size  Chunks             Chunk Names
server.js  26.4 MiB       0  [emitted]  server
Entrypoint server = server.js
  [0] ./server.ts 1.99 KiB {0} [built]
  [2] external "events" 42 bytes {0} [built]
  [3] external "fs" 42 bytes {0} [built]
  [4] external "timers" 42 bytes {0} [optional] [built]
  [5] external "crypto" 42 bytes {0} [built]
 [13] external "path" 42 bytes {0} [built]
 [36] external "buffer" 42 bytes {0} [built]
 [57] external "stream" 42 bytes {0} [built]
 [62] external "zlib" 42 bytes {0} [built]
 [83] external "url" 42 bytes {0} [built]
 [90] external "http" 42 bytes {0} [built]
[286] external "child_process" 42 bytes {0} [built]
[297] external "https" 42 bytes {0} [built]
[572] external "os" 42 bytes {0} [built]
[793] ./dist/server/main.js 19.5 MiB {0} [built]
    + 786 hidden modules

WARNING in ./node_modules/jsdom/lib/jsdom/utils.js 216:21-40
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/jsdom/lib/jsdom.js
 @ ./node_modules/mock-browser/lib/MockBrowser.js
 @ ./node_modules/mock-browser/index.js
 @ ./server.ts

then I want to test it using serverless offline : npm run serve:ssr

> serverless offline start

Serverless: Starting Offline: ENGG/us-east-1.

Serverless: Routes for api:
Serverless: ANY /{proxy*}
Serverless: ANY /
Serverless: POST /{apiVersion}/functions/ibrainmart-ENGG-api/invocations

Serverless: Offline [HTTP] listening on http://localhost:3000
Serverless: Enter "rp" to replay the last request

Serverless: ANY /ENGG (λ: api)
Serverless: Error while loading api

Now the Problem is when i try to invoke URL : http://localhost:3000 I'm Getting Below error

Serverless: ANY /ENGG (λ: api)
Serverless: Error while loading api
ReferenceError: Event is not defined
    at /Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:328709:42
    at Module.KL2N (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:328719:2)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.V7fC (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:456942:14)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.K011 (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:327243:37)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.0 (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:174669:18)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at /Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169300:18
    at Object.<anonymous> (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169303:10)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:21:30)
    at Module.<anonymous> (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:132:91)
    at __webpack_require__ (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:21:30)
    at /Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:85:18
    at Object.<anonymous> (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:88:10)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/lambda.js:2:16)
    at Module._compile (internal/modules/cjs/loader.js:777:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.createHandler (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/serverless-offline/src/functionHelper.js:215:15)
    at handler (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/serverless-offline/src/ApiGateway.js:485:40)
    at module.exports.internals.Manager.execute (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/toolkit.js:41:33)
    at Object.internals.handler (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/handler.js:46:48)
    at exports.execute (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/handler.js:31:36)
    at Request._lifecycle (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/request.js:312:68)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
    at Request._execute (/Users/liyanaarachchi/[email protected]/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/request.js:221:9)

This is My Server.ts File

import 'zone.js/dist/zone-node';

import * as express from 'express';
import * as compression from 'compression';
import * as cors from 'cors';
import * as bodyParser from 'body-parser';
import { join } from 'path';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
const MockBrowser = require('mock-browser').mocks.MockBrowser;
import { resolve } from 'path';

const domino = require('domino');
const win = domino.createWindow('');

const mock = new MockBrowser();

global['navigator'] = mock.getNavigator();
global['window'] = win;
global['document'] = win.document;
global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;

// Express server
export const app = express();

app.use(compression());
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {
  AppServerModuleNgFactory,
  LAZY_MODULE_MAP,
  ngExpressEngine,
  provideModuleMap,
} = require('./dist/server/main');

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', (_, options, callback) => {
  const engine = ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
      provideModuleMap(LAZY_MODULE_MAP),
    ],
  });

  engine(_, options, callback);
});

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get(
  '*.*',
  express.static(DIST_FOLDER, {
    maxAge: '1y',
  }),
);

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req, res }, (err, html) => {
    if (html) {
      if (req.headers.host.indexOf('amazonaws.com') > 0) {
        html = html.replace('<base href="/', '<base href="/dev/');
      }
      res.send(html);
    } else {
      res.send(err);
    }
  });
});

and this my lambda function

const awsServerlessExpress = require('aws-serverless-express');
const server = require('./dist/server');
const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware');

const binaryMimeTypes = [
  'application/javascript',
  'application/json',
  'application/octet-stream',
  'application/xml',
  'image/jpeg',
  'image/png',
  'image/gif',
  'text/comma-separated-values',
  'text/css',
  'text/html',
  'text/javascript',
  'text/plain',
  'text/text',
  'text/xml',
  'image/x-icon',
  'image/svg+xml',
  'application/x-font-ttf',
  'font/ttf',
  'font/otf',
];

server.app.use(awsServerlessExpressMiddleware.eventContext());

const serverProxy = awsServerlessExpress.createServer(server.app, null, binaryMimeTypes);
module.exports.handler = async (event, context) => {awsServerlessExpress.proxy(serverProxy, event, context);}

Does anyone know how to resolve this issue ..?

My Package.json


{
  "name": "ibrainmart",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:ssr": "serverless offline start",
    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
    "deploy": "serverless deploy",
    "terminate": "serverless remove",
    "build:client-and-server-bundles": "ng build --prod && ng run ibrainmart:server:production --bundleDependencies all"
  },
  "private": true,
  "dependencies": {
    "@angular/platform-server": "~8.2.13",
    "@nguniversal/express-engine": "^8.2.6",
    "@nguniversal/module-map-ngfactory-loader": "v8.2.6",
    "aws-serverless-express": "^3.3.6",
    "cors": "^2.8.5",
    "express": "^4.15.2",
    "@aws-amplify/auth": "^3.2.6",
    "@agm/core": "^1.1.0",
    "@angular/animations": "^8.1.3",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.1.3",
    "@angular/compiler": "~8.1.3",
    "@angular/core": "~8.1.3",
    "@angular/forms": "~8.1.3",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "~8.1.3",
    "@angular/platform-browser-dynamic": "~8.1.3",
    "@angular/router": "~8.1.3",
    "@aws-amplify/ui": "^1.0.23",
    "@elastic/elasticsearch": "^7.6.1",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
    "@ng-select/ng-select": "^3.0.7",
    "@ng-toolkit/universal": "^7.1.2",
    "@ngx-share/button": "^7.1.4",
    "@ngx-share/buttons": "^7.1.4",
    "@ngx-share/core": "^7.1.4",
    "angular-animate": "^1.7.8",
    "angular-bootstrap-datetimepicker": "^4.0.2",
    "angular-font-awesome": "^3.1.2",
    "angular-material": "^1.1.19",
    "angular-messages": "^1.7.8",
    "angular-multiple-select": "^1.1.3",
    "angular-popper": "^2.0.1",
    "angular-sortablejs": "^2.7.0",
    "aws-amplify": "^1.1.36",
    "aws-amplify-angular": "^3.0.11",
    "aws-elasticsearch-client": "^2.0.0",
    "aws-sdk": "^2.648.0",
    "bootstrap": "^4.4.1",
    "bootstrap-table": "^1.15.3",
    "bootstrap4-toggle": "^3.5.0",
    "buffer": "^5.5.0",
    "date-fns": "^2.11.0",
    "dropify": "^0.2.2",
    "e": "0.0.4",
    "elasticsearch": "^16.7.1",
    "elasticsearch-browser": "^16.7.1",
    "font-awesome": "^4.7.0",
    "guid-typescript": "^1.0.9",
    "jquery": "^3.4.1",
    "material-design-icons": "^3.0.1",
    "moment": "^2.24.0",
    "ng-pick-datetime": "^7.0.0",
    "ng-sortgrid": "^1.3.3",
    "ng-zorro-antd": "^8.5.2",
    "ngx-bootstrap": "^5.1.1",
    "ngx-float-button": "^1.0.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-highlightjs": "^4.0.2",
    "ngx-image-cropper": "^2.1.2",
    "ngx-image-editor": "^1.4.1",
    "ngx-paypal": "^5.0.0",
    "ngx-quill": "^7.3.12",
    "ngx-select-dropdown": "^1.1.0",
    "ngx-sortablejs": "^3.1.3",
    "open-iconic": "^1.1.1",
    "paypal-checkout": "^4.0.308",
    "popper.js": "^1.15.0",
    "quill": "^1.3.7",
    "rxjs": "~6.4.0",
    "sortablejs": "^1.10.0-rc3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.803.20",
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular-devkit/core": "~8.3.20",
    "@angular-devkit/schematics": "~8.3.20",
    "@angular/cli": "^8.3.23",
    "@angular/compiler-cli": "~8.1.3",
    "@angular/language-service": "~8.1.3",
    "@types/googlemaps": "^3.39.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.31",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "timelite": "^1.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "serverless": "^1.60.5",
    "serverless-apigw-binary": "^0.4.4",
    "serverless-offline": "^5.12.1",
    "ts-loader": "^5.2.0",
    "webpack-cli": "^3.1.0"
  }
}

Can you put the package.json file? To know the version of all the packages. — Sumit Vekariya
– Sumit Vekariya, Commented May 6, 2020 at 3:38

David · Accepted Answer · 2020-05-22 06:00:51Z

1

This is because one of your dependencies is trying to access the Event object, which is not available by default server side.

Since you are already using domino, you can try adding these lines to your server.ts to make Event object available

//other global declarations
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;

edited May 22, 2020 at 6:00

answered May 21, 2020 at 16:31

David

34.6k13 gold badges90 silver badges124 bronze badges

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

4 Comments

CrazyCoder Over a year ago

ReferenceError: KeyboardEvent is not defined

David Over a year ago

I added more events. The principle is the same. It's probably one of your dependencies, if you want to know which one you show open server.js and check the line throwing the error

CrazyCoder Over a year ago

Related to this error goes away after i change as above. thanks.

hellmit100 Over a year ago

@DragosLupei Were you able to find a fix?

Collectives™ on Stack Overflow

Angular Universal SSR + Serverless Framework ReferenceError: Event is not defined when Trigger the URL

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related