migrate angular 21 finalize

src/app/services/config.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {DbService} from './db.service';
 import {firstValueFrom, Observable} from 'rxjs';
 import {Config} from './config';
@@ -8,6 +8,8 @@ import {shareReplay} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class ConfigService {
+  private db = inject(DbService);
+
   private readonly config$ = this.db.doc$<Config>('global/config').pipe(
     shareReplay({
       bufferSize: 1,
@@ -15,8 +17,6 @@ export class ConfigService {
     })
   );
 
-  public constructor(private db: DbService) {}
-
   public get$ = (): Observable<Config | null> => this.config$;
   public get = (): Promise<Config | null> => firstValueFrom(this.get$());
 }

src/app/services/db.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {
   addDoc,
   collection,
@@ -76,7 +76,7 @@ export class DbDocument<T> {
   providedIn: 'root',
 })
 export class DbService {
-  public constructor(private fs: Firestore) {}
+  private fs = inject(Firestore);
 
   public col<T>(ref: CollectionPredicate<T>): DbCollection<T> {
     return typeof ref === 'string' ? new DbCollection<T>(this.fs, ref) : ref;

src/app/services/fullscreen.ts

@@ -6,12 +6,9 @@ export const openFullscreen = () => {
   }
 
   try {
-    const promise = elem.requestFullscreen();
-    if (promise && typeof promise.catch === 'function') {
-      void promise.catch(() => {
-        // Browser may reject when no user gesture is present. Keep app usable.
-      });
-    }
+    void elem.requestFullscreen().catch(() => {
+      // Browser may reject when no user gesture is present. Keep app usable.
+    });
   } catch {
     // Some browsers may throw synchronously if fullscreen is not allowed.
   }
@@ -19,11 +16,8 @@ export const openFullscreen = () => {
 
 export const closeFullscreen = () => {
   if (document.exitFullscreen) {
-    const promise = document.exitFullscreen();
-    if (promise && typeof promise.catch === 'function') {
-      void promise.catch(() => {
-        // Ignore; leaving fullscreen is a best-effort action.
-      });
-    }
+    void document.exitFullscreen().catch(() => {
+      // Ignore; leaving fullscreen is a best-effort action.
+    });
   }
 };

src/app/services/global-settings.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {DbService} from './db.service';
 import {GlobalSettings} from './global-settings';
 import {Observable} from 'rxjs';
@@ -8,6 +8,8 @@ import {shareReplay} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class GlobalSettingsService {
+  private db = inject(DbService);
+
   private readonly settings$ = this.db.doc$<GlobalSettings>('global/static').pipe(
     shareReplay({
       bufferSize: 1,
@@ -15,8 +17,6 @@ export class GlobalSettingsService {
     })
   );
 
-  public constructor(private db: DbService) {}
-
   public get get$(): Observable<GlobalSettings | null> {
     return this.settings$;
   }

src/app/services/user/owner.directive.ts

@@ -1,18 +1,16 @@
-import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef, inject} from '@angular/core';
 import {UserService} from './user.service';
 
 @Directive({selector: '[appOwner]'})
 export class OwnerDirective implements OnInit {
+  private element = inject(ElementRef);
+  private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+  private viewContainer = inject(ViewContainerRef);
+  private userService = inject(UserService);
+
   private currentUserId: string | null = null;
   private iAppOwner: string | null = null;
 
-  public constructor(
-    private element: ElementRef,
-    private templateRef: TemplateRef<unknown>,
-    private viewContainer: ViewContainerRef,
-    private userService: UserService
-  ) {}
-
   @Input()
   public set appOwner(value: string) {
     this.iAppOwner = value;

src/app/services/user/role.directive.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {ChangeDetectorRef, Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef, inject} from '@angular/core';
 import {roles} from './roles';
 import {UserService} from './user.service';
 import {User} from './user';
@@ -6,19 +6,17 @@ import {combineLatest} from 'rxjs';
 
 @Directive({selector: '[appRole]'})
 export class RoleDirective implements OnInit {
+  private element = inject(ElementRef);
+  private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+  private viewContainer = inject(ViewContainerRef);
+  private userService = inject(UserService);
+  private changeDetection = inject(ChangeDetectorRef);
+
   @Input() public appRole: roles[] = [];
   private currentUser: User | null = null;
   private loggedIn = false;
   private currentViewState = false;
 
-  public constructor(
-    private element: ElementRef,
-    private templateRef: TemplateRef<unknown>,
-    private viewContainer: ViewContainerRef,
-    private userService: UserService,
-    private changeDetection: ChangeDetectorRef
-  ) {}
-
   public ngOnInit(): void {
     combineLatest([this.userService.user$, this.userService.loggedIn$()]).subscribe(_ => {
       this.currentUser = _[0];

src/app/services/user/user-name/user-name.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, inject} from '@angular/core';
 import {UserService} from '../user.service';
 import {map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
@@ -11,9 +11,9 @@ import {AsyncPipe} from '@angular/common';
   imports: [AsyncPipe],
 })
 export class UserNameComponent {
-  public name$: Observable<string | null> | null = null;
+  private userService = inject(UserService);
 
-  public constructor(private userService: UserService) {}
+  public name$: Observable<string | null> | null = null;
 
   @Input()
   public set userId(id: string) {

src/app/services/user/user.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Auth, authState, createUserWithEmailAndPassword, sendPasswordResetEmail, signInWithEmailAndPassword, signOut} from '@angular/fire/auth';
 import {BehaviorSubject, firstValueFrom, Observable} from 'rxjs';
 import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators';
@@ -20,18 +20,18 @@ export interface SongUsageMigrationResult {
   providedIn: 'root',
 })
 export class UserService {
+  private auth = inject(Auth);
+  private db = inject(DbService);
+  private router = inject(Router);
+  private showDataService = inject(ShowDataService);
+  private showSongDataService = inject(ShowSongDataService);
+
   public users$ = this.db.col$<User>('users').pipe(shareReplay({bufferSize: 1, refCount: true}));
   private iUserId$ = new BehaviorSubject<string | null>(null);
   private iUser$ = new BehaviorSubject<User | null>(null);
   private userByIdCache = new Map<string, Observable<User | null>>();
 
-  public constructor(
-    private auth: Auth,
-    private db: DbService,
-    private router: Router,
-    private showDataService: ShowDataService,
-    private showSongDataService: ShowSongDataService
-  ) {
+  public constructor() {
     authState(this.auth)
       .pipe(
         filter(auth => !!auth),