Я пытаюсь добавить 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"
}
}