Loaded up app.component.ts for detecting user's operating system, browser type, and device width (as mobile, tablet, and desktop)

app.component.html

<div #singlePageTopScroll></div>
<router-outlet (activate)="onRouteActivation()"></router-outlet>

app.component.ts

import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';

import { BREAKPOINT_NAME } from '@enums/breakpoint.enum';
import { LayoutService } from '@services/layout.service';
import { Platform } from '@angular/cdk/platform';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {

  /* ------------------------------ View Children ----------------------------- */
  @ViewChild('singlePageTopScroll') singlePageTopScroll: ElementRef;

  /* ---------------- System, Browser, Device Check Properties ---------------- */
  systemIs = { android: false, iOS: false }; // Operating System
  browserIs = { chrome: false, safari: false, edge: false, blink: false }; // Browser Type
  deviceIs = { mobile: false, tablet: false, desktop: false }; // Viewport Sizing

  private sub = new Subscription();
  constructor(
    private platform: Platform,
    private layout: LayoutService
  ) { }

  ngOnInit(): void {
    // Check Device for Optimized Views
    this.checkOperatingSystem();
    this.checkBrowser();
    this.checkDevice();
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }


  /* ---------------------- SYSTEM, BROWSER, DEVICE CHECK --------------------- */
  private checkOperatingSystem(): void {
    if (this.platform.ANDROID) { this.systemIs.android = true; }
    else if (this.platform.IOS) { this.systemIs.iOS = true; }
    else { console.log('System Detect: OS is neither Android nor iOS.'); }
  }
  private checkBrowser(): void {
    const chromeAgent = navigator.userAgent.indexOf('Chrome') > -1;
    if (chromeAgent) { this.browserIs.chrome = true; }
    else if (this.platform.SAFARI) { this.browserIs.safari = true; }
    else if (this.platform.EDGE) { this.browserIs.edge = true; }
    else if (this.platform.BLINK) { this.browserIs.blink = true; }
    else { console.log('Browser type unknown'); }
  }
  private checkDevice(): void {
    this.sub.add(this.layout.whenViewChanges().subscribe(_ => {
      if (this.layout.observesBreakpointsOf(BREAKPOINT_NAME.mobile)) {
        this.isMobileView();
      } else if (this.layout.observesBreakpointsOf(BREAKPOINT_NAME.tablet)) {
        this.isTabletView();
      } else if (this.layout.observesBreakpointsOf(BREAKPOINT_NAME.desktop)) {
        this.isDesktopView();
      }
    }));
  }
  // Assign Variables
  private isMobileView(): void {
    this.deviceIs = {
      mobile: true,
      tablet: false,
      desktop: false
    };
  }
  private isTabletView(): void {
    this.deviceIs = {
      mobile: false,
      tablet: true,
      desktop: false
    };
  }
  private isDesktopView(): void {
    this.deviceIs = {
      mobile: false,
      tablet: false,
      desktop: true
    };
  }

  /* ------------------------- MAINTAIN TOP SCROLL SPA ------------------------ */
  onRouteActivation(): void { this.singlePageTopScroll.nativeElement.scrollIntoView(); }
}