Merge pull request #4819 from mempool/simon/angular-17

Angular 17

frontend/.eslintrc

@@ -19,6 +19,7 @@
     "@typescript-eslint/no-this-alias": 1,
     "@typescript-eslint/no-var-requires": 1,
     "@typescript-eslint/explicit-function-return-type": 1,
+    "@typescript-eslint/no-unused-vars": 1,
     "no-case-declarations": 1,
     "no-console": 1,
     "no-constant-condition": 1,

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,29 @@
     "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",
+    "esbuild": "^0.20.2",
+    "tinyify": "^4.0.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/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/parser": "^7.4.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.57.0",
+    "browser-sync": "^3.0.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.run.ts

@@ -1,4 +1,3 @@
-import 'zone.js/dist/zone-node';
 import './src/resources/config.js';
 
 import * as domino from 'domino';

frontend/server.ts

@@ -1,12 +1,11 @@
-import 'zone.js/dist/zone-node';
+import 'zone.js';
 import './src/resources/config.js';
 
-import { ngExpressEngine } from '@nguniversal/express-engine';
+import { CommonEngine } from '@angular/ssr';
 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';
@@ -15,6 +14,8 @@ import { existsSync } from 'fs';
 
 import { ResizeObserver } from './shims';
 
+const commonEngine = new CommonEngine();
+
 const template = fs.readFileSync(path.join(process.cwd(), 'dist/mempool/browser/en-US/', 'index.html')).toString();
 const win = domino.createWindow(template);
 
@@ -58,35 +59,32 @@ global['localStorage'] = {
 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';
+  const indexHtml = join(distFolder, 'index.html');
-
-  // 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));
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap: AppServerModule,
+        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 {
@@ -107,6 +105,4 @@ 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()

frontend/src/main.server.ts

@@ -7,5 +7,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-export { AppServerModule } from './app/app.server.module';
+export { AppServerModule } from './app/app.module.server';
 export { renderModule } from '@angular/platform-server';

frontend/tsconfig.base.json

@@ -7,7 +7,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "module": "ES2020",
+    "module": "ES2022",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
@@ -15,7 +15,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "ES2018",
+      "ES2022",
       "dom",
       "dom.iterable"
     ]