restore basic Angular Universal build

frontend/angular.json

@@ -280,6 +280,56 @@
             }
           }
         },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/mempool/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "localize": true,
+              "optimization": false
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "mempool:build",
+            "serverTarget": "mempool:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mempool:build:production",
+              "serverTarget": "mempool:server:production",
+              "optimization": false,
+              "sourceMap": true
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "mempool:build:production",
+            "serverTarget": "mempool:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
+        },
         "cypress-run": {
           "builder": "@cypress/schematic:cypress",
           "options": {

frontend/generate-config.js

@@ -71,7 +71,7 @@ const newConfig = `(function (window) {
     window.__env.${obj.key} = ${typeof obj.value === 'string' ? `'${obj.value}'` : obj.value};`, '')}
     window.__env.GIT_COMMIT_HASH = '${gitCommitHash}';
     window.__env.PACKAGE_JSON_VERSION = '${packetJsonVersion}';
-  }(this));`;
+  }(global || this));`;
 
 const newConfigTemplate = `(function (window) {
   window.__env = window.__env || {};${settings.reduce((str, obj) => `${str}

frontend/package.json

@@ -48,6 +48,9 @@
     "prettier": "prettier --write \"src/app/**/*.{js,json,css,scss,less,md,ts,html,component.html}\"",
     "e2e": "npm run generate-config && npm run ng -- e2e",
     "e2e:ci": "npm run cypress:run:ci",
+    "dev:ssr": "npm run generate-config && ng run mempool:serve-ssr",
+    "serve:ssr": "npm run generate-config && node server.run.js",
+    "build:ssr": "npm run build && ng run mempool:server:production && ./node_modules/typescript/bin/tsc server.run.ts",
     "config:defaults:mempool": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=mempool BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
     "config:defaults:liquid": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true LIQUID_TESTNET_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=liquid BLOCK_WEIGHT_UNITS=300000 && npm run generate-config",
     "config:defaults:bisq": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 BASE_MODULE=bisq BLOCK_WEIGHT_UNITS=4000000 && npm run generate-config",
@@ -61,18 +64,18 @@
     "cypress:run:ci:staging": "node update-config.js TESTNET_ENABLED=true SIGNET_ENABLED=true LIQUID_ENABLED=true BISQ_ENABLED=true ITEMS_PER_PAGE=25 && npm run generate-config && start-server-and-test serve:local-staging 4200 cypress:run:record"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular/animations": "^16.2.2",
-    "@angular/cli": "^16.2.0",
-    "@angular/common": "^16.2.2",
-    "@angular/compiler": "^16.2.2",
-    "@angular/core": "^16.2.2",
-    "@angular/forms": "^16.2.2",
-    "@angular/localize": "^16.2.2",
-    "@angular/platform-browser": "^16.2.2",
-    "@angular/platform-browser-dynamic": "^16.2.2",
-    "@angular/platform-server": "^16.2.2",
-    "@angular/router": "^16.2.2",
+    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular/animations": "^16.1.1",
+    "@angular/cli": "^16.1.1",
+    "@angular/common": "^16.1.1",
+    "@angular/compiler": "^16.1.1",
+    "@angular/core": "^16.1.1",
+    "@angular/forms": "^16.1.1",
+    "@angular/localize": "^16.1.1",
+    "@angular/platform-browser": "^16.1.1",
+    "@angular/platform-browser-dynamic": "^16.1.1",
+    "@angular/platform-server": "^16.1.1",
+    "@angular/router": "^16.1.1",
     "@fortawesome/angular-fontawesome": "~0.13.0",
     "@fortawesome/fontawesome-common-types": "~6.5.1",
     "@fortawesome/fontawesome-svg-core": "~6.5.1",
@@ -96,14 +99,17 @@
     "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^16.1.5",
