diff --git a/desktop/src/app/about/about.component.ts b/desktop/src/app/about/about.component.ts
index 2a8cd604f..52b738279 100644
--- a/desktop/src/app/about/about.component.ts
+++ b/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()
diff --git a/desktop/src/app/alignment/alignment.component.ts b/desktop/src/app/alignment/alignment.component.ts
index 780632253..a5d104f8f 100644
--- a/desktop/src/app/alignment/alignment.component.ts
+++ b/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) => {
diff --git a/desktop/src/app/app.component.ts b/desktop/src/app/app.component.ts
index cc71de13d..4df0782d4 100644
--- a/desktop/src/app/app.component.ts
+++ b/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()
 		})
 	}
 
diff --git a/desktop/src/app/atlas/atlas.component.ts b/desktop/src/app/atlas/atlas.component.ts
index bad3f9084..2dfac3956 100644
--- a/desktop/src/app/atlas/atlas.component.ts
+++ b/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,19 +397,13 @@ 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) => {
@@ -410,7 +411,7 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-calendar',
 			tooltip: 'Date Time and Location',
 			command: (e) => {
@@ -418,7 +419,7 @@ export class AtlasComponent implements OnInit, AfterContentInit, AfterViewInit,
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-cog',
 			tooltip: 'Settings',
 			command: () => {
diff --git a/desktop/src/app/autofocus/autofocus.component.ts b/desktop/src/app/autofocus/autofocus.component.ts
index ed0668d68..f54ef8f9d 100644
--- a/desktop/src/app/autofocus/autofocus.component.ts
+++ b/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) => {
diff --git a/desktop/src/app/calculator/calculator.component.ts b/desktop/src/app/calculator/calculator.component.ts
index d51ca5d4a..db34fc3e4 100644
--- a/desktop/src/app/calculator/calculator.component.ts
+++ b/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'
 	}
 }
diff --git a/desktop/src/app/calibration/calibration.component.ts b/desktop/src/app/calibration/calibration.component.ts
index c919f0698..7c5573e63 100644
--- a/desktop/src/app/calibration/calibration.component.ts
+++ b/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({
diff --git a/desktop/src/app/camera/camera.component.ts b/desktop/src/app/camera/camera.component.ts
index a2aec43bf..8f5f1e828 100644
--- a/desktop/src/app/camera/camera.component.ts
+++ b/desktop/src/app/camera/camera.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, HostListener, NgZone, OnDestroy, ViewChild } from '@angular/core'
+import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { CameraExposureComponent } from '../../shared/components/camera-exposure/camera-exposure.component'
 import { MenuItemCommandEvent, SlideMenuItem } from '../../shared/components/menu-item/menu-item.component'
@@ -35,6 +35,14 @@ import { AppComponent } from '../app.component'
 	templateUrl: './camera.component.html',
 })
 export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly electronService = inject(ElectronService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly camera = structuredClone(DEFAULT_CAMERA)
 	protected calibrationModel: SlideMenuItem[] = []
 
@@ -186,19 +194,12 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 		return this.preference.wheel?.names[this.preference.wheel.position - 1]
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Camera'
+	constructor() {
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Camera'
 
-		electronService.on('CAMERA.UPDATED', (event) => {
+		this.electronService.on('CAMERA.UPDATED', (event) => {
 			if (event.device.id === this.camera.id) {
 				ngZone.run(() => {
 					Object.assign(this.camera, event.device)
@@ -207,7 +208,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('CAMERA.DETACHED', (event) => {
+		this.electronService.on('CAMERA.DETACHED', (event) => {
 			if (event.device.id === this.camera.id) {
 				ngZone.run(() => {
 					Object.assign(this.camera, DEFAULT_CAMERA)
@@ -215,7 +216,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('CAMERA.CAPTURE_ELAPSED', (event) => {
+		this.electronService.on('CAMERA.CAPTURE_ELAPSED', (event) => {
 			if (event.camera.id === this.camera.id) {
 				ngZone.run(() => {
 					this.running = this.cameraExposure?.handleCameraCaptureEvent(event) ?? false
@@ -223,7 +224,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('MOUNT.UPDATED', (event) => {
+		this.electronService.on('MOUNT.UPDATED', (event) => {
 			if (this.mode === 'CAPTURE' && event.device.id === this.preference.mount?.id) {
 				ngZone.run(() => {
 					if (this.preference.mount) {
@@ -233,7 +234,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('MOUNT.ATTACHED', () => {
+		this.electronService.on('MOUNT.ATTACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('MOUNT')
@@ -241,7 +242,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('MOUNT.DETACHED', () => {
+		this.electronService.on('MOUNT.DETACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('MOUNT')
@@ -249,7 +250,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('WHEEL.UPDATED', (event) => {
+		this.electronService.on('WHEEL.UPDATED', (event) => {
 			if (this.mode === 'CAPTURE' && event.device.id === this.preference.wheel?.id) {
 				ngZone.run(() => {
 					if (this.preference.wheel) {
@@ -259,7 +260,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('WHEEL.ATTACHED', () => {
+		this.electronService.on('WHEEL.ATTACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('WHEEL')
@@ -267,7 +268,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('WHEEL.DETACHED', () => {
+		this.electronService.on('WHEEL.DETACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('WHEEL')
@@ -275,7 +276,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('FOCUSER.UPDATED', (event) => {
+		this.electronService.on('FOCUSER.UPDATED', (event) => {
 			if (this.mode === 'CAPTURE' && event.device.id === this.preference.focuser?.id) {
 				ngZone.run(() => {
 					if (this.preference.focuser) {
@@ -285,7 +286,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('FOCUSER.ATTACHED', () => {
+		this.electronService.on('FOCUSER.ATTACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('FOCUSER')
@@ -293,7 +294,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('FOCUSER.DETACHED', () => {
+		this.electronService.on('FOCUSER.DETACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('FOCUSER')
@@ -301,7 +302,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('ROTATOR.UPDATED', (event) => {
+		this.electronService.on('ROTATOR.UPDATED', (event) => {
 			if (this.mode === 'CAPTURE' && event.device.id === this.preference.rotator?.id) {
 				ngZone.run(() => {
 					if (this.preference.rotator) {
@@ -311,7 +312,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('ROTATOR.ATTACHED', () => {
+		this.electronService.on('ROTATOR.ATTACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('ROTATOR')
@@ -319,7 +320,7 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('ROTATOR.DETACHED', () => {
+		this.electronService.on('ROTATOR.DETACHED', () => {
 			if (this.mode === 'CAPTURE') {
 				void ngZone.run(() => {
 					return this.loadEquipment('ROTATOR')
@@ -327,11 +328,11 @@ export class CameraComponent implements AfterContentInit, OnDestroy, Tickable {
 			}
 		})
 
-		electronService.on('CALIBRATION.CHANGED', () => {
+		this.electronService.on('CALIBRATION.CHANGED', () => {
 			void ngZone.run(() => this.loadCalibrationGroups())
 		})
 
-		electronService.on('ROI.SELECTED', (event) => {
+		this.electronService.on('ROI.SELECTED', (event) => {
 			if (event.camera.id === this.camera.id) {
 				ngZone.run(() => {
 					this.request.x = event.x
diff --git a/desktop/src/app/dustcap/dustcap.component.ts b/desktop/src/app/dustcap/dustcap.component.ts
index 538ccfbb6..bccb85374 100644
--- a/desktop/src/app/dustcap/dustcap.component.ts
+++ b/desktop/src/app/dustcap/dustcap.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ApiService } from '../../shared/services/api.service'
 import { ElectronService } from '../../shared/services/electron.service'
@@ -11,17 +11,18 @@ import { AppComponent } from '../app.component'
 	templateUrl: './dustcap.component.html',
 })
 export class DustCapComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly dustCap = structuredClone(DEFAULT_DUST_CAP)
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Dust Cap'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Dust Cap'
 
 		electronService.on('DUST_CAP.UPDATED', (event) => {
 			if (event.device.id === this.dustCap.id) {
diff --git a/desktop/src/app/filterwheel/filterwheel.component.ts b/desktop/src/app/filterwheel/filterwheel.component.ts
index cdb5d2f92..2448a530b 100644
--- a/desktop/src/app/filterwheel/filterwheel.component.ts
+++ b/desktop/src/app/filterwheel/filterwheel.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterContentInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import hotkeys from 'hotkeys-js'
 import { CheckboxChangeEvent } from 'primeng/checkbox'
@@ -19,6 +19,13 @@ import { AppComponent } from '../app.component'
 	styleUrls: ['./filterwheel.component.scss'],
 })
 export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly electronService = inject(ElectronService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly wheel = structuredClone(DEFAULT_WHEEL)
 	protected readonly request = structuredClone(DEFAULT_CAMERA_START_CAPTURE)
 	protected readonly preference = structuredClone(DEFAULT_WHEEL_PREFERENCE)
@@ -63,18 +70,12 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickab
 		return this.filters[this.position - 1]
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		private readonly electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Filter Wheel'
+	constructor() {
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Filter Wheel'
 
-		electronService.on('WHEEL.UPDATED', (event) => {
+		this.electronService.on('WHEEL.UPDATED', (event) => {
 			if (event.device.id === this.wheel.id) {
 				ngZone.run(() => {
 					Object.assign(this.wheel, event.device)
@@ -83,7 +84,7 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickab
 			}
 		})
 
-		electronService.on('WHEEL.DETACHED', (event) => {
+		this.electronService.on('WHEEL.DETACHED', (event) => {
 			if (event.device.id === this.wheel.id) {
 				ngZone.run(() => {
 					Object.assign(this.wheel, DEFAULT_WHEEL)
@@ -91,7 +92,7 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickab
 			}
 		})
 
-		electronService.on('FOCUSER.UPDATED', (event) => {
+		this.electronService.on('FOCUSER.UPDATED', (event) => {
 			if (event.device.id === this.focuser?.id) {
 				ngZone.run(() => {
 					if (this.focuser) {
@@ -101,7 +102,7 @@ export class FilterWheelComponent implements AfterContentInit, OnDestroy, Tickab
 			}
 		})
 
-		electronService.on('FOCUSER.DETACHED', (event) => {
+		this.electronService.on('FOCUSER.DETACHED', (event) => {
 			if (this.mode === 'CAPTURE' && event.device.id === this.focuser?.id) {
 				ngZone.run(() => {
 					this.focuser = undefined
diff --git a/desktop/src/app/flat-wizard/flat-wizard.component.ts b/desktop/src/app/flat-wizard/flat-wizard.component.ts
index 62f3e94c3..a84b66b87 100644
--- a/desktop/src/app/flat-wizard/flat-wizard.component.ts
+++ b/desktop/src/app/flat-wizard/flat-wizard.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 { AngularService } from '../../shared/services/angular.service'
 import { ApiService } from '../../shared/services/api.service'
@@ -18,6 +18,12 @@ import { CameraComponent } from '../camera/camera.component'
 	templateUrl: './flat-wizard.component.html',
 })
 export class FlatWizardComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly angularService = inject(AngularService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly ticker = inject(Ticker)
+
 	protected cameras: Camera[] = []
 	protected camera?: Camera
 
@@ -43,16 +49,11 @@ export class FlatWizardComponent implements AfterViewInit, OnDestroy, Tickable {
 		return Math.floor(this.request.meanTarget + (this.request.meanTolerance * this.request.meanTarget) / 100)
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly angularService: AngularService,
-		private readonly preferenceService: PreferenceService,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Flat Wizard'
 
 		electronService.on('FLAT_WIZARD.ELAPSED', (event) => {
diff --git a/desktop/src/app/focuser/focuser.component.ts b/desktop/src/app/focuser/focuser.component.ts
index 3ea8443f4..b7a647ba5 100644
--- a/desktop/src/app/focuser/focuser.component.ts
+++ b/desktop/src/app/focuser/focuser.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import hotkeys from 'hotkeys-js'
 import { ApiService } from '../../shared/services/api.service'
@@ -13,19 +13,20 @@ import { AppComponent } from '../app.component'
 	templateUrl: './focuser.component.html',
 })
 export class FocuserComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly focuser = structuredClone(DEFAULT_FOCUSER)
 	protected readonly preference = structuredClone(DEFAULT_FOCUSER_PREFERENCE)
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Focuser'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Focuser'
 
 		electronService.on('FOCUSER.UPDATED', (event) => {
 			if (event.device.id === this.focuser.id) {
diff --git a/desktop/src/app/framing/framing.component.ts b/desktop/src/app/framing/framing.component.ts
index ff6e9948f..ed77b8951 100644
--- a/desktop/src/app/framing/framing.component.ts
+++ b/desktop/src/app/framing/framing.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
@@ -12,6 +12,12 @@ import { AppComponent } from '../app.component'
 	templateUrl: './framing.component.html',
 })
 export class FramingComponent implements AfterViewInit, OnDestroy {
+	private readonly route = inject(ActivatedRoute)
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly electronService = inject(ElectronService)
+	private readonly preferenceService = inject(PreferenceService)
+
 	protected readonly preference = structuredClone(DEFAULT_FRAMING_PREFERENCE)
 	protected readonly fov = structuredClone(DEFAULT_FRAMING_FOV_DIALOG)
 	protected hipsSurveys: HipsSurvey[] = []
@@ -19,18 +25,13 @@ export class FramingComponent implements AfterViewInit, OnDestroy {
 
 	private frameId = ''
 
-	constructor(
-		app: AppComponent,
-		private readonly route: ActivatedRoute,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Framing'
 
-		electronService.on('DATA.CHANGED', (event: FramingRequest) => {
+		this.electronService.on('DATA.CHANGED', (event: FramingRequest) => {
 			return ngZone.run(() => this.frameFromData(event))
 		})
 	}
diff --git a/desktop/src/app/guider/guider.component.ts b/desktop/src/app/guider/guider.component.ts
index 1af1cd861..9bcafff90 100644
--- a/desktop/src/app/guider/guider.component.ts
+++ b/desktop/src/app/guider/guider.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, OnInit, ViewChild, inject } from '@angular/core'
 import { Chart, ChartData, ChartOptions } from 'chart.js'
 import zoomPlugin from 'chartjs-plugin-zoom'
 import { UIChart } from 'primeng/chart'
@@ -14,6 +14,10 @@ import { AppComponent } from '../app.component'
 	templateUrl: './guider.component.html',
 })
 export class GuiderComponent implements OnInit, AfterViewInit, OnDestroy, Tickable {
+	private readonly api = inject(ApiService)
+	private readonly ticker = inject(Ticker)
+	private readonly preferenceService = inject(PreferenceService)
+
 	protected guideOutputs: GuideOutput[] = []
 	protected guideOutput?: GuideOutput
 
@@ -193,14 +197,11 @@ export class GuiderComponent implements OnInit, AfterViewInit, OnDestroy, Tickab
 		},
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly api: ApiService,
-		private readonly ticker: Ticker,
-		private readonly preferenceService: PreferenceService,
-		electronService: ElectronService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Guider'
 
 		electronService.on('GUIDE_OUTPUT.UPDATED', (event) => {
diff --git a/desktop/src/app/home/home.component.ts b/desktop/src/app/home/home.component.ts
index 550813421..25c2085c1 100644
--- a/desktop/src/app/home/home.component.ts
+++ b/desktop/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, NgZone, ViewChild, ViewEncapsulation } from '@angular/core'
+import { AfterContentInit, Component, inject, NgZone, ViewChild, ViewEncapsulation } from '@angular/core'
 import nebulosa from '../../assets/data/nebulosa.json'
 import { DeviceChooserComponent } from '../../shared/components/device-chooser/device-chooser.component'
 import { DeviceConnectionCommandEvent, DeviceListMenuComponent } from '../../shared/components/device-list-menu/device-list-menu.component'
@@ -30,6 +30,11 @@ function scrollPageOf(element: Element) {
 	encapsulation: ViewEncapsulation.None,
 })
 export class HomeComponent implements AfterContentInit {
+	private readonly electronService = inject(ElectronService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly api = inject(ApiService)
+	private readonly preferenceService = inject(PreferenceService)
+
 	protected readonly preference = structuredClone(DEFAULT_HOME_PREFERENCE)
 	protected connection?: ConnectionDetails
 	protected readonly connectionDialog = structuredClone(DEFAULT_HOME_CONNECTION_DIALOG)
@@ -160,145 +165,141 @@ export class HomeComponent implements AfterContentInit {
 		return this.connection?.type === 'ALPACA' && this.hasDevices
 	}
 
-	constructor(
-		app: AppComponent,
-		private readonly electronService: ElectronService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly api: ApiService,
-		private readonly preferenceService: PreferenceService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const ngZone = inject(NgZone)
+
 		app.title = 'Nebulosa'
 
-		electronService.on('CAMERA.ATTACHED', (event) => {
+		this.electronService.on('CAMERA.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`CAMERA.DETACHED`, (event) => {
+		this.electronService.on(`CAMERA.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`CAMERA.UPDATED`, (event) => {
+		this.electronService.on(`CAMERA.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('MOUNT.ATTACHED', (event) => {
+		this.electronService.on('MOUNT.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`MOUNT.DETACHED`, (event) => {
+		this.electronService.on(`MOUNT.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`MOUNT.UPDATED`, (event) => {
+		this.electronService.on(`MOUNT.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('FOCUSER.ATTACHED', (event) => {
+		this.electronService.on('FOCUSER.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`FOCUSER.DETACHED`, (event) => {
+		this.electronService.on(`FOCUSER.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`FOCUSER.UPDATED`, (event) => {
+		this.electronService.on(`FOCUSER.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('WHEEL.ATTACHED', (event) => {
+		this.electronService.on('WHEEL.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`WHEEL.DETACHED`, (event) => {
+		this.electronService.on(`WHEEL.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`WHEEL.UPDATED`, (event) => {
+		this.electronService.on(`WHEEL.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('ROTATOR.ATTACHED', (event) => {
+		this.electronService.on('ROTATOR.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`ROTATOR.DETACHED`, (event) => {
+		this.electronService.on(`ROTATOR.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`ROTATOR.UPDATED`, (event) => {
+		this.electronService.on(`ROTATOR.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('GUIDE_OUTPUT.ATTACHED', (event) => {
+		this.electronService.on('GUIDE_OUTPUT.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`GUIDE_OUTPUT.DETACHED`, (event) => {
+		this.electronService.on(`GUIDE_OUTPUT.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`GUIDE_OUTPUT.UPDATED`, (event) => {
+		this.electronService.on(`GUIDE_OUTPUT.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('LIGHT_BOX.ATTACHED', (event) => {
+		this.electronService.on('LIGHT_BOX.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`LIGHT_BOX.DETACHED`, (event) => {
+		this.electronService.on(`LIGHT_BOX.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`LIGHT_BOX.UPDATED`, (event) => {
+		this.electronService.on(`LIGHT_BOX.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('DUST_CAP.ATTACHED', (event) => {
+		this.electronService.on('DUST_CAP.ATTACHED', (event) => {
 			ngZone.run(() => {
 				this.deviceAdded(event.device)
 			})
 		})
-		electronService.on(`DUST_CAP.DETACHED`, (event) => {
+		this.electronService.on(`DUST_CAP.DETACHED`, (event) => {
 			ngZone.run(() => {
 				this.deviceRemoved(event.device)
 			})
 		})
-		electronService.on(`DUST_CAP.UPDATED`, (event) => {
+		this.electronService.on(`DUST_CAP.UPDATED`, (event) => {
 			ngZone.run(() => {
 				this.deviceUpdated(event.device)
 			})
 		})
 
-		electronService.on('CONNECTION.CLOSED', async (event) => {
+		this.electronService.on('CONNECTION.CLOSED', async (event) => {
 			if (this.connection?.id === event.id) {
 				await ngZone.run(() => {
 					return this.updateConnection()
@@ -306,7 +307,7 @@ export class HomeComponent implements AfterContentInit {
 			}
 		})
 
-		electronService.on('IMAGE.OPEN', (event) => {
+		this.electronService.on('IMAGE.OPEN', (event) => {
 			return ngZone.run(() => {
 				return this.browserWindowService.openImage({ path: event.path, source: 'PATH' })
 			})
diff --git a/desktop/src/app/image/image.component.ts b/desktop/src/app/image/image.component.ts
index 9bbf90efe..5c6fa6713 100644
--- a/desktop/src/app/image/image.component.ts
+++ b/desktop/src/app/image/image.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy, ViewChild, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import hotkeys from 'hotkeys-js'
 import { NgxLegacyMoveableComponent, OnDrag, OnResize, OnRotate } from 'ngx-moveable'
@@ -61,6 +61,14 @@ import { AppComponent } from '../app.component'
 	styleUrls: ['./image.component.scss'],
 })
 export class ImageComponent implements AfterViewInit, OnDestroy {
+	private readonly app = inject(AppComponent)
+	private readonly route = inject(ActivatedRoute)
+	private readonly api = inject(ApiService)
+	private readonly electronService = inject(ElectronService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly angularService = inject(AngularService)
+
 	protected readonly preference = structuredClone(DEFAULT_IMAGE_PREFERENCE)
 	protected readonly solver = structuredClone(DEFAULT_IMAGE_SOLVER_DIALOG)
 	protected readonly starDetector = structuredClone(DEFAULT_STAR_DETECTOR_DIALOG)
@@ -408,27 +416,20 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 		return this.imageROI.show && this.rotation.transformation.angle % 360 === 0
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly route: ActivatedRoute,
-		private readonly api: ApiService,
-		private readonly electronService: ElectronService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly preferenceService: PreferenceService,
-		private readonly angularService: AngularService,
-		ngZone: NgZone,
-	) {
-		app.title = 'Image'
+	constructor() {
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Image'
 
-		app.topMenu.push(this.liveStackingMenuItem)
+		this.app.topMenu.push(this.liveStackingMenuItem)
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-fullscreen',
 			label: 'Fullscreen',
 			command: () => this.enterFullscreen(),
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-minus',
 			label: 'Zoom Out',
 			command: () => {
@@ -436,7 +437,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-plus',
 			label: 'Zoom In',
 			command: () => {
@@ -444,7 +445,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-numeric-0',
 			label: 'Reset Zoom',
 			command: () => {
@@ -452,7 +453,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-fit-to-screen',
 			label: 'Fit to Screen',
 			command: () => {
@@ -460,7 +461,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			},
 		})
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-cog',
 			label: 'Settings',
 			command: () => {
@@ -468,7 +469,7 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			},
 		})
 
-		electronService.on('CAMERA.CAPTURE_ELAPSED', async (event) => {
+		this.electronService.on('CAMERA.CAPTURE_ELAPSED', async (event) => {
 			if (event.state === 'EXPOSURE_FINISHED' && event.camera.id === this.imageData.camera?.id) {
 				await ngZone.run(async () => {
 					if (this.liveStacking.mode === 'NONE') {
@@ -492,13 +493,13 @@ export class ImageComponent implements AfterViewInit, OnDestroy {
 			}
 		})
 
-		electronService.on('DATA.CHANGED', (event: OpenImage) => {
+		this.electronService.on('DATA.CHANGED', (event: OpenImage) => {
 			return ngZone.run(() => {
 				return this.loadImageFromOpenImage(event)
 			})
 		})
 
-		electronService.on('CALIBRATION.CHANGED', async () => {
+		this.electronService.on('CALIBRATION.CHANGED', async () => {
 			return ngZone.run(() => {
 				return this.loadCalibrationGroups()
 			})
diff --git a/desktop/src/app/indi/indi.component.ts b/desktop/src/app/indi/indi.component.ts
index 908c9f8d4..aa6608611 100644
--- a/desktop/src/app/indi/indi.component.ts
+++ b/desktop/src/app/indi/indi.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, ViewChild, ViewEncapsulation, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { MenuItem } from 'primeng/api'
 import { Listbox } from 'primeng/listbox'
@@ -15,6 +15,9 @@ import { AppComponent } from '../app.component'
 	encapsulation: ViewEncapsulation.None,
 })
 export class INDIComponent implements AfterViewInit, OnDestroy {
+	private readonly route = inject(ActivatedRoute)
+	private readonly api = inject(ApiService)
+
 	protected devices: Device[] = []
 	protected properties: INDIProperty[] = []
 	protected groups: MenuItem[] = []
@@ -27,13 +30,11 @@ export class INDIComponent implements AfterViewInit, OnDestroy {
 	@ViewChild('listbox')
 	protected readonly messageBox!: Listbox
 
-	constructor(
-		app: AppComponent,
-		private readonly route: ActivatedRoute,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		ngZone: NgZone,
-	) {
+	constructor() {
+		const app = inject(AppComponent)
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
 		app.title = 'INDI'
 
 		electronService.on('DEVICE.PROPERTY_CHANGED', (event) => {
diff --git a/desktop/src/app/lightbox/lightbox.component.ts b/desktop/src/app/lightbox/lightbox.component.ts
index 489061052..b20092dd4 100644
--- a/desktop/src/app/lightbox/lightbox.component.ts
+++ b/desktop/src/app/lightbox/lightbox.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, inject, NgZone, OnDestroy } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { debounceTime, Subject, Subscription } from 'rxjs'
 import { ApiService } from '../../shared/services/api.service'
@@ -12,20 +12,21 @@ import { AppComponent } from '../app.component'
 	templateUrl: './lightbox.component.html',
 })
 export class LightBoxComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly lightBox = structuredClone(DEFAULT_LIGHT_BOX)
 
 	private readonly brightnessPublisher = new Subject<number>()
 	private readonly brightnessSubscription?: Subscription
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Light Box'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Light Box'
 
 		electronService.on('LIGHT_BOX.UPDATED', (event) => {
 			if (event.device.id === this.lightBox.id) {
diff --git a/desktop/src/app/mount/mount.component.ts b/desktop/src/app/mount/mount.component.ts
index b560fe80d..a77f424af 100644
--- a/desktop/src/app/mount/mount.component.ts
+++ b/desktop/src/app/mount/mount.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterContentInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import hotkeys from 'hotkeys-js'
 import { Subject, Subscription, interval, throttleTime } from 'rxjs'
@@ -19,6 +19,14 @@ import { AppComponent } from '../app.component'
 	templateUrl: './mount.component.html',
 })
 export class MountComponent implements AfterContentInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly angularService = inject(AngularService)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly mount = structuredClone(DEFAULT_MOUNT)
 	protected readonly remoteControl = structuredClone(DEFAULT_MOUNT_REMOTE_CONTROL_DIALOG)
 	protected readonly preference = structuredClone(DEFAULT_MOUNT_PREFERENCE)
@@ -203,18 +211,11 @@ export class MountComponent implements AfterContentInit, OnDestroy, Tickable {
 
 	protected targetCoordinateCommand = this.targetCoordinateModel[0]
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly route: ActivatedRoute,
-		private readonly angularService: AngularService,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Mount'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Mount'
 
 		electronService.on('MOUNT.UPDATED', async (event) => {
 			if (event.device.id === this.mount.id) {
diff --git a/desktop/src/app/rotator/rotator.component.ts b/desktop/src/app/rotator/rotator.component.ts
index db3a1aea0..1a8a03087 100644
--- a/desktop/src/app/rotator/rotator.component.ts
+++ b/desktop/src/app/rotator/rotator.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, NgZone, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, NgZone, OnDestroy, inject } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ApiService } from '../../shared/services/api.service'
 import { BrowserWindowService } from '../../shared/services/browser-window.service'
@@ -14,6 +14,12 @@ import { AppComponent } from '../app.component'
 	templateUrl: './rotator.component.html',
 })
 export class RotatorComponent implements AfterViewInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly route = inject(ActivatedRoute)
+	private readonly ticker = inject(Ticker)
+
 	protected readonly rotator = structuredClone(DEFAULT_ROTATOR)
 	protected readonly request = structuredClone(DEFAULT_CAMERA_START_CAPTURE)
 	protected readonly preference = structuredClone(DEFAULT_ROTATOR_PREFERENCE)
@@ -45,16 +51,11 @@ export class RotatorComponent implements AfterViewInit, OnDestroy, Tickable {
 		return this.mode !== 'CAPTURE'
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly route: ActivatedRoute,
-		private readonly ticker: Ticker,
-		ngZone: NgZone,
-	) {
-		app.title = 'Rotator'
+	constructor() {
+		const electronService = inject(ElectronService)
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Rotator'
 
 		electronService.on('ROTATOR.UPDATED', (event) => {
 			if (event.device.id === this.rotator.id) {
diff --git a/desktop/src/app/sequencer/sequencer.component.ts b/desktop/src/app/sequencer/sequencer.component.ts
index 68f6024a8..f84ea1bde 100644
--- a/desktop/src/app/sequencer/sequencer.component.ts
+++ b/desktop/src/app/sequencer/sequencer.component.ts
@@ -1,5 +1,5 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
-import { AfterContentInit, Component, HostListener, NgZone, OnDestroy, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'
+import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { CameraExposureComponent } from '../../shared/components/camera-exposure/camera-exposure.component'
 import { DialogMenuComponent } from '../../shared/components/dialog-menu/dialog-menu.component'
@@ -33,6 +33,15 @@ import { RotatorComponent } from '../rotator/rotator.component'
 	encapsulation: ViewEncapsulation.None,
 })
 export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable {
+	private readonly app = inject(AppComponent)
+	private readonly api = inject(ApiService)
+	private readonly browserWindowService = inject(BrowserWindowService)
+	private readonly electronService = inject(ElectronService)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly angularService = inject(AngularService)
+	private readonly ticker = inject(Ticker)
+	private readonly route = inject(ActivatedRoute)
+
 	protected cameras: Camera[] = []
 	protected mounts: Mount[] = []
 	protected wheels: Wheel[] = []
@@ -183,33 +192,25 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 		return { time, frames }
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly api: ApiService,
-		private readonly browserWindowService: BrowserWindowService,
-		private readonly electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-		private readonly angularService: AngularService,
-		private readonly ticker: Ticker,
-		private readonly route: ActivatedRoute,
-		ngZone: NgZone,
-	) {
-		app.title = 'Sequencer'
-
-		app.topMenu.push(this.createNewMenuItem)
-		app.topMenu.push(this.saveMenuItem)
-		app.topMenu.push(this.saveAsMenuItem)
-		app.topMenu.push(this.loadMenuItem)
-
-		app.beforeClose = async () => {
+	constructor() {
+		const ngZone = inject(NgZone)
+
+		this.app.title = 'Sequencer'
+
+		this.app.topMenu.push(this.createNewMenuItem)
+		this.app.topMenu.push(this.saveMenuItem)
+		this.app.topMenu.push(this.saveAsMenuItem)
+		this.app.topMenu.push(this.loadMenuItem)
+
+		this.app.beforeClose = async () => {
 			if (this.path && !this.saveMenuItem.disabled) {
-				return !(await angularService.confirm('Are you sure you want to close the window? Please make sure to save before exiting to avoid losing any important changes.'))
+				return !(await this.angularService.confirm('Are you sure you want to close the window? Please make sure to save before exiting to avoid losing any important changes.'))
 			} else {
 				return true
 			}
 		}
 
-		electronService.on('CAMERA.UPDATED', (event) => {
+		this.electronService.on('CAMERA.UPDATED', (event) => {
 			const camera = this.cameras.find((e) => e.id === event.device.id)
 
 			if (camera) {
@@ -220,7 +221,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 			}
 		})
 
-		electronService.on('MOUNT.UPDATED', (event) => {
+		this.electronService.on('MOUNT.UPDATED', (event) => {
 			const mount = this.mounts.find((e) => e.id === event.device.id)
 
 			if (mount) {
@@ -230,7 +231,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 			}
 		})
 
-		electronService.on('WHEEL.UPDATED', (event) => {
+		this.electronService.on('WHEEL.UPDATED', (event) => {
 			const wheel = this.wheels.find((e) => e.id === event.device.id)
 
 			if (wheel) {
@@ -240,7 +241,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 			}
 		})
 
-		electronService.on('FOCUSER.UPDATED', (event) => {
+		this.electronService.on('FOCUSER.UPDATED', (event) => {
 			const focuser = this.focusers.find((e) => e.id === event.device.id)
 
 			if (focuser) {
@@ -250,7 +251,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 			}
 		})
 
-		electronService.on('ROTATOR.UPDATED', (event) => {
+		this.electronService.on('ROTATOR.UPDATED', (event) => {
 			const rotator = this.rotators.find((e) => e.id === event.device.id)
 
 			if (rotator) {
@@ -260,7 +261,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
 			}
 		})
 
-		electronService.on('SEQUENCER.ELAPSED', (event) => {
+		this.electronService.on('SEQUENCER.ELAPSED', (event) => {
 			ngZone.run(() => {
 				if (this.running !== (event.state !== 'IDLE')) {
 					this.enableOrDisableTopbarMenu(this.running)
diff --git a/desktop/src/app/settings/settings.component.ts b/desktop/src/app/settings/settings.component.ts
index 3638dd7bb..263b27771 100644
--- a/desktop/src/app/settings/settings.component.ts
+++ b/desktop/src/app/settings/settings.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, OnDestroy } from '@angular/core'
+import { AfterViewInit, Component, HostListener, inject, OnDestroy } from '@angular/core'
 import { debounceTime, Subject, Subscription } from 'rxjs'
 import { MenuItem } from '../../shared/components/menu-item/menu-item.component'
 import { ElectronService } from '../../shared/services/electron.service'
@@ -15,6 +15,10 @@ import { AppComponent } from '../app.component'
 	templateUrl: './settings.component.html',
 })
 export class SettingsComponent implements AfterViewInit, OnDestroy {
+	private readonly app = inject(AppComponent)
+	private readonly preferenceService = inject(PreferenceService)
+	private readonly electronService = inject(ElectronService)
+
 	protected tab: SettingsTab = 'LOCATION'
 	protected showMenu = false
 	protected readonly preference = structuredClone(DEFAULT_SETTINGS_PREFERENCE)
@@ -83,15 +87,11 @@ export class SettingsComponent implements AfterViewInit, OnDestroy {
 		return this.preference.liveStacker[this.liveStackerType]
 	}
 
-	constructor(
-		private readonly app: AppComponent,
-		private readonly preferenceService: PreferenceService,
-		private readonly electronService: ElectronService,
-	) {
-		app.title = 'Settings'
-		app.subTitle = 'Location'
+	constructor() {
+		this.app.title = 'Settings'
+		this.app.subTitle = 'Location'
 
-		app.topMenu.push({
+		this.app.topMenu.push({
 			icon: 'mdi mdi-menu',
 			label: 'Menu',
 			command: () => {
diff --git a/desktop/src/shared/components/device-chooser/device-chooser.component.ts b/desktop/src/shared/components/device-chooser/device-chooser.component.ts
index 1d037e56b..1cd220207 100644
--- a/desktop/src/shared/components/device-chooser/device-chooser.component.ts
+++ b/desktop/src/shared/components/device-chooser/device-chooser.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core'
+import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation, inject } from '@angular/core'
 import { ApiService } from '../../services/api.service'
 import { Device } from '../../types/device.types'
 import { Undefinable } from '../../utils/types'
@@ -11,6 +11,8 @@ import { MenuItem } from '../menu-item/menu-item.component'
 	encapsulation: ViewEncapsulation.None,
 })
 export class DeviceChooserComponent<T extends Device = Device> {
+	private readonly api = inject(ApiService)
+
 	@Input({ required: true })
 	protected readonly title!: string
 
@@ -44,8 +46,6 @@ export class DeviceChooserComponent<T extends Device = Device> {
 	@ViewChild('deviceMenu')
 	private readonly deviceMenu!: DeviceListMenuComponent
 
-	constructor(private readonly api: ApiService) {}
-
 	async show() {
 		const device = await this.deviceMenu.show(this.devices, this.device)
 
diff --git a/desktop/src/shared/components/device-list-menu/device-list-menu.component.ts b/desktop/src/shared/components/device-list-menu/device-list-menu.component.ts
index 5b56b9522..68a4db26b 100644
--- a/desktop/src/shared/components/device-list-menu/device-list-menu.component.ts
+++ b/desktop/src/shared/components/device-list-menu/device-list-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core'
+import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation, inject } from '@angular/core'
 import { SEPARATOR_MENU_ITEM } from '../../constants'
 import { AngularService } from '../../services/angular.service'
 import { isGuideHead } from '../../types/camera.types'
@@ -20,6 +20,8 @@ export interface DeviceConnectionCommandEvent {
 	encapsulation: ViewEncapsulation.None,
 })
 export class DeviceListMenuComponent {
+	private readonly angularService = inject(AngularService)
+
 	@Input()
 	protected readonly model: SlideMenuItem[] = []
 
@@ -47,8 +49,6 @@ export class DeviceListMenuComponent {
 	@ViewChild('menu')
 	private readonly menu!: DialogMenuComponent
 
-	constructor(private readonly angularService: AngularService) {}
-
 	show<T extends Device>(devices: T[], selected?: NoInfer<T>, header?: string) {
 		const model: SlideMenuItem[] = []
 
diff --git a/desktop/src/shared/components/location/location.dialog.ts b/desktop/src/shared/components/location/location.dialog.ts
index 89453d347..329137069 100644
--- a/desktop/src/shared/components/location/location.dialog.ts
+++ b/desktop/src/shared/components/location/location.dialog.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Input, Optional, Output, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core'
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'
 import type { Location } from '../../types/atlas.types'
 import { DEFAULT_LOCATION } from '../../types/atlas.types'
@@ -9,6 +9,8 @@ import { MapComponent } from '../map/map.component'
 	templateUrl: './location.dialog.html',
 })
 export class LocationComponent implements AfterViewInit {
+	private readonly dialogRef = inject(DynamicDialogRef, { optional: true })
+
 	@ViewChild('map')
 	private readonly map?: MapComponent
 
@@ -22,10 +24,9 @@ export class LocationComponent implements AfterViewInit {
 		return !!this.dialogRef
 	}
 
-	constructor(
-		@Optional() private readonly dialogRef?: DynamicDialogRef,
-		@Optional() config?: DynamicDialogConfig<Location>,
-	) {
+	constructor() {
+		const config = inject<DynamicDialogConfig<Location>>(DynamicDialogConfig, { optional: true })
+
 		if (config) {
 			this.location = config.data ?? structuredClone(DEFAULT_LOCATION)
 		}
diff --git a/desktop/src/shared/components/path-chooser/path-chooser.component.ts b/desktop/src/shared/components/path-chooser/path-chooser.component.ts
index 9d8120e70..f20c05ed1 100644
--- a/desktop/src/shared/components/path-chooser/path-chooser.component.ts
+++ b/desktop/src/shared/components/path-chooser/path-chooser.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { ElectronService } from '../../services/electron.service'
 import { PreferenceService } from '../../services/preference.service'
 
@@ -7,6 +7,9 @@ import { PreferenceService } from '../../services/preference.service'
 	templateUrl: './path-chooser.component.html',
 })
 export class PathChooserComponent {
+	private readonly electronService = inject(ElectronService)
+	private readonly preferenceService = inject(PreferenceService)
+
 	@Input({ required: true })
 	protected readonly key!: string
 
@@ -34,11 +37,6 @@ export class PathChooserComponent {
 	@Output()
 	readonly pathChange = new EventEmitter<string>()
 
-	constructor(
-		private readonly electronService: ElectronService,
-		private readonly preferenceService: PreferenceService,
-	) {}
-
 	protected async choosePath() {
 		const preference = this.preferenceService.pathChooser.get()
 		const lastPath = preference[this.key] || undefined
diff --git a/desktop/src/shared/dialogs/confirm/confirm.dialog.ts b/desktop/src/shared/dialogs/confirm/confirm.dialog.ts
index 0f65686bd..ab45bdce8 100644
--- a/desktop/src/shared/dialogs/confirm/confirm.dialog.ts
+++ b/desktop/src/shared/dialogs/confirm/confirm.dialog.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { ConfirmEventType, Confirmation } from 'primeng/api'
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'
 import { AngularService } from '../../services/angular.service'
@@ -7,13 +7,14 @@ import { AngularService } from '../../services/angular.service'
 	templateUrl: './confirm.dialog.html',
 })
 export class ConfirmDialog {
+	private readonly dialogRef = inject(DynamicDialogRef)
+
 	readonly header: string
 	readonly message: string
 
-	constructor(
-		private readonly dialogRef: DynamicDialogRef,
-		config: DynamicDialogConfig<Confirmation>,
-	) {
+	constructor() {
+		const config = inject<DynamicDialogConfig<Confirmation>>(DynamicDialogConfig)
+
 		this.header = config.data?.header ?? config.header ?? 'Confirmation'
 		this.message = config.data?.message ?? 'Are you sure that you want to proceed?'
 	}
diff --git a/desktop/src/shared/directives/no-dropdown.directive.ts b/desktop/src/shared/directives/no-dropdown.directive.ts
index 4de1cbaae..ae17e4c30 100644
--- a/desktop/src/shared/directives/no-dropdown.directive.ts
+++ b/desktop/src/shared/directives/no-dropdown.directive.ts
@@ -1,9 +1,11 @@
-import { Directive, Host, Optional } from '@angular/core'
+import { Directive, inject } from '@angular/core'
 import { SplitButton } from 'primeng/splitbutton'
 
 @Directive({ selector: '[noDropdown]' })
 export class NoDropdownDirective {
-	constructor(@Host() @Optional() splitButton?: SplitButton) {
+	constructor() {
+		const splitButton = inject(SplitButton, { host: true, optional: true })
+
 		if (splitButton) {
 			// const onDropdownButtonClick = splitButton.onDropdownButtonClick
 
diff --git a/desktop/src/shared/directives/spinnable-number.directive.ts b/desktop/src/shared/directives/spinnable-number.directive.ts
index 58bd0eb5b..363da66cb 100644
--- a/desktop/src/shared/directives/spinnable-number.directive.ts
+++ b/desktop/src/shared/directives/spinnable-number.directive.ts
@@ -1,13 +1,11 @@
-import { Directive, Host, HostListener, Optional } from '@angular/core'
+import { Directive, HostListener, inject } from '@angular/core'
 import { InputNumber } from 'primeng/inputnumber'
 import { Knob } from 'primeng/knob'
 
 @Directive({ selector: '[spinnableNumber]' })
 export class SpinnableNumberDirective {
-	constructor(
-		@Host() @Optional() private readonly inputNumber?: InputNumber,
-		@Host() @Optional() private readonly knob?: Knob,
-	) {}
+	private readonly inputNumber = inject(InputNumber, { host: true, optional: true })
+	private readonly knob = inject(Knob, { host: true, optional: true })
 
 	@HostListener('wheel', ['$event'])
 	handleEvent(event: WheelEvent) {
diff --git a/desktop/src/shared/interceptors/confirmation.interceptor.ts b/desktop/src/shared/interceptors/confirmation.interceptor.ts
index 3fe7e2bae..d6a28d97e 100644
--- a/desktop/src/shared/interceptors/confirmation.interceptor.ts
+++ b/desktop/src/shared/interceptors/confirmation.interceptor.ts
@@ -1,12 +1,12 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Observable } from 'rxjs'
 import { ConfirmationService } from '../services/confirmation.service'
 import { IdempotencyKeyInterceptor } from './idempotency-key.interceptor'
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationInterceptor implements HttpInterceptor {
-	constructor(private readonly confirmationService: ConfirmationService) {}
+	private readonly confirmationService = inject(ConfirmationService)
 
 	intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
 		const hasConfirmation = req.urlWithParams.includes('hasConfirmation')
diff --git a/desktop/src/shared/interceptors/error.interceptor.ts b/desktop/src/shared/interceptors/error.interceptor.ts
index 9018fb5fc..b1a2f3e04 100644
--- a/desktop/src/shared/interceptors/error.interceptor.ts
+++ b/desktop/src/shared/interceptors/error.interceptor.ts
@@ -1,5 +1,5 @@
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { catchError, Observable, throwError } from 'rxjs'
 import { AngularService } from '../services/angular.service'
 import { Severity } from '../types/angular.types'
@@ -11,7 +11,7 @@ export interface ErrorResponse {
 
 @Injectable({ providedIn: 'root' })
 export class ErrorInterceptor implements HttpInterceptor {
-	constructor(private readonly angularService: AngularService) {}
+	private readonly angularService = inject(AngularService)
 
 	intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
 		return next.handle(req).pipe(
diff --git a/desktop/src/shared/interceptors/location.interceptor.ts b/desktop/src/shared/interceptors/location.interceptor.ts
index 8e2af3dbc..b0ee9dcb3 100644
--- a/desktop/src/shared/interceptors/location.interceptor.ts
+++ b/desktop/src/shared/interceptors/location.interceptor.ts
@@ -1,13 +1,13 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Observable } from 'rxjs'
 import { PreferenceService } from '../services/preference.service'
 
 @Injectable({ providedIn: 'root' })
 export class LocationInterceptor implements HttpInterceptor {
-	static readonly HEADER_KEY = 'X-Location'
+	private readonly preferenceService = inject(PreferenceService)
 
-	constructor(private readonly preferenceService: PreferenceService) {}
+	static readonly HEADER_KEY = 'X-Location'
 
 	intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
 		if (req.urlWithParams.includes('hasLocation')) {
diff --git a/desktop/src/shared/pipes/enum-dropdown.pipe.ts b/desktop/src/shared/pipes/enum-dropdown.pipe.ts
index 1e02fa89e..9f38969eb 100644
--- a/desktop/src/shared/pipes/enum-dropdown.pipe.ts
+++ b/desktop/src/shared/pipes/enum-dropdown.pipe.ts
@@ -1,10 +1,10 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { Pipe, PipeTransform, inject } from '@angular/core'
 import { DropdownItem } from '../types/angular.types'
 import { EnumPipe } from './enum.pipe'
 
 @Pipe({ name: 'enumDropdown' })
 export class EnumDropdownPipe implements PipeTransform {
-	constructor(private readonly enumPipe: EnumPipe) {}
+	private readonly enumPipe = inject(EnumPipe)
 
 	transform<T extends string>(value: T[]): DropdownItem<T>[] {
 		return value.map((value) => {
diff --git a/desktop/src/shared/services/angular.service.ts b/desktop/src/shared/services/angular.service.ts
index e26cd940f..2b844ff42 100644
--- a/desktop/src/shared/services/angular.service.ts
+++ b/desktop/src/shared/services/angular.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, Type } from '@angular/core'
+import { Injectable, Type, inject } from '@angular/core'
 import { MessageService } from 'primeng/api'
 import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog'
 import { ConfirmDialog } from '../dialogs/confirm/confirm.dialog'
@@ -7,10 +7,8 @@ import { Undefinable } from '../utils/types'
 
 @Injectable({ providedIn: 'root' })
 export class AngularService {
-	constructor(
-		private readonly dialogService: DialogService,
-		private readonly messageService: MessageService,
-	) {}
+	private readonly dialogService = inject(DialogService)
+	private readonly messageService = inject(MessageService)
 
 	open<T, R = T>(componentType: Type<unknown>, config: DynamicDialogConfig<T>) {
 		const ref = this.dialogService.open(componentType, {
diff --git a/desktop/src/shared/services/api.service.ts b/desktop/src/shared/services/api.service.ts
index 36ea95988..f22325d8f 100644
--- a/desktop/src/shared/services/api.service.ts
+++ b/desktop/src/shared/services/api.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { DARVStart, TPPAStart } from '../types/alignment.types'
 import { extractDate, extractDateTime } from '../types/angular.types'
 import { Angle, BodyPosition, CloseApproach, ComputedLocation, DeepSkyObject, EarthSeasonDateTime, Location, MinorPlanet, MoonPhases, Satellite, SatelliteGroupType, SkyObjectSearchFilter, SkyObjectType, Twilight } from '../types/atlas.types'
@@ -25,12 +25,12 @@ import { HttpService } from './http.service'
 
 @Injectable({ providedIn: 'root' })
 export class ApiService {
+	private readonly http = inject(HttpService)
+
 	get baseUrl() {
 		return this.http.baseUrl
 	}
 
-	constructor(private readonly http: HttpService) {}
-
 	// CONNECTION
 
 	connect(host: string, port: number, type: ConnectionType) {
diff --git a/desktop/src/shared/services/confirmation.service.ts b/desktop/src/shared/services/confirmation.service.ts
index dc7d26317..04a504b25 100644
--- a/desktop/src/shared/services/confirmation.service.ts
+++ b/desktop/src/shared/services/confirmation.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { ConfirmEventType } from 'primeng/api'
 import { ConfirmationEvent } from '../types/api.types'
 import { AngularService } from './angular.service'
@@ -6,12 +6,10 @@ import { ApiService } from './api.service'
 
 @Injectable({ providedIn: 'root' })
 export class ConfirmationService {
-	private readonly keys = new Set<string>()
+	private readonly angularService = inject(AngularService)
+	private readonly api = inject(ApiService)
 
-	constructor(
-		private readonly angularService: AngularService,
-		private readonly api: ApiService,
-	) {}
+	private readonly keys = new Set<string>()
 
 	register(key: string) {
 		this.keys.add(key)
diff --git a/desktop/src/shared/services/http.service.ts b/desktop/src/shared/services/http.service.ts
index e3bcfc3ec..915ad4f3a 100644
--- a/desktop/src/shared/services/http.service.ts
+++ b/desktop/src/shared/services/http.service.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { firstValueFrom } from 'rxjs'
 import { Nullable } from '../utils/types'
 
@@ -7,9 +7,9 @@ export type QueryParamType = Nullable<string | number | boolean> | QueryParamTyp
 
 @Injectable({ providedIn: 'root' })
 export class HttpService {
-	readonly baseUrl = `http://${window.apiHost}:${window.apiPort}`
+	private readonly http = inject(HttpClient)
 
-	constructor(private readonly http: HttpClient) {}
+	readonly baseUrl = `http://${window.apiHost}:${window.apiPort}`
 
 	get<T>(path: string) {
 		return firstValueFrom(this.http.get<T>(`${this.baseUrl}/${path}`))
diff --git a/desktop/src/shared/services/preference.service.ts b/desktop/src/shared/services/preference.service.ts
index c085a993a..c0ed69790 100644
--- a/desktop/src/shared/services/preference.service.ts
+++ b/desktop/src/shared/services/preference.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { AlignmentPreference, alignmentPreferenceWithDefault, DEFAULT_ALIGNMENT_PREFERENCE } from '../types/alignment.types'
 import { DEFAULT_SKY_ATLAS_PREFERENCE, SkyAtlasPreference, skyAtlasPreferenceWithDefault } from '../types/atlas.types'
 import { AutoFocusPreference, autoFocusPreferenceWithDefault, DEFAULT_AUTO_FOCUS_PREFERENCE } from '../types/autofocus.type'
@@ -46,6 +46,8 @@ export class PreferenceData<T> {
 
 @Injectable({ providedIn: 'root' })
 export class PreferenceService {
+	private readonly storage = inject(LocalStorageService)
+
 	readonly home: PreferenceData<HomePreference>
 	readonly image: PreferenceData<ImagePreference>
 	readonly skyAtlas: PreferenceData<SkyAtlasPreference>
@@ -56,7 +58,7 @@ export class PreferenceService {
 	readonly settings: PreferenceData<SettingsPreference>
 	readonly pathChooser: PreferenceData<Record<string, string | undefined>>
 
-	constructor(private readonly storage: LocalStorageService) {
+	constructor() {
 		this.home = this.create<HomePreference>('home', () => structuredClone(DEFAULT_HOME_PREFERENCE), homePreferenceWithDefault)
 		this.image = this.create<ImagePreference>('image', () => structuredClone(DEFAULT_IMAGE_PREFERENCE), imagePreferenceWithDefault)
 		this.skyAtlas = this.create<SkyAtlasPreference>('atlas', () => structuredClone(DEFAULT_SKY_ATLAS_PREFERENCE), skyAtlasPreferenceWithDefault)