Angular Universal SSR + Serverless Framework ReferenceError: событие не определяется при запуске URL-адреса - PullRequest
Новая
       81

Angular Universal SSR + Serverless Framework ReferenceError: событие не определяется при запуске URL-адреса

0 голосов
/ 06 мая 2020

Я пытаюсь добавить SSR для своего angular приложения, и через несколько дней я наконец смог его правильно собрать.

Команда сборки: 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)

> ibrainmart@0.0.0 compile:server /Users/liyanaarachchi/ibrainmart@gmail.com/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

, затем я хочу протестировать его без сервера в автономном режиме: 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

Теперь проблема в том, что я пытаюсь вызвать URL: http://localhost: 3000 Ошибка ниже 

Serverless: ANY /ENGG (λ: api)
Serverless: Error while loading api
ReferenceError: Event is not defined
    at /Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:328709:42
    at Module.KL2N (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:328719:2)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.V7fC (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:456942:14)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.K011 (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:327243:37)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at Object.0 (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:174669:18)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169209:30)
    at /Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169300:18
    at Object.<anonymous> (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:169303:10)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:21:30)
    at Module.<anonymous> (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:132:91)
    at __webpack_require__ (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:21:30)
    at /Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/dist/server.js:85:18
    at Object.<anonymous> (/Users/liyanaarachchi/ibrainmart@gmail.com/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/ibrainmart@gmail.com/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/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/serverless-offline/src/functionHelper.js:215:15)
    at handler (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/serverless-offline/src/ApiGateway.js:485:40)
    at module.exports.internals.Manager.execute (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/toolkit.js:41:33)
    at Object.internals.handler (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/handler.js:46:48)
    at exports.execute (/Users/liyanaarachchi/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/handler.js:31:36)
    at Request._lifecycle (/Users/liyanaarachchi/ibrainmart@gmail.com/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/ibrainmart@gmail.com/Serverless Framwork/WebApplication/ibrainmart/node_modules/@hapi/hapi/lib/request.js:221:9)

Это файл My Server.ts 

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);
    }
  });
});

и моя лямбда-функция 

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);}

Кто-нибудь знает, как решить эту проблему ..? 

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"
  }
}

1 Ответ

1 голос
/ 21 мая 2020

Это связано с тем, что одна из ваших зависимостей пытается получить доступ к объекту Event, который недоступен по умолчанию на стороне сервера.

Поскольку вы уже используете domino, вы можете попробовать добавить эти строки в свой server.ts, чтобы сделать объект Event доступным 

//other global declarations
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...