-    "@angular/language-service": "^16.1.5",
+    "@angular/compiler-cli": "^16.1.1",
+    "@angular/language-service": "^16.1.1",
+    "@nguniversal/builders": "16.1.1",
+    "@nguniversal/express-engine": "16.1.1",
     "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.48.1",
     "eslint": "^8.31.0",
     "http-proxy-middleware": "~2.0.6",
     "prettier": "^3.0.0",
+    "source-map-support": "^0.5.21",
     "ts-node": "~10.9.1",
     "typescript": "~4.9.3"
   },

frontend/server.run.ts

@@ -0,0 +1,108 @@
+import 'zone.js/dist/zone-node';
+import './src/resources/config.js';
+
+console.log(global);
+
+import * as domino from 'domino';
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const {readFileSync, existsSync} = require('fs');
+const {createProxyMiddleware} = require('http-proxy-middleware');
+
+const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
+const win = domino.createWindow(template);
+
+// @ts-ignore
+win.__env = global.__env;
+
+// @ts-ignore
+win.matchMedia = () => {
+  return {
+    matches: true
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+// @ts-ignore
+global['window'] = win;
+global['document'] = win.document;
+// @ts-ignore
+global['history'] = { state: { } };
+
+global['localStorage'] = {
+  getItem: () => '',
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+  length: 0,
+  key: () => '',
+};
+
+/**
+ * Return the list of supported and actually active locales
+ */
+function getActiveLocales() {
+  const angularConfig = JSON.parse(readFileSync('angular.json', 'utf8'));
+
+  const supportedLocales = [
+    angularConfig.projects.mempool.i18n.sourceLocale,
+    ...Object.keys(angularConfig.projects.mempool.i18n.locales),
+  ];
+
+  return supportedLocales.filter(locale => locale === 'en-US' && existsSync(`./dist/mempool/server/${locale}`));
+  // return supportedLocales.filter(locale => existsSync(`./dist/mempool/server/${locale}`));
+}
+
+function app() {
+  const server = express();
+
+  // proxy websocket
+  server.get('/api/v1/ws', createProxyMiddleware({
+    target: 'ws://localhost:4200/api/v1/ws',
+    changeOrigin: true,
+    ws: true,
+    logLevel: 'debug'
+  }));
+  // proxy API to nginx
+  server.get('/api/**', createProxyMiddleware({
+    // @ts-ignore
+    target: win.__env.NGINX_PROTOCOL + '://' + win.__env.NGINX_HOSTNAME + ':' + win.__env.NGINX_PORT,
+    changeOrigin: true,
+  }));
+  server.get('/resources/**', express.static('./src'));
+
+
+  // map / and /en to en-US
+  const defaultLocale = 'en-US';
+  console.log(`serving default locale: ${defaultLocale}`);
+  const appServerModule = require(`./dist/mempool/server/${defaultLocale}/main.js`);
+  server.use('/', appServerModule.app(defaultLocale));
+  server.use('/en', appServerModule.app(defaultLocale));
+
+  // map each locale to its localized main.js
+  getActiveLocales().forEach(locale => {
+    console.log('serving locale:', locale);
+    const appServerModule = require(`./dist/mempool/server/${locale}/main.js`);
+
+    // map everything to itself
+    server.use(`/${locale}`, appServerModule.app(locale));
+
+  });
+
+  return server;
+}
+
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  app().listen(port, () => {
+    console.log(`Node Express server listening on port ${port}`);
+  });
+}
+
+run();

frontend/server.ts

@@ -0,0 +1,146 @@
+import 'zone.js/dist/zone-node';
+import './src/resources/config.js';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as domino from 'domino';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+import { join } from 'path';
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
+const win = domino.createWindow(template);
+
+// @ts-ignore
+win.__env = global.__env;
+
+// @ts-ignore
+win.matchMedia = () => {
+  return {
+    matches: true
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+// @ts-ignore
+global['window'] = win;
+global['document'] = win.document;
+// @ts-ignore
+global['history'] = { state: { } };
+
+global['localStorage'] = {
+  getItem: () => '',
+  setItem: () => {},
+  removeItem: () => {},
+  clear: () => {},
+  length: 0,
+  key: () => '',
+};
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(locale: string): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), `dist/mempool/browser/${locale}`);
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // only handle URLs that actually exist
+  //server.get(locale, getLocalizedSSR(indexHtml));
+  server.get('/', getLocalizedSSR(indexHtml));
+  server.get('/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/block/*', getLocalizedSSR(indexHtml));
+  server.get('/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/address/*', getLocalizedSSR(indexHtml));
+  server.get('/blocks', getLocalizedSSR(indexHtml));
+  server.get('/graphs', getLocalizedSSR(indexHtml));
+  server.get('/liquid', getLocalizedSSR(indexHtml));
+  server.get('/liquid/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/block/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/address/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/asset/*', getLocalizedSSR(indexHtml));
+  server.get('/liquid/blocks', getLocalizedSSR(indexHtml));
+  server.get('/liquid/graphs', getLocalizedSSR(indexHtml));
+  server.get('/liquid/assets', getLocalizedSSR(indexHtml));
+  server.get('/liquid/api', getLocalizedSSR(indexHtml));
+  server.get('/liquid/tv', getLocalizedSSR(indexHtml));
+  server.get('/liquid/status', getLocalizedSSR(indexHtml));
+  server.get('/liquid/about', getLocalizedSSR(indexHtml));
+  server.get('/testnet', getLocalizedSSR(indexHtml));
+  server.get('/testnet/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/block/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/mempool-block/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/address/*', getLocalizedSSR(indexHtml));
+  server.get('/testnet/blocks', getLocalizedSSR(indexHtml));
+  server.get('/testnet/graphs', getLocalizedSSR(indexHtml));
+  server.get('/testnet/api', getLocalizedSSR(indexHtml));
+  server.get('/testnet/tv', getLocalizedSSR(indexHtml));
+  server.get('/testnet/status', getLocalizedSSR(indexHtml));
+  server.get('/testnet/about', getLocalizedSSR(indexHtml));
+  server.get('/bisq', getLocalizedSSR(indexHtml));
+  server.get('/bisq/tx/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/blocks', getLocalizedSSR(indexHtml));
+  server.get('/bisq/block/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/address/*', getLocalizedSSR(indexHtml));
+  server.get('/bisq/stats', getLocalizedSSR(indexHtml));
+  server.get('/bisq/about', getLocalizedSSR(indexHtml));
+  server.get('/bisq/api', getLocalizedSSR(indexHtml));
+  server.get('/about', getLocalizedSSR(indexHtml));
+  server.get('/api', getLocalizedSSR(indexHtml));
+  server.get('/tv', getLocalizedSSR(indexHtml));
+  server.get('/status', getLocalizedSSR(indexHtml));
+  server.get('/terms-of-service', getLocalizedSSR(indexHtml));
+
+  // fallback to static file handler so we send HTTP 404 to nginx
+  server.get('/**', express.static(distFolder, { maxAge: '1y' }));
+
+  return server;
+}
+
+function getLocalizedSSR(indexHtml) {
+  return (req, res) => {
+    res.render(indexHtml, {
+      req,
+      providers: [
+        { provide: APP_BASE_HREF, useValue: req.baseUrl }
+      ]
+    });
+  }
+}
+
+// only used for development mode
+function run(): void {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app('en-US');
+  server.listen(port, () => {
+    console.log(`Node Express server listening on port ${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';

frontend/src/main.server.ts

@@ -0,0 +1,11 @@
+
+import '@angular/localize/init';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule } from '@angular/platform-server';

frontend/tsconfig.server.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/server",
+    "target": "ES2022",
+    "sourceMap": true,
+    "types": [
+      "node"
+    ]
+  },
+  "files": [
+    "src/main.server.ts",
+    "server.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}