[desktop]: Migrate from constructor-based dependency injection to inj…

…ect function

desktop/src/app/about/about.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import nebulosa from '../../assets/data/nebulosa.json'
 import { DependencyItem, FLAT_ICON_URL, IconItem } from '../../shared/types/about.types'
 import { AppComponent } from '../app.component'
@@ -16,7 +16,9 @@ export class AboutComponent {
 	protected readonly icons: IconItem[] = []
 	protected readonly dependencies: DependencyItem[] = []
 
-	constructor(app: AppComponent) {
+	constructor() {
+		const app = inject(AppComponent)
+
 		app.title = 'About'
 
 		this.mapDependencies()

desktop/src/app/alignment/alignment.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
 import { CameraExposureComponent } from '../../shared/components/camera-exposure/camera-exposure.component'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
@@ -18,6 +18,11 @@ import { CameraComponent } from '../camera/camera.component'
 	templateUrl: './alignment.component.html',
 })
 export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly ticker = inject(Ticker)
+
 	protected cameras: Camera[] = []
 	protected camera?: Camera
 
@@ -49,15 +54,11 @@ export class AlignmentComponent implements AfterViewInit, OnDestroy, Tickable {
 		return this.tab === 1 ? this.darvRequest.capture : this.tppaRequest.capture
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly preferenceService: PreferenceService,
-		private readonly ticker: Ticker,
-		electronService: ElectronService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Alignment'
 
 		electronService.on('CAMERA.UPDATED', (event) => {

desktop/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { Component, ElementRef, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import hotkeys from 'hotkeys-js'
 import { APP_CONFIG } from '../environments/environment'
@@ -11,6 +11,9 @@ import { ElectronService } from '../shared/services/electron.service'
 	templateUrl: './app.component.html',
 })
 export class AppComponent implements OnDestroy {
+	private readonly windowTitle = inject(Title)
+	private readonly electronService = inject(ElectronService)
+
 	readonly maximizable = !!window.context.resizable
 	readonly modal = window.context.modal ?? false
 	readonly topMenu: MenuItem[] = []
@@ -30,13 +33,11 @@ export class AppComponent implements OnDestroy {
 		this.windowTitle.setTitle(value)
 	}
 
-	constructor(
-		private readonly windowTitle: Title,
-		private readonly electronService: ElectronService,
-		confirmationService: ConfirmationService,
-		ngZone: NgZone,
-		hostElementRef: ElementRef<Element>,
-	) {
+	constructor() {
+		const confirmationService = inject(ConfirmationService)
+		const ngZone = inject(NgZone)
+		const hostElementRef = inject<ElementRef<Element>>(ElementRef)
+
 		console.info('APP_CONFIG', APP_CONFIG)
 
 		if (!window.context.resizable && window.context.autoResizable !== false) {
@@ -54,7 +55,7 @@ export class AppComponent implements OnDestroy {
 			this.resizeObserver = undefined
 		}
 
-		electronService.on('CONFIRMATION', (event) => {
+		this.electronService.on('CONFIRMATION', (event) => {
 			if (confirmationService.has(event.idempotencyKey)) {
 				void ngZone.run(() => {
 					return confirmationService.processConfirmationEvent(event)
@@ -64,7 +65,7 @@ export class AppComponent implements OnDestroy {
 
 		hotkeys('ctrl+alt+shift+d', (event) => {
 			event.preventDefault()
-			void electronService.openDevTools()
+			void this.electronService.openDevTools()
 		})
 	}
 

desktop/src/app/atlas/atlas.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'
+import { AfterContentInit, AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Chart, ChartData, ChartOptions } from 'chart.js'
 import zoomPlugin from 'chartjs-plugin-zoom'
@@ -52,6 +52,13 @@ import { AppComponent } from '../app.component'
 	encapsulation: ViewEncapsulation.None,
 })
 export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly angularService = inject(AngularService)
+
 	protected readonly sun = structuredClone(DEFAULT_SUN)
 	protected readonly moon = structuredClone(DEFAULT_MOON)
 	protected readonly planet = structuredClone(DEFAULT_PLANET)
@@ -390,35 +397,29 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 		return this.preference.favorites.find((e) => e.tab === this.tab && e.id === id)
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly route: ActivatedRoute,
-		electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly angularService: AngularService,
-		ngZone: NgZone,
-	) {
-		app.title = 'Sky Atlas'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Sky Atlas'
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-bookmark',
 			tooltip: 'Favorites',
 			command: (e) => {
 				this.favoritesPanel.toggle(e.originalEvent)
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-calendar',
 			tooltip: 'Date Time and Location',
 			command: (e) => {
 				this.dateTimeAndLocationPanel.toggle(e.originalEvent)
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-cog',
 			tooltip: 'Settings',
 			command: () => {

desktop/src/app/autofocus/autofocus.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
 import { ChartData, ChartOptions } from 'chart.js'
 import { Point } from 'electron'
 import { UIChart } from 'primeng/chart'
@@ -20,6 +20,11 @@ import { CameraComponent } from '../camera/camera.component'
 	templateUrl: './autofocus.component.html',
 })
 export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly ticker = inject(Ticker)
+
 	protected cameras: Camera[] = []
 	protected camera?: Camera
 
@@ -230,15 +235,11 @@ export class AutoFocusComponent implements AfterViewInit, OnDestroy, Tickable {
 		return this.chartData.datasets[5]
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly preferenceService: PreferenceService,
-		private readonly ticker: Ticker,
-		electronService: ElectronService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Auto Focus'
 
 		electronService.on('CAMERA.UPDATED', (event) => {

desktop/src/app/calculator/calculator.component.ts

@@ -1,4 +1,4 @@
-import { Component, Type } from '@angular/core'
+import { Component, Type, inject } from '@angular/core'
 import { CalculatorFormula } from '../../shared/types/calculator.types'
 import { AppComponent } from '../app.component'
 import { FormulaComponent } from './formula/formula.component'
@@ -213,7 +213,9 @@ export class CalculatorComponent {
 
 	protected formula = this.formulae[0]
 
-	constructor(app: AppComponent) {
+	constructor() {
+		const app = inject(AppComponent)
+
 		app.title = 'Calculator'
 	}
 }

desktop/src/app/calibration/calibration.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, OnDestroy, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'
+import { AfterViewInit, Component, HostListener, OnDestroy, QueryList, ViewChildren, ViewEncapsulation, inject } from '@angular/core'
 import { Listbox } from 'primeng/listbox'
 import { MenuItem } from '../../shared/components/menu-item/menu-item.component'
 import { SEPARATOR_MENU_ITEM } from '../../shared/constants'
@@ -16,6 +16,11 @@ import { AppComponent } from '../app.component'
 	encapsulation: ViewEncapsulation.None,
 })
 export class CalibrationComponent implements AfterViewInit, OnDestroy {
+	private readonly api = inject(ApiService)
+	private readonly electronService = inject(ElectronService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly preferenceService = inject(PreferenceService)
+
 	protected readonly frames = new Map<string, CalibrationFrame[]>()
 	protected readonly preference = structuredClone(DEFAULT_CALIBRATION_PREFERENCE)
 	protected readonly groupDialog = structuredClone(DEFAULT_CALIBRATION_GROUP_DIALOG)
@@ -141,13 +146,9 @@ export class CalibrationComponent implements AfterViewInit, OnDestroy {
 		return this.frames.get(this.activeGroup) ?? []
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly api: ApiService,
-		private readonly electronService: ElectronService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly preferenceService: PreferenceService,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+
 		app.title = 'Calibration'
 
 		app.topMenu.push({