Finished migration to angular 16

modules/portmaster/src/app/intro/step-2-trackers/step-2-trackers.ts

@@ -1,17 +1,18 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, OnInit, inject } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ConfigService, Setting } from "@safing/portmaster-api";
 import { Step } from "@safing/ui";
-import { of, Subject } from "rxjs";
-import { mergeMap, takeUntil } from "rxjs/operators";
+import { of } from "rxjs";
+import { mergeMap } from "rxjs/operators";
 import { SaveSettingEvent } from "src/app/shared/config/generic-setting";
 
 @Component({
   templateUrl: './step-2-trackers.html',
   styleUrls: ['../step.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Step2TrackersComponent implements Step, OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class Step2TrackersComponent implements Step, OnInit {
+  private destroyRef = inject(DestroyRef);
 
   validChange = of(true)
 
@@ -31,7 +32,7 @@ export class Step2TrackersComponent implements Step, OnInit, OnDestroy {
 
           return this.configService.watch(setting.Key)
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe(value => {
         this.setting!.Value = value;
@@ -40,11 +41,6 @@ export class Step2TrackersComponent implements Step, OnInit, OnDestroy {
       });
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   saveSetting(event: SaveSettingEvent) {
     this.configService.save(event.key, event.value)
       .subscribe()

modules/portmaster/src/app/intro/step-3-dns/step-3-dns.ts

@@ -1,8 +1,9 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from "@angular/core";
-import { applyQuickSetting, ConfigService, QuickSetting, Setting } from "@safing/portmaster-api";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, OnInit, inject } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ConfigService, QuickSetting, Setting, applyQuickSetting } from "@safing/portmaster-api";
 import { Step } from "@safing/ui";
-import { of, Subject } from "rxjs";
-import { mergeMap, takeUntil } from "rxjs/operators";
+import { of } from "rxjs";
+import { mergeMap } from "rxjs/operators";
 import { SaveSettingEvent } from "src/app/shared/config/generic-setting";
 
 interface QuickSettingModel extends QuickSetting<any> {
@@ -14,8 +15,8 @@ interface QuickSettingModel extends QuickSetting<any> {
   styleUrls: ['../step.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class Step3DNSComponent implements Step, OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class Step3DNSComponent implements Step, OnInit {
+  private destroyRef = inject(DestroyRef);
 
   validChange = of(true)
 
@@ -60,7 +61,7 @@ export class Step3DNSComponent implements Step, OnInit, OnDestroy {
           this.quickSettings = this.getQuickSettings();
           return this.configService.watch(setting.Key)
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe(value => {
         this.setting!.Value = value;
@@ -89,11 +90,6 @@ export class Step3DNSComponent implements Step, OnInit, OnDestroy {
       });
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   saveSetting(event: SaveSettingEvent) {
     this.configService.save(event.key, event.value)
       .subscribe()

modules/portmaster/src/app/pages/app-view/qs-use-spn/qs-use-spn.ts

@@ -1,7 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from "@angular/core";
-import { BoolSetting, ConfigService, getActualValue, Setting } from "@safing/portmaster-api";
-import { Subject } from "rxjs";
-import { takeUntil } from "rxjs/operators";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, inject } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { BoolSetting, ConfigService, Setting, getActualValue } from "@safing/portmaster-api";
 import { SaveSettingEvent } from "src/app/shared/config/generic-setting/generic-setting";
 
 const interferingSettingsWhenOn = [
@@ -13,8 +12,8 @@ const interferingSettingsWhenOn = [
   templateUrl: './qs-use-spn.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class QuickSettingUseSPNButtonComponent implements OnInit, OnDestroy, OnChanges {
-  private destroy$ = new Subject<void>();
+export class QuickSettingUseSPNButtonComponent implements OnInit, OnChanges {
+  private destroyRef = inject(DestroyRef);
 
   @Input()
   settings: Setting[] = [];
@@ -56,19 +55,14 @@ export class QuickSettingUseSPNButtonComponent implements OnInit, OnDestroy, OnC
 
   ngOnInit() {
     this.configService.watch<BoolSetting>('spn/enable')
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(value => {
         this.spnDisabled = !value;
         this.cdr.markForCheck();
         this.updateInterfering();
       })
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   private updateInterfering() {
     this.interferingSettings = [];
 

modules/portmaster/src/app/pages/spn/map-renderer/map-renderer.ts

@@ -1,6 +1,7 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { geoMercator, geoPath, GeoPath, GeoPermissibleObjects, GeoProjection, interpolateString, json, Line as D3Line, line, pointer, select, Selection, zoom, zoomIdentity, ZoomTransform } from 'd3';
-import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, EventEmitter, Input, OnDestroy, Output, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Line as D3Line, GeoPath, GeoPermissibleObjects, GeoProjection, Selection, ZoomTransform, geoMercator, geoPath, interpolateString, json, line, pointer, select, zoom, zoomIdentity } from 'd3';
+import { BehaviorSubject } from 'rxjs';
 import { feature } from 'topojson-client';
 import { MapPin } from '../map.service';
 
@@ -43,7 +44,7 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
   static readonly MarkerSize = 4;
   static readonly LineAnimationDuration = 200;
 
-  private destroy$ = new Subject<void>();
+  private destroyRef = inject(DestroyRef);
   private renderPaths$ = new BehaviorSubject<Path[]>([]);
   private renderPins$ = new BehaviorSubject<MapPin[]>([]);
   private highlightedPins = new Set<string>();
@@ -117,18 +118,15 @@ export class MapRendererComponent implements AfterViewInit, OnDestroy {
     await this.renderWorld();
 
     this.renderPins$
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(pins => this.renderPins(pins));
 
     this.renderPaths$
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(paths => this.renderPaths(paths));
   }
 
   ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-
     if (!this.svg) {
       return;
     }

modules/portmaster/src/app/pages/spn/map.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
-import { AppProfile, GeoCoordinates, getPinCoords, IntelEntity, Netquery, Pin, SPNService, UnknownLocation } from '@safing/portmaster-api';
-import { BehaviorSubject, combineLatest, debounceTime, interval, Observable, of, startWith, switchMap } from 'rxjs';
+import { Injectable, isDevMode } from '@angular/core';
+import { AppProfile, GeoCoordinates, IntelEntity, Netquery, Pin, SPNService, UnknownLocation, getPinCoords } from '@safing/portmaster-api';
+import { BehaviorSubject, Observable, combineLatest, debounceTime, interval, of, startWith, switchMap } from 'rxjs';
 import { distinctUntilChanged, filter, map, share } from 'rxjs/operators';
 import { SPNStatus } from './../../../../projects/safing/portmaster-api/src/lib/spn.types';
 
@@ -138,7 +138,9 @@ export class MapService {
               pinMap.set(pin.ID, newPinModel);
 
               hasChanges = true;
-              console.log(`[DEBUG] Pin ${pin.ID} has changed`)
+              if (isDevMode()) {
+                console.log(`[DEBUG] Pin ${pin.ID} has changed`)
+              }
             }
           })
 
@@ -147,12 +149,16 @@ export class MapService {
               // this pin has been removed
               pinMap.delete(key)
               hasChanges = true;
-              console.log(`[DEBUG] Pin ${key} has been removed`)
+              if (isDevMode()) {
+                console.log(`[DEBUG] Pin ${key} has been removed`)
+              }
             }
           }
 
           if (hasChanges) {
-            console.log(`[DEBUG] Received pin updates`)
+            if (isDevMode()) {
+              console.log(`[DEBUG] Received pin updates`)
+            }
             pinResult = Array.from(pinMap.values());
           }
 

modules/portmaster/src/app/pages/spn/spn-page.ts

@@ -2,11 +2,12 @@ import { coerceElement } from "@angular/cdk/coercion";
 import { Overlay, OverlayContainer } from "@angular/cdk/overlay";
 import { ComponentPortal } from '@angular/cdk/portal';
 import { HttpClient } from '@angular/common/http';
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, ElementRef, Inject, Injectable, InjectionToken, Injector, OnDestroy, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, DestroyRef, ElementRef, Inject, Injectable, InjectionToken, Injector, OnDestroy, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, ParamMap, Router } from "@angular/router";
-import { AppProfile, ConfigService, Connection, GeoCoordinates, Netquery, PortapiService, PORTMASTER_HTTP_API_ENDPOINT, SPNService, SPNStatus, UserProfile } from "@safing/portmaster-api";
+import { AppProfile, ConfigService, Connection, GeoCoordinates, Netquery, PORTMASTER_HTTP_API_ENDPOINT, PortapiService, SPNService, SPNStatus, UserProfile } from "@safing/portmaster-api";
 import { SfngDialogService } from "@safing/ui";
-import { combineLatest, interval, Observable, of, Subject, Subscription } from "rxjs";
+import { Observable, Subscription, combineLatest, interval, of } from "rxjs";
 import { catchError, debounceTime, map, mergeMap, share, startWith, switchMap, take, takeUntil, withLatestFrom } from "rxjs/operators";
 import { fadeInAnimation, fadeInListAnimation, fadeOutAnimation } from "src/app/shared/animations";
 import { ExpertiseService } from "src/app/shared/expertise/expertise.service";
@@ -59,7 +60,7 @@ class MapOverlayContainer {
   ]
 })
 export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
-  private destroy$ = new Subject<void>();
+  private destroyRef = inject(DestroyRef);
 
   private countryDebounceTimer: any | null = null;
 
@@ -152,7 +153,7 @@ export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
     interval(10000)
       .pipe(
         startWith(-1),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe(() => {
         this.proTipTemplate = this.proTipTemplates.get(Math.floor(Math.random() * this.proTipTemplates.length)) || null;
@@ -175,7 +176,7 @@ export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
     this.spnService
       .watchProfile()
       .pipe(
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
         catchError(() => of(null))
       )
       .subscribe((user: UserProfile | null) => {
@@ -196,7 +197,7 @@ export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
       this.activeProfiles$,
     ])
       .pipe(
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
       ).subscribe(([params, pins, profiles]) => {
         if (params !== previousQueryMap) {
           const app = params.get("app")
@@ -234,7 +235,7 @@ export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
     this.liveModeSubscription = this.portapi.watchAll<Connection>("network:tree")
       .pipe(
         withLatestFrom(this.mapService.pinsMap$),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
         debounceTime(100),
       )
       .subscribe(([connections, mapPins]) => {
@@ -344,9 +345,6 @@ export class SpnPageComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnDestroy() {
     this.openedCountryDetails.forEach(cmp => cmp.dialogRef!.close());
-
-    this.destroy$.next();
-    this.destroy$.complete();
   }
 
   onZoomAndPan() {

modules/portmaster/src/app/pages/support/form/support-form.ts

@@ -1,10 +1,11 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { Component, OnDestroy, OnInit, TrackByFunction, ViewChild } from '@angular/core';
+import { Component, DestroyRef, OnInit, TrackByFunction, ViewChild, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DebugAPI } from '@safing/portmaster-api';
 import { ConfirmDialogConfig, SfngDialogService } from '@safing/ui';
-import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
-import { debounceTime, mergeMap, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { debounceTime, mergeMap } from 'rxjs/operators';
 import { SessionDataService, StatusService } from 'src/app/services';
 import { Issue, SupportHubService } from 'src/app/services/supporthub.service';
 import { ActionIndicatorService } from 'src/app/shared/action-indicator';
@@ -17,8 +18,8 @@ import { SupportPage, supportTypes } from '../pages';
   styleUrls: ['./support-form.scss'],
   animations: [fadeInAnimation, moveInOutAnimation, fadeInListAnimation]
 })
-export class SupportFormComponent implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class SupportFormComponent implements OnInit {
+  private destroyRef = inject(DestroyRef);
   private search$ = new BehaviorSubject<string>('');
   page: SupportPage | null = null;
 
@@ -60,7 +61,7 @@ export class SupportFormComponent implements OnInit, OnDestroy {
     })
 
     this.search$.pipe(
-      takeUntil(this.destroy$),
+      takeUntilDestroyed(this.destroyRef),
       debounceTime(200),
     )
       .subscribe((text) => {
@@ -83,7 +84,7 @@ export class SupportFormComponent implements OnInit, OnDestroy {
       })
 
     this.route.paramMap
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(params => {
         const id = params.get("id")
         for (let pIdx = 0; pIdx < supportTypes.length; pIdx++) {
@@ -137,11 +138,6 @@ export class SupportFormComponent implements OnInit, OnDestroy {
     this.search$.next(text);
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   copyToClipboard(what: string) {
     if (!!navigator.clipboard) {
       navigator.clipboard.writeText(what)

modules/portmaster/src/app/pages/support/support.ts

@@ -1,6 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, debounceTime, Subject, takeUntil } from 'rxjs';
+import { BehaviorSubject, combineLatest, debounceTime } from 'rxjs';
 import { Issue, SupportHubService } from 'src/app/services';
 import { fadeInAnimation, fadeInListAnimation } from 'src/app/shared/animations';
 import { FuzzySearchService } from 'src/app/shared/fuzzySearch';
@@ -14,11 +15,11 @@ import { SupportType, supportTypes } from './pages';
     fadeInAnimation,
   ]
 })
-export class SupportPageComponent implements OnInit, OnDestroy {
+export class SupportPageComponent implements OnInit {
   // make supportTypes available in the page template.
   readonly supportTypes = supportTypes;
 
-  private destroy$ = new Subject<void>();
+  private destroyRef = inject(DestroyRef);
 
   /** @private The current search term for the FAQ entries. */
   searchFaqs = new BehaviorSubject<string>('');
@@ -43,7 +44,7 @@ export class SupportPageComponent implements OnInit, OnDestroy {
       this.supportHub.loadIssues()
     ])
       .pipe(
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
         debounceTime(200),
       )
       .subscribe(([searchTerm, allFaqEntries]) => {
@@ -78,11 +79,6 @@ export class SupportPageComponent implements OnInit, OnDestroy {
       })
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   openIssue(issue: Issue<any>) {
     if (!!window.app) {
       window.app.openExternal(issue.url);

modules/portmaster/src/app/shared/netquery/connection-helper.service.ts

@@ -1,8 +1,8 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
-import { AppProfile, AppProfileService, ConfigService, deepClone, flattenProfileConfig, getAppSetting, IPScope, NetqueryConnection, Pin, PossilbeValue, QueryResult, setAppSetting, SPNService, Verdict } from '@safing/portmaster-api';
-import { BehaviorSubject, combineLatest, Observable, OperatorFunction, Subject } from 'rxjs';
+import { AppProfile, AppProfileService, ConfigService, IPScope, NetqueryConnection, Pin, PossilbeValue, QueryResult, SPNService, Verdict, deepClone, flattenProfileConfig, getAppSetting, setAppSetting } from '@safing/portmaster-api';
+import { BehaviorSubject, Observable, OperatorFunction, Subject, combineLatest } from 'rxjs';
 import { distinctUntilChanged, map, switchMap, takeUntil } from 'rxjs/operators';
 import { ActionIndicatorService } from '../action-indicator';
 import { objKeys } from '../utils';