diff --git a/angular-client/src/app/app-sidebar/app-sidebar.component.ts b/angular-client/src/app/app-sidebar/app-sidebar.component.ts
index db5d026f..eb75882e 100644
--- a/angular-client/src/app/app-sidebar/app-sidebar.component.ts
+++ b/angular-client/src/app/app-sidebar/app-sidebar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import SidebarService from 'src/services/sidebar.service';
 
@@ -8,13 +8,10 @@ import SidebarService from 'src/services/sidebar.service';
   styleUrls: ['./app-sidebar.component.css']
 })
 export default class AppSidebarComponent implements OnInit {
+  private router = inject(Router);
+  private sidebarService = inject(SidebarService);
   sidebarVisible = false;
 
-  constructor(
-    private router: Router,
-    private sidebarService: SidebarService
-  ) {}
-
   ngOnInit(): void {
     this.sidebarService.isOpen.subscribe((isOpen) => {
       this.sidebarVisible = isOpen;
diff --git a/angular-client/src/app/context/app-context.component.ts b/angular-client/src/app/context/app-context.component.ts
index 2d565c72..a042672d 100644
--- a/angular-client/src/app/context/app-context.component.ts
+++ b/angular-client/src/app/context/app-context.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { io } from 'socket.io-client';
 import { environment } from 'src/environment/environment';
 import SocketService from 'src/services/socket.service';
@@ -12,12 +12,11 @@ import Storage from 'src/services/storage.service';
   templateUrl: './app-context.component.html'
 })
 export default class AppContextComponent implements OnInit {
+  private storage = inject(Storage);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   socket = io((environment as any).url || 'http://localhost:8000');
   socketService = new SocketService(this.socket);
 
-  constructor(private storage: Storage) {}
-
   ngOnInit(): void {
     this.socketService.receiveData(this.storage);
   }
diff --git a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
index 8c5aa486..e8c1cbaf 100644
--- a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
+++ b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { decimalPipe } from 'src/utils/pipes.utils';
@@ -16,6 +16,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./acceleration-graphs.component.css']
 })
 export class AccelerationGraphsComponent implements OnInit {
+  private storage = inject(Storage);
   xData: GraphData[] = [];
   yData: GraphData[] = [];
 
@@ -24,8 +25,6 @@ export class AccelerationGraphsComponent implements OnInit {
 
   maxDataPoints = 400;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.XYZAccel).subscribe((value) => {
       const x1 = decimalPipe(value.values[0]);
diff --git a/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts b/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts
index 3cd1604a..a82c3645 100644
--- a/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts
+++ b/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { GraphData } from 'src/utils/types.utils';
@@ -9,10 +9,9 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./acceleration-over-time-display.component.css']
 })
 export default class AccelerationOverTimeDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   data: GraphData[] = [];
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.ACCELERATION).subscribe((value) => {
       this.data.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
diff --git a/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.ts b/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.ts
index 95c96e2f..9c9aff36 100644
--- a/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.ts
+++ b/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,8 +8,8 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./brake-pressure-display.component.css']
 })
 export default class BrakePressureDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   brakePressure: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BRAKE_PRESSURE).subscribe((value) => {
diff --git a/angular-client/src/components/carousel/carousel.component.ts b/angular-client/src/components/carousel/carousel.component.ts
index 24726859..e39cd6a8 100644
--- a/angular-client/src/components/carousel/carousel.component.ts
+++ b/angular-client/src/components/carousel/carousel.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { CarouselPageEvent } from 'primeng/carousel';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -15,6 +15,9 @@ export interface DialogData {
   styleUrls: ['carousel.component.css']
 })
 export class CarouselComponent {
+  public dialogRef = inject(DynamicDialogRef);
+  public config = inject(DynamicDialogConfig);
+  public router = inject(Router);
   runs: Run[];
   currentIndex: number = 0;
   previousIndex: number = 0;
@@ -22,15 +25,11 @@ export class CarouselComponent {
     this.dialogRef.close();
   };
 
-  constructor(
-    public dialogRef: DynamicDialogRef,
-    public config: DynamicDialogConfig,
-    public router: Router
-  ) {
-    this.runs = config.data.runs;
+  constructor() {
+    this.runs = this.config.data.runs;
     this.selectRun = (run: Run) => {
       this.dialogRef.close();
-      config.data.selectRun(run);
+      this.config.data.selectRun(run);
     };
   }
 
diff --git a/angular-client/src/components/current-total-timer/current-total-timer.component.ts b/angular-client/src/components/current-total-timer/current-total-timer.component.ts
index 1f65af1f..05585e21 100644
--- a/angular-client/src/components/current-total-timer/current-total-timer.component.ts
+++ b/angular-client/src/components/current-total-timer/current-total-timer.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 @Component({
@@ -7,11 +7,10 @@ import Storage from 'src/services/storage.service';
   styleUrls: ['./current-total-timer.component.css']
 })
 export default class CurrentTotalTimerComponent {
+  private storage = inject(Storage);
   @Input() currentTime: number = 0;
   @Input() totalTime: number = 0;
 
-  constructor(private storage: Storage) {}
-
   getCurrentTime() {
     return this.formatTime(this.currentTime);
   }
diff --git a/angular-client/src/components/double-line-graph/double-line-graph.component.ts b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
index d2f0f71c..090be021 100644
--- a/angular-client/src/components/double-line-graph/double-line-graph.component.ts
+++ b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import ApexCharts from 'apexcharts';
 import {
   ApexAxisChartSeries,
@@ -39,6 +39,7 @@ type ChartOptions = {
   providers: [DialogService]
 })
 export class DoubleLineGraphComponent implements OnInit {
+  public dialogService = inject(DialogService);
   @Input() data1!: GraphData[];
   @Input() color1!: string; // Must be hex
   @Input() title1?: string;
@@ -54,9 +55,6 @@ export class DoubleLineGraphComponent implements OnInit {
   timeDiffMs: number = 0;
   isSliding: boolean = false;
   timeRangeMs: number = 120000; // 2 minutes in ms
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.header,
diff --git a/angular-client/src/components/driver-component/driver-component.ts b/angular-client/src/components/driver-component/driver-component.ts
index 9a54ac6d..d07b7043 100644
--- a/angular-client/src/components/driver-component/driver-component.ts
+++ b/angular-client/src/components/driver-component/driver-component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,9 +8,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./driver-component.css']
 })
 export class DriverComponent implements OnInit {
+  private storage = inject(Storage);
   driver: string = 'No Driver';
 
-  constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.DRIVER).subscribe((value) => {
       [this.driver] = value.values || ['No Driver'];
diff --git a/angular-client/src/components/graph-dialog/graph-dialog.component.ts b/angular-client/src/components/graph-dialog/graph-dialog.component.ts
index e14a09ac..c6743d47 100644
--- a/angular-client/src/components/graph-dialog/graph-dialog.component.ts
+++ b/angular-client/src/components/graph-dialog/graph-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { DialogService, DynamicDialogConfig } from 'primeng/dynamicdialog';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,15 +8,14 @@ import { GraphData } from 'src/utils/types.utils';
   providers: [DialogService]
 })
 export class GraphDialogComponent {
+  public dialogService = inject(DialogService);
+  public config = inject(DynamicDialogConfig);
   @Input() data!: GraphData[];
   @Input() color!: string;
   @Input() title!: string;
   @Input() graphContainerId!: string;
 
-  constructor(
-    public dialogService: DialogService,
-    public config: DynamicDialogConfig
-  ) {
+  constructor() {
     this.data = this.config.data.data;
     this.color = this.config.data.color;
     this.title = this.config.data.title;
diff --git a/angular-client/src/components/graph/graph.component.ts b/angular-client/src/components/graph/graph.component.ts
index 788916b5..2049c419 100644
--- a/angular-client/src/components/graph/graph.component.ts
+++ b/angular-client/src/components/graph/graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import ApexCharts from 'apexcharts';
 import { ApexXAxis, ApexDataLabels, ApexChart, ApexMarkers, ApexGrid, ApexTooltip, ApexFill } from 'ng-apexcharts';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -24,6 +24,7 @@ type ChartOptions = {
   providers: [DialogService]
 })
 export class GraphComponent implements OnInit {
+  public dialogService = inject(DialogService);
   @Input() data!: GraphData[];
   @Input() color!: string; // Must be hex
   @Input() title?: string;
@@ -34,9 +35,6 @@ export class GraphComponent implements OnInit {
   timeDiffMs: number = 0;
   isSliding: boolean = false;
   timeRangeMs: number = 120000; // 2 minutes in ms
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.title,
diff --git a/angular-client/src/components/info-graph/info-graph.component.ts b/angular-client/src/components/info-graph/info-graph.component.ts
index 649d698a..8bdf5660 100644
--- a/angular-client/src/components/info-graph/info-graph.component.ts
+++ b/angular-client/src/components/info-graph/info-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { DialogService } from 'primeng/dynamicdialog';
 import { GraphDialogComponent } from '../graph-dialog/graph-dialog.component';
 import { GraphData } from 'src/utils/types.utils';
@@ -10,15 +10,13 @@ import { GraphData } from 'src/utils/types.utils';
   providers: [DialogService]
 })
 export class InfoGraphComponent {
+  public dialogService = inject(DialogService);
   @Input() data!: GraphData[];
   @Input() icon!: string;
   @Input() title!: string;
   @Input() color!: string;
   @Input() subTitle?: string;
   @Input() graphContainerId!: string;
-
-  constructor(public dialogService: DialogService) {}
-
   openDialog = () => {
     this.dialogService.open(GraphDialogComponent, {
       header: this.title,
diff --git a/angular-client/src/components/latency-display/latency-display.ts b/angular-client/src/components/latency-display/latency-display.ts
index bc219eed..756eba76 100644
--- a/angular-client/src/components/latency-display/latency-display.ts
+++ b/angular-client/src/components/latency-display/latency-display.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,14 +8,13 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./latency-display.css']
 })
 export default class LatencyDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   @Input() lowVal: number = 0;
   @Input() medVal: number = 50;
   @Input() highVal: number = 100;
   latency: number = 0;
   newLatency: number = 0;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit(): void {
     this.storage.get(IdentifierDataType.LATENCY).subscribe((value) => {
       this.latency = parseInt(value.values[0]);
diff --git a/angular-client/src/components/more-details/more-details.component.ts b/angular-client/src/components/more-details/more-details.component.ts
index 951ef036..8b124027 100644
--- a/angular-client/src/components/more-details/more-details.component.ts
+++ b/angular-client/src/components/more-details/more-details.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { MessageService } from 'primeng/api';
 import Storage from 'src/services/storage.service';
@@ -8,14 +8,10 @@ import Storage from 'src/services/storage.service';
   templateUrl: './more-details.component.html'
 })
 export default class MoreDetailsComponent {
+  private router = inject(Router);
+  private storage = inject(Storage);
+  private messageService = inject(MessageService);
   label: string = 'More Details';
-
-  constructor(
-    private router: Router,
-    private storage: Storage,
-    private messageService: MessageService
-  ) {}
-
   goToGraph = () => {
     const runId = this.storage.getCurrentRunId().value;
     if (runId) {
diff --git a/angular-client/src/components/motor-info/motor-info.component.ts b/angular-client/src/components/motor-info/motor-info.component.ts
index fa69b1f9..1dd28df8 100644
--- a/angular-client/src/components/motor-info/motor-info.component.ts
+++ b/angular-client/src/components/motor-info/motor-info.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -11,13 +11,13 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./motor-info.component.css']
 })
 export default class MotorInfoComponent implements OnInit {
+  private storage = inject(Storage);
   motorUsage: number = 100;
   coolUsage: number = 0;
   motorTemp: number = 0;
 
   piechartData: { value: number; name: string }[] = [];
 
-  constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.MOTOR_TEMP).subscribe((value) => {
       this.motorTemp = floatPipe(value.values[0]);
diff --git a/angular-client/src/components/pie-chart/pie-chart.component.ts b/angular-client/src/components/pie-chart/pie-chart.component.ts
index f8f92856..eacd90c2 100644
--- a/angular-client/src/components/pie-chart/pie-chart.component.ts
+++ b/angular-client/src/components/pie-chart/pie-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, Renderer2, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2, OnInit, inject } from '@angular/core';
 
 import { ApexNonAxisChartSeries, ApexPlotOptions, ApexChart, ApexFill } from 'ng-apexcharts';
 import Theme from 'src/services/theme.service';
@@ -17,17 +17,14 @@ export type ChartOptions = {
   styleUrls: ['pie-chart.component.css']
 })
 export default class PieChartComponent implements OnInit {
+  private renderer = inject(Renderer2);
+  private el = inject(ElementRef);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public chartOptions!: Partial<ChartOptions> | any;
   @Input() data: { value: number; name: string }[] = [];
   @Input() backgroundColor: string = Theme.infoBackground;
   currentWidth: number = 0;
 
-  constructor(
-    private renderer: Renderer2,
-    private el: ElementRef
-  ) {}
-
   ngOnInit() {
     this.setChartWidth();
     setTimeout(() => {
diff --git a/angular-client/src/components/raspberry-pi/raspberry-pi.component.ts b/angular-client/src/components/raspberry-pi/raspberry-pi.component.ts
index b331cf6b..a8c76663 100644
--- a/angular-client/src/components/raspberry-pi/raspberry-pi.component.ts
+++ b/angular-client/src/components/raspberry-pi/raspberry-pi.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -9,6 +9,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./raspberry-pi.component.css']
 })
 export default class RasberryPiComponent implements OnInit {
+  private storage = inject(Storage);
   cpuUsage: number = 0;
   cpuTemp: number = 0;
   ramUsage: number = 0;
@@ -18,8 +19,6 @@ export default class RasberryPiComponent implements OnInit {
   mobileThreshold = 768;
   isMobile = window.innerWidth < this.mobileThreshold;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.CPUUsage).subscribe((value) => {
       this.cpuUsage = floatPipe(value.values[0]);
diff --git a/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.ts b/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.ts
index 0f3a8d96..bf6c1cd1 100644
--- a/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.ts
+++ b/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import SidebarService from 'src/services/sidebar.service';
 
 @Component({
@@ -7,7 +7,7 @@ import SidebarService from 'src/services/sidebar.service';
   styleUrls: ['./sidebar-toggle.component.css']
 })
 export default class SidebarToggleComponent {
-  constructor(private sidebarService: SidebarService) {}
+  private sidebarService = inject(SidebarService);
 
   toggleSidebar() {
     this.sidebarService.openSidebar();
diff --git a/angular-client/src/components/speed-display/speed-display.component.ts b/angular-client/src/components/speed-display/speed-display.component.ts
index 470135b0..b136f8e8 100644
--- a/angular-client/src/components/speed-display/speed-display.component.ts
+++ b/angular-client/src/components/speed-display/speed-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,10 +8,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./speed-display.component.css']
 })
 export default class SpeedDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   speed: number = 0;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.SPEED).subscribe((value) => {
       this.speed = parseInt(value.values[0]);
diff --git a/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts b/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts
index 84d055e7..0f48215e 100644
--- a/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts
+++ b/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { GraphData } from 'src/utils/types.utils';
@@ -9,9 +9,9 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./speed-over-time-display.component.css']
 })
 export default class SpeedOverTimeDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   data: GraphData[] = [];
 
-  constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.SPEED).subscribe((value) => {
       this.data.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
diff --git a/angular-client/src/components/steering-angle-display/steering-angle-display.component.ts b/angular-client/src/components/steering-angle-display/steering-angle-display.component.ts
index fa49b2df..5610bb97 100644
--- a/angular-client/src/components/steering-angle-display/steering-angle-display.component.ts
+++ b/angular-client/src/components/steering-angle-display/steering-angle-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -14,10 +14,9 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./steering-angle-display.component.css']
 })
 export class SteeringAngleDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   steeringAngle: number = 0;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.STEERING_ANGLE).subscribe((value) => {
       this.steeringAngle = floatPipe(value.values[0]);
diff --git a/angular-client/src/components/toast-button/toast-button.component.ts b/angular-client/src/components/toast-button/toast-button.component.ts
index 0b7906b9..a534408e 100644
--- a/angular-client/src/components/toast-button/toast-button.component.ts
+++ b/angular-client/src/components/toast-button/toast-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { MessageService } from 'primeng/api';
 
 @Component({
@@ -7,6 +7,7 @@ import { MessageService } from 'primeng/api';
   styleUrls: ['./toast-button.component.css']
 })
 export class ToastButtonComponent implements OnInit {
+  private messageService = inject(MessageService);
   @Input() label!: string;
   @Input() onClick!: () => void;
   @Input() additionalStyles?: string;
@@ -20,8 +21,6 @@ export class ToastButtonComponent implements OnInit {
     }
   }
 
-  constructor(private messageService: MessageService) {}
-
   handleClick() {
     this.onClick();
     setTimeout(() => {
diff --git a/angular-client/src/components/torque-display/torque-display.component.ts b/angular-client/src/components/torque-display/torque-display.component.ts
index 4c89f892..1be66909 100644
--- a/angular-client/src/components/torque-display/torque-display.component.ts
+++ b/angular-client/src/components/torque-display/torque-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,10 +8,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./torque-display.component.css']
 })
 export default class TorqueDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   torque: number = 0;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.TORQUE).subscribe((value) => {
       this.torque = parseInt(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts
index dc6e27a5..d736e3fd 100644
--- a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts
+++ b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,9 +8,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrls: ['./charging-page-mobile.component.css']
 })
 export default class ChargingPageMobileComponent implements OnInit {
+  private storage = inject(Storage);
   @Input() time = new Date();
   location: string = 'No Location Set';
-  constructor(private storage: Storage) {}
   mobileThreshold = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
diff --git a/angular-client/src/pages/charging-page/charging-page.component.ts b/angular-client/src/pages/charging-page/charging-page.component.ts
index 9adeed12..42c8dfdd 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.ts
+++ b/angular-client/src/pages/charging-page/charging-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -11,9 +11,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   templateUrl: './charging-page.component.html'
 })
 export default class ChargingPageComponent implements OnInit {
+  private storage = inject(Storage);
   time = new Date();
   location: string = 'No Location Set';
-  constructor(private storage: Storage) {}
   mobileThreshold = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
diff --git a/angular-client/src/pages/charging-page/components/BMS-mode/BMS-mode-display.component.ts b/angular-client/src/pages/charging-page/components/BMS-mode/BMS-mode-display.component.ts
index f8229352..143ad10a 100644
--- a/angular-client/src/pages/charging-page/components/BMS-mode/BMS-mode-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/BMS-mode/BMS-mode-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -16,6 +16,7 @@ enum BMSMODE {
   styleUrls: ['./BMS-mode-display.component.css']
 })
 export default class BMSModeDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   bmsMode: BMSMODE = 1;
 
   // Mapping object for colors
@@ -25,7 +26,6 @@ export default class BMSModeDisplayComponent implements OnInit {
     [BMSMODE.CHARGING]: 'green',
     [BMSMODE.FAULTED]: 'red'
   };
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index 18ea5e14..3772d815 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -10,11 +10,11 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./active-status.component.css']
 })
 export default class ActiveStatusComponent implements OnInit {
+  private storage = inject(Storage);
   isActive: boolean = false;
   currentSeconds: number = 0;
   totalSeconds: number = Number(sessionStorage.getItem('active-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index d4556b02..a4d02775 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -10,11 +10,11 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./balancing-status.component.css']
 })
 export default class BalancingStatusComponent implements OnInit {
+  private storage = inject(Storage);
   isBalancing: boolean = false;
   currentSeconds: number = 0;
   totalSeconds: number = Number(sessionStorage.getItem('balancing-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.ts b/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.ts
index 2dee3f80..0b6437ed 100644
--- a/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -9,8 +9,8 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./current-display.component.css']
 })
 export default class CurrentDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   amps: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.CURRENT).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.ts b/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.ts
index 7983489e..ef54491e 100644
--- a/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.ts
+++ b/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
 import Storage from 'src/services/storage.service';
@@ -9,6 +9,7 @@ import Storage from 'src/services/storage.service';
   styleUrls: ['./battery-info-display.css']
 })
 export class BatteryInfoDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   voltage: number = 0;
   packTemp: number = 0;
   stateOfCharge: number = 0;
@@ -17,8 +18,6 @@ export class BatteryInfoDisplayComponent implements OnInit {
   mobileThreshold = 768;
   isMobile = window.innerWidth < this.mobileThreshold;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_TEMP).subscribe((value) => {
       this.packTemp = floatPipe(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts
index ff1eba78..e28a31ca 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -10,6 +10,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./cell-temp-display.component.css']
 })
 export default class CellTempDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   avgTemp: number = 0;
   maxTemp: number = 0;
   resetGraphButton = {
@@ -27,8 +28,6 @@ export default class CellTempDisplayComponent implements OnInit {
     this.isDesktop = window.innerWidth >= this.mobileThreshold;
   }
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
       this.maxTemp = floatPipe(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts
index 276a7ace..252f4d83 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 import { GraphData } from 'src/utils/types.utils';
@@ -9,6 +9,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./cell-temp-mobile.component.css']
 })
 export default class CellTempMobileComponent {
+  private storage = inject(Storage);
   @Input() avgTemp: number = 0;
   @Input() maxTemp: number = 0;
   @Input() resetGraphButton = {
@@ -18,5 +19,4 @@ export default class CellTempMobileComponent {
     icon: 'restart_alt'
   };
   @Input() cellTempData: GraphData[] = [];
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
index cf4deb5e..8f435e00 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,6 +8,6 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./cell-temp-graph.component.css']
 })
 export default class CellTempGraphComponent {
+  private storage = inject(Storage);
   @Input() maxCellTempData: GraphData[] = [];
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 75946e91..ca795e9e 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -10,13 +10,12 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./charging-status.component.css']
 })
 export default class ChargingStatusComponent implements OnInit {
+  private storage = inject(Storage);
   isCharging: boolean = false;
   currentSeconds: number = 0;
   totalSeconds: number = Number(sessionStorage.getItem('charging-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
       const chargingControlValue = floatPipe(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts
index 5f9f89e5..0b39c2ae 100644
--- a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -13,6 +13,7 @@ enum FaultType {
   styleUrls: ['./fault-display.component.css']
 })
 export default class FaultDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   faults: { type: string; name: string; time: string }[] = [];
   faultsShifted: boolean = false;
   resetButton = {
@@ -22,8 +23,6 @@ export default class FaultDisplayComponent implements OnInit {
     icon: 'restart_alt'
   };
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     const chargerFaultAndDisplayNames = [
       {
@@ -130,7 +129,7 @@ export default class FaultDisplayComponent implements OnInit {
   }
 
   /**
-   * Subscribes to the the {@link faultIdentifier} as key in {@link storage} given and
+   * Subscribes to the the {@link faultIdentifier} as key in {@link this.storage} given and
    * checks each message to see if it is a fault using {@link addFault}.
    *
    * @param displayName the name of the fault to be displayed.
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index c5e74490..f6fb5224 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -10,11 +10,11 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./faulted-status.component.css']
 })
 export default class FaultedStatusComponent implements OnInit {
+  private storage = inject(Storage);
   isFaulted: boolean = false;
   currentSeconds: number = 0;
   totalSeconds: number = Number(sessionStorage.getItem('faulted-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts
index fe03b26e..278a5520 100644
--- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { decimalPipe } from 'src/utils/pipes.utils';
@@ -10,6 +10,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./high-low-cell-display.component.css']
 })
 export default class HighLowCellDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   delta: number = 0;
   lowCellVoltage: number = 0;
   highCellVoltage: number = 0;
@@ -25,8 +26,6 @@ export default class HighLowCellDisplayComponent implements OnInit {
     icon: 'restart_alt'
   };
 
-  constructor(private storage: Storage) {}
-
   @HostListener('window:resize', ['$event'])
   onResize() {
     this.isDesktop = window.innerWidth >= this.mobileThreshold;
diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts
index 966b23e8..dcadeeb1 100644
--- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts
+++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,6 +8,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./high-low-cell-mobile.component.css']
 })
 export default class HighLowCellMobileComponent {
+  private storage = inject(Storage);
   @Input() delta: number = 0;
   @Input() lowCellVoltage: number = 0;
   @Input() highCellVoltage: number = 0;
@@ -22,6 +23,4 @@ export default class HighLowCellMobileComponent {
     },
     icon: 'restart_alt'
   };
-
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts
index 7b2932d3..402f15d4 100644
--- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts
+++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,8 +8,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./high-low-cell-graph.component.css']
 })
 export default class HighLowCellGraphComponent {
+  private storage = inject(Storage);
   @Input() highVoltsData: GraphData[] = [];
   @Input() lowVoltsData: GraphData[] = [];
-
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.ts b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.ts
index 2a6051a1..9b2abefe 100644
--- a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.ts
+++ b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -9,8 +9,8 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./pack-temp.component.css']
 })
 export default class PackTempComponent implements OnInit {
+  private storage = inject(Storage);
   packTemp: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_TEMP).subscribe((value) => {
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts
index 01c61bc7..0a818313 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -10,6 +10,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./pack-voltage-display.component.css']
 })
 export default class PackVoltageDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   voltage: number = 0;
   packVoltData: GraphData[] = [];
   resetGraphButton = {
@@ -26,8 +27,6 @@ export default class PackVoltageDisplayComponent implements OnInit {
     this.isDesktop = window.innerWidth >= this.mobileThreshold;
   }
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => {
       this.voltage = floatPipe(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts
index 552da2dd..a8da54d8 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,6 +8,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./pack-voltage-mobile.component.css']
 })
 export default class PackVoltageMobileDisplayComponent {
+  private storage = inject(Storage);
   @Input() voltage: number = 0;
   @Input() packVoltData: GraphData[] = [];
   resetGraphButton = {
@@ -16,5 +17,4 @@ export default class PackVoltageMobileDisplayComponent {
     },
     icon: 'restart_alt'
   };
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts
index cf2cc366..ec9a292b 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { GraphData } from 'src/utils/types.utils';
 
@@ -8,7 +8,6 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./pack-voltage-graph.component.css']
 })
 export default class PackVoltageGraphComponent {
+  private storage = inject(Storage);
   @Input() packVoltData: GraphData[] = [];
-
-  constructor(private storage: Storage) {}
 }
diff --git a/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts
index ed730fc0..8356f8b4 100644
--- a/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts
+++ b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { take } from 'rxjs';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -10,8 +10,9 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./starting-soc-timer.component.css']
 })
 export default class StartingSocTimerComponent {
+  private storage = inject(Storage);
   startingSoc: number = 0;
-  constructor(private storage: Storage) {
+  constructor() {
     this.storage
       .get(IdentifierDataType.STATE_OF_CHARGE)
       .pipe(take(1))
diff --git a/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.ts b/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.ts
index 80e9da9a..29a0a5cc 100644
--- a/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -9,8 +9,8 @@ import { floatPipe } from 'src/utils/pipes.utils';
   styleUrls: ['./state-of-charge-display.component.css']
 })
 export default class StateOfChargeDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   stateOfCharge: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.STATE_OF_CHARGE).subscribe((value) => {
diff --git a/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.ts b/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.ts
index ced7aad7..3bcadda5 100644
--- a/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.ts
+++ b/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import { Run } from 'src/utils/types.utils';
 import { CarouselComponent } from '../../../../components/carousel/carousel.component';
 import { getAllRuns } from 'src/api/run.api';
@@ -11,18 +11,15 @@ import { MessageService } from 'primeng/api';
   templateUrl: './run-selector.component.html'
 })
 export class RunSelectorComponent implements OnInit {
+  public dialogService = inject(DialogService);
+  private serverService = inject(APIService);
+  private messageService = inject(MessageService);
   label!: string;
   runs!: Run[];
   runsIsLoading = true;
   ref?: DynamicDialogRef;
   @Input() selectRun: (run: Run) => void = () => {};
 
-  constructor(
-    public dialogService: DialogService,
-    private serverService: APIService,
-    private messageService: MessageService
-  ) {}
-
   ngOnInit() {
     const runsQueryResponse = this.serverService.query<Run[]>(() => getAllRuns());
     runsQueryResponse.isLoading.subscribe((isLoading: boolean) => {
diff --git a/angular-client/src/pages/graph-page/graph-page.component.ts b/angular-client/src/pages/graph-page/graph-page.component.ts
index d8f7bf90..a941beb3 100644
--- a/angular-client/src/pages/graph-page/graph-page.component.ts
+++ b/angular-client/src/pages/graph-page/graph-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { getDataByDataTypeNameAndRunId } from 'src/api/data.api';
@@ -15,6 +15,9 @@ import { DataType, GraphData, Node, Run } from 'src/utils/types.utils';
   styleUrls: ['./graph-page.component.css']
 })
 export default class GraphPageComponent implements OnInit {
+  private serverService = inject(APIService);
+  private storage = inject(Storage);
+  private toastService = inject(MessageService);
   realTime: boolean = true;
 
   nodes?: Node[];
@@ -37,12 +40,6 @@ export default class GraphPageComponent implements OnInit {
   selectedDataTypeValuesError?: Error;
   subscription?: Subscription;
 
-  constructor(
-    private serverService: APIService,
-    private storage: Storage,
-    private toastService: MessageService
-  ) {}
-
   ngOnInit(): void {
     this.queryNodes();
 
diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts
index cc5c5032..15ab20bc 100644
--- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts
+++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.ts
@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, inject } from '@angular/core';
 import { DataType, Node, NodeWithVisibilityToggle, NodeWithVisibilityToggleObservable } from 'src/utils/types.utils';
 import Storage from 'src/services/storage.service';
 import { decimalPipe } from 'src/utils/pipes.utils';
@@ -47,6 +47,7 @@ import { debounceTime, Observable, of, Subscription } from 'rxjs';
   ]
 })
 export default class GraphSidebarDesktopComponent implements OnInit, OnDestroy {
+  private storage = inject(Storage);
   @Input() nodes!: Node[];
   @Input() selectDataType!: (dataType: DataType) => void;
   nodesWithVisibilityToggle!: Observable<NodeWithVisibilityToggleObservable[]>;
@@ -59,7 +60,6 @@ export default class GraphSidebarDesktopComponent implements OnInit, OnDestroy {
 
   dataValuesMap: Map<string, string> = new Map();
 
-  constructor(private storage: Storage) {}
   /**
    * Initializes the nodes with the visibility toggle.
    */
diff --git a/angular-client/src/pages/landing-page/components/connection-display/connection-display.component.ts b/angular-client/src/pages/landing-page/components/connection-display/connection-display.component.ts
index 099f3dda..2b40edf9 100644
--- a/angular-client/src/pages/landing-page/components/connection-display/connection-display.component.ts
+++ b/angular-client/src/pages/landing-page/components/connection-display/connection-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 @Component({
@@ -7,8 +7,8 @@ import Storage from 'src/services/storage.service';
   styleUrl: './connection-display.component.css'
 })
 export default class ConnectionDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   connected: boolean = false;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.getCurrentRunId().subscribe((runId) => {
diff --git a/angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.ts b/angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.ts
index a7e5e021..5c9d7cf7 100644
--- a/angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.ts
+++ b/angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 @Component({
@@ -7,8 +7,8 @@ import Storage from 'src/services/storage.service';
   styleUrl: './current-run-display.component.css'
 })
 export class CurrentRunDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   currentRun: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.getCurrentRunId().subscribe((runId) => {
diff --git a/angular-client/src/pages/landing-page/components/date-location-display/date-location.component.ts b/angular-client/src/pages/landing-page/components/date-location-display/date-location.component.ts
index 4e9d27c9..16b01ab5 100644
--- a/angular-client/src/pages/landing-page/components/date-location-display/date-location.component.ts
+++ b/angular-client/src/pages/landing-page/components/date-location-display/date-location.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,13 +8,12 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrl: './date-location.component.css'
 })
 export class DateLocationComponent implements OnInit {
+  private storage = inject(Storage);
   time = new Date();
   location: string = 'Boston, MA';
   mobileThreshold = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
-  constructor(private storage: Storage) {}
-
   ngOnInit() {
     setInterval(() => {
       this.time = new Date();
diff --git a/angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.ts b/angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.ts
index 80c36280..08d07eba 100644
--- a/angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.ts
+++ b/angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
@@ -8,8 +8,8 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
   styleUrl: './viewer-display.component.css'
 })
 export class ViewerDisplayComponent implements OnInit {
+  private storage = inject(Storage);
   numViewers: number = 0;
-  constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.VIEWERS).subscribe((value) => {
diff --git a/angular-client/src/pages/landing-page/landing-page.component.ts b/angular-client/src/pages/landing-page/landing-page.component.ts
index 52da35e4..950360da 100644
--- a/angular-client/src/pages/landing-page/landing-page.component.ts
+++ b/angular-client/src/pages/landing-page/landing-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, OnInit, inject } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { startNewRun } from 'src/api/run.api';
 import APIService from 'src/services/api.service';
@@ -13,17 +13,14 @@ import Storage from 'src/services/storage.service';
   templateUrl: './landing-page.component.html'
 })
 export default class LandingPageComponent implements OnInit {
+  private storage = inject(Storage);
+  private serverService = inject(APIService);
+  private messageService = inject(MessageService);
   time = new Date();
   newRunIsLoading = false;
   mobileThreshold = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
-  constructor(
-    private storage: Storage,
-    private serverService: APIService,
-    private messageService: MessageService
-  ) {}
-
   ngOnInit() {
     this.onStartNewRun = () => {
       const runsQueryResponse = this.serverService.query(() => startNewRun());
diff --git a/angular-client/src/pages/map/map.component.ts b/angular-client/src/pages/map/map.component.ts
index 383bc17d..4dd047c0 100644
--- a/angular-client/src/pages/map/map.component.ts
+++ b/angular-client/src/pages/map/map.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MapService } from '../../services/map.service';
 import { DataValue } from 'src/utils/socket.utils';
 import APIService from 'src/services/api.service';
@@ -13,16 +13,13 @@ import { Run } from 'src/utils/types.utils';
   styleUrls: ['./map.component.css']
 })
 export default class MapComponent implements OnInit {
+  private map = inject(MapService);
+  private storage = inject(Storage);
+  private apiService = inject(APIService);
   isLoading: boolean = false;
   isError: boolean = false;
   error?: Error;
 
-  constructor(
-    private map: MapService,
-    private storage: Storage,
-    private apiService: APIService
-  ) {}
-
   ngOnInit() {
     setTimeout(() => {
       this.map.buildMap('map');
diff --git a/angular-client/tsconfig.json b/angular-client/tsconfig.json
index 26ad6da0..06136ae4 100644
--- a/angular-client/tsconfig.json
+++ b/angular-client/tsconfig.json
@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
@@ -19,7 +18,8 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"]
+    "lib": ["ES2022", "dom"],
+    "skipLibCheck": true
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,