Merge pull request #4321 from mempool/mononaut/ssr

Angular Universal SSR

frontend/src/app/shared/directives/browser-only.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, TemplateRef, ViewContainerRef, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Directive({
+  selector: '[browserOnly]'
+})
+export class BrowserOnlyDirective {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {
+    if (isPlatformBrowser(this.platformId)) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}

frontend/src/app/shared/directives/server-only.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, TemplateRef, ViewContainerRef, Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+
+@Directive({
+  selector: '[serverOnly]'
+})
+export class ServerOnlyDirective {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {
+    if (isPlatformServer(this.platformId)) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}

frontend/src/app/shared/pipes/bytes-pipe/utils.ts

@@ -323,7 +323,7 @@ export function hasTouchScreen(): boolean {
     // @ts-ignore
     hasTouchScreen = navigator.msMaxTouchPoints > 0;
   } else {
-    const mQ = matchMedia?.('(pointer:coarse)');
+    const mQ = window.matchMedia?.('(pointer:coarse)');
     if (mQ?.media === '(pointer:coarse)') {
       hasTouchScreen = !!mQ.matches;
     } else if ('orientation' in window) {

frontend/src/app/shared/shared.module.ts

@@ -33,6 +33,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 import { FiatSelectorComponent } from '../components/fiat-selector/fiat-selector.component';
 import { RateUnitSelectorComponent } from '../components/rate-unit-selector/rate-unit-selector.component';
+import { BrowserOnlyDirective } from './directives/browser-only.directive';
+import { ServerOnlyDirective } from './directives/server-only.directive';
 import { ColoredPriceDirective } from './directives/colored-price.directive';
 import { NoSanitizePipe } from './pipes/no-sanitize.pipe';
 import { MempoolBlocksComponent } from '../components/mempool-blocks/mempool-blocks.component';
@@ -132,6 +134,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     FeeRoundingPipe,
     FiatCurrencyPipe,
     ColoredPriceDirective,
+    BrowserOnlyDirective,
+    ServerOnlyDirective,
     BlockchainComponent,
     BlockViewComponent,
     EightBlocksComponent,
@@ -264,6 +268,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     Decimal2HexPipe,
     FeeRoundingPipe,
     ColoredPriceDirective,
+    BrowserOnlyDirective,
+    ServerOnlyDirective,
     NoSanitizePipe,
     BlockchainComponent,
     MempoolBlocksComponent,