Upgrade to Angular 17

frontend/angular.json

@@ -223,11 +223,11 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "mempool:build"
+            "buildTarget": "mempool:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "mempool:build:production"
+              "buildTarget": "mempool:build:production"
             },
             "local": {
               "proxyConfig": "proxy.conf.local.js",
@@ -264,7 +264,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "mempool:build"
+            "buildTarget": "mempool:build"
           }
         },
         "e2e": {
@@ -303,7 +303,7 @@
           }
         },
         "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
           "options": {
             "browserTarget": "mempool:build",
             "serverTarget": "mempool:server"
@@ -318,7 +318,7 @@
           }
         },
         "prerender": {
-          "builder": "@nguniversal/builders:prerender",
+          "builder": "@angular-devkit/build-angular:prerender",
           "options": {
             "browserTarget": "mempool:build:production",
             "serverTarget": "mempool:server:production",

frontend/package.json

@@ -64,24 +64,25 @@
     "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.1.1",
+    "@angular-devkit/build-angular": "^17.3.1",
-    "@angular/animations": "^16.1.1",
+    "@angular/animations": "^17.3.1",
-    "@angular/cli": "^16.1.1",
+    "@angular/cli": "^17.3.1",
-    "@angular/common": "^16.1.1",
+    "@angular/common": "^17.3.1",
-    "@angular/compiler": "^16.1.1",
+    "@angular/compiler": "^17.3.1",
-    "@angular/core": "^16.1.1",
+    "@angular/core": "^17.3.1",
-    "@angular/forms": "^16.1.1",
+    "@angular/forms": "^17.3.1",
-    "@angular/localize": "^16.1.1",
+    "@angular/localize": "^17.3.1",
-    "@angular/platform-browser": "^16.1.1",
+    "@angular/platform-browser": "^17.3.1",
-    "@angular/platform-browser-dynamic": "^16.1.1",
+    "@angular/platform-browser-dynamic": "^17.3.1",
-    "@angular/platform-server": "^16.1.1",
+    "@angular/platform-server": "^17.3.1",
-    "@angular/router": "^16.1.1",
+    "@angular/router": "^17.3.1",
-    "@fortawesome/angular-fontawesome": "~0.13.0",
+    "@angular/ssr": "^17.3.1",
+    "@fortawesome/angular-fontawesome": "~0.14.1",
     "@fortawesome/fontawesome-common-types": "~6.5.1",
     "@fortawesome/fontawesome-svg-core": "~6.5.1",
     "@fortawesome/free-solid-svg-icons": "~6.5.1",
     "@mempool/mempool.js": "2.3.0",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@types/qrcode": "~1.5.0",
     "bootstrap": "~4.6.2",
     "browserify": "^17.0.0",
@@ -89,29 +90,28 @@
     "domino": "^2.1.6",
     "echarts": "~5.5.0",
     "lightweight-charts": "~3.8.0",
-    "ngx-echarts": "~16.2.0",
+    "ngx-echarts": "~17.1.0",
-    "ngx-infinite-scroll": "^16.0.0",
+    "ngx-infinite-scroll": "^17.0.0",
     "qrcode": "1.5.1",
     "rxjs": "~7.8.1",
     "tinyify": "^3.1.0",
     "tlite": "^0.1.9",
     "tslib": "~2.6.0",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^16.1.1",
+    "@angular/compiler-cli": "^17.3.1",
-    "@angular/language-service": "^16.1.1",
+    "@angular/language-service": "^17.3.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",
+    "browser-sync": "^3.0.0",
     "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"
+    "typescript": "~5.4.3"
   },
   "optionalDependencies": {
     "@cypress/schematic": "^2.5.0",

frontend/server.ts

@@ -1,101 +1,60 @@
-import 'zone.js/dist/zone-node';
-import './src/resources/config.js';
 
-import { ngExpressEngine } from '@nguniversal/express-engine';
+import 'zone.js/node';
-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';
+import { CommonEngine } from '@angular/ssr';
-
+import * as express from 'express';
-import { ResizeObserver } from './shims';
+import { existsSync } from 'node:fs';
-
+import { join } from 'node:path';
-const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
+import bootstrap from './src/main.server';
-const win = domino.createWindow(template);
-
-// @ts-ignore
-win.__env = global.__env;
-
-// @ts-ignore
-win.matchMedia = (media) => {
-  return {
-    media,
-    matches: true,
-  };
-};
-
-// @ts-ignore
-win.setTimeout = (fn) => { fn(); };
-win.document.body.scrollTo = (() => {});
-win['ResizeObserver'] = ResizeObserver;
-// @ts-ignore
-global['window'] = win;
-// @ts-ignore
-global['document'] = win.document;
-// @ts-ignore
-global['history'] = { state: { } };
-// @ts-ignore
-Object.defineProperty(global, 'navigator', {
-  value: win.navigator,
-  writable: true
-});
-
-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 {
+export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), `dist/mempool/browser/${locale}`);
+  const distFolder = join(process.cwd(), 'dist/mempool/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
 
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  const commonEngine = new CommonEngine();
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
 
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
 
-  // static file handler so we send HTTP 404 to nginx
+  // All regular routes use the Angular engine
-  server.get('/**.(css|js|json|ico|webmanifest|png|jpg|jpeg|svg|mp4)*', express.static(distFolder, { maxAge: '1y', fallthrough: false }));
+  server.get('*', (req, res, next) => {
-  // handle page routes
+    const { protocol, originalUrl, baseUrl, headers } = req;
-  server.get('/**', getLocalizedSSR(indexHtml));
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [
+          { provide: APP_BASE_HREF, useValue: baseUrl },],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
 
   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;
+  const port = process.env['PORT'] || 4000;
 
   // Start up the Node server
-  const server = app('en-US');
+  const server = app();
   server.listen(port, () => {
-    console.log(`Node Express server listening on port ${port}`);
+    console.log(`Node Express server listening on http://localhost:${port}`);
   });
 }
 
@@ -109,4 +68,4 @@ if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
-export * from './src/main.server';
+export default bootstrap;

frontend/server.ts.bak

@@ -0,0 +1,112 @@
+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';
+
+import { ResizeObserver } from './shims';
+
+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 = (media) => {
+  return {
+    media,
+    matches: true,
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+win['ResizeObserver'] = ResizeObserver;
+// @ts-ignore
+global['window'] = win;
+// @ts-ignore
+global['document'] = win.document;
+// @ts-ignore
+global['history'] = { state: { } };
+// @ts-ignore
+Object.defineProperty(global, 'navigator', {
+  value: win.navigator,
+  writable: true
+});
+
+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);
+
+
+  // static file handler so we send HTTP 404 to nginx
+  server.get('/**.(css|js|json|ico|webmanifest|png|jpg|jpeg|svg|mp4)*', express.static(distFolder, { maxAge: '1y', fallthrough: false }));
+  // handle page routes
+  server.get('/**', getLocalizedSSR(indexHtml));
+
+  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/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -265,8 +265,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, On
         type: 'value',
         axisLabel: {
           fontSize: 11,
-          formatter: (value) => {
+          formatter: (value): string => {
-            return this.weightMode ? value * 4 : value;
+            return this.weightMode ? (value * 4).toString() : value.toString();
           }
         },
         splitLine: {

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -411,7 +411,6 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
             padding: [20, 0, 0, 0],
           },
           type: 'time',
-          boundaryGap: false,
           axisLine: { onZero: true },
           axisLabel: {
             margin: 20,

frontend/src/app/components/menu/menu.component.html

@@ -6,7 +6,7 @@
         <span class="menu-click text-nowrap ellipsis">
           <strong>
             <span *ngIf="user.username.includes('@'); else usernamenospace">{{ user.username }}</span>
-            <ng-template #usernamenospace>@{{ user.username }}</ng-template>
+            <ng-template #usernamenospace>&#64;{{ user.username }}</ng-template>
           </strong>
         </span>
         <span class="badge mr-1 badge-og" *ngIf="user.ogRank">

frontend/src/app/components/trademark-policy/trademark-policy.component.html

@@ -326,7 +326,7 @@
 
           <br>
 
-          <p>If you have any questions about this Policy, would like to speak with us about the use of our Marks in ways not described in the Policy, or see any abuse of our Marks, please email us at &lt;legal@mempool.space&gt;</p>
+          <p>If you have any questions about this Policy, would like to speak with us about the use of our Marks in ways not described in the Policy, or see any abuse of our Marks, please email us at &lt;legal&#64;mempool.space&gt;</p>
 
         </ol>
 

frontend/src/app/services/http-cache.interceptor.ts

@@ -1,8 +1,8 @@
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { Inject, Injectable, PLATFORM_ID, makeStateKey, TransferState } from '@angular/core';
 import { HttpInterceptor, HttpEvent, HttpRequest, HttpHandler, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { Observable, of } from 'rxjs';
 import { catchError, tap } from 'rxjs/operators';
-import { TransferState, makeStateKey } from '@angular/platform-browser';
+
 import { isPlatformBrowser } from '@angular/common';
 
 @Injectable()