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

Angular 17
2024-04-01 18:14:17 +09:00 · 2024-04-01 18:14:17 +09:00 · 4132765027
commit 4132765027
parent 964be2a6df e64d1be6f0
14 changed files with 5729 additions and 6398 deletions
--- a/frontend/.eslintrc
+++ b/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,
--- a/frontend/angular.json
+++ b/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",
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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/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",
+    "@angular-devkit/build-angular": "^17.3.1",
+    "@angular/animations": "^17.3.1",
+    "@angular/cli": "^17.3.1",
+    "@angular/common": "^17.3.1",
+    "@angular/compiler": "^17.3.1",
+    "@angular/core": "^17.3.1",
+    "@angular/forms": "^17.3.1",
+    "@angular/localize": "^17.3.1",
+    "@angular/platform-browser": "^17.3.1",
+    "@angular/platform-browser-dynamic": "^17.3.1",
+    "@angular/platform-server": "^17.3.1",
+    "@angular/router": "^17.3.1",
+    "@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-infinite-scroll": "^16.0.0",
+    "ngx-echarts": "~17.1.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/language-service": "^16.1.1",
-    "@nguniversal/builders": "16.1.1",
-    "@nguniversal/express-engine": "16.1.1",
+    "@angular/compiler-cli": "^17.3.1",
+    "@angular/language-service": "^17.3.1",
    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.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",
--- a/frontend/server.run.ts
+++ b/frontend/server.run.ts
@ -1,4 +1,3 @@
-import 'zone.js/dist/zone-node';
 import './src/resources/config.js';

 import * as domino from 'domino';
--- a/frontend/server.ts
+++ b/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';
-
-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+  const indexHtml = join(distFolder, 'index.html');

  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';
+}
--- a/frontend/src/app/app.module.server.ts
+++ b/frontend/src/app/app.module.server.ts
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/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) => {
-            return this.weightMode ? value * 4 : value;
+          formatter: (value): string => {
+            return this.weightMode ? (value * 4).toString() : value.toString();
          }
        },
        splitLine: {
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/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,
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/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">
--- a/frontend/src/app/components/trademark-policy/trademark-policy.component.html
+++ b/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>

--- a/frontend/src/app/services/http-cache.interceptor.ts
+++ b/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()
--- a/frontend/src/main.server.ts
+++ b/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';
--- a/frontend/tsconfig.base.json
+++ b/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"
    ]