From e1ab4ae73a69acbecb80c89f70efab6b98685fc7 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 4 Dec 2024 11:38:24 +0000
Subject: [PATCH 1/2] Migrate code to new angular features: signals and
 injection

---
 modules/ui/src/app/app-routing.module.ts      |  31 ++--
 modules/ui/src/app/app.component.html         |   1 -
 modules/ui/src/app/app.component.spec.ts      | 108 ++++++++-----
 modules/ui/src/app/app.component.ts           | 143 ++++++++++++------
 modules/ui/src/app/app.module.ts              | 113 --------------
 modules/ui/src/app/app.store.ts               |  16 +-
 .../app/components/bypass/bypass.component.ts |   7 +-
 .../components/callout/callout.component.ts   |   2 +-
 .../device-item/device-item.component.spec.ts |   2 -
 .../device-item/device-item.component.ts      |   2 +-
 .../device-tests/device-tests.component.ts    |   2 +-
 .../download-report-pdf.component.ts          |   2 +-
 .../download-report-zip.component.spec.ts     |   1 -
 .../download-report-zip.component.ts          |  14 +-
 .../download-report.component.ts              |   2 +-
 .../download-zip-modal.component.spec.ts      |   1 -
 .../download-zip-modal.component.ts           |  26 ++--
 .../dynamic-form.component.spec.ts            |  11 +-
 .../dynamic-form/dynamic-form.component.ts    |  14 +-
 .../escapable-dialog.component.ts             |  10 +-
 .../program-type-icon.component.ts            |   2 +-
 .../report-action/report-action.component.ts  |  12 +-
 .../shutdown-app-modal.component.ts           |  18 ++-
 .../shutdown-app/shutdown-app.component.ts    |  13 +-
 .../simple-dialog/simple-dialog.component.ts  |  25 ++-
 .../snack-bar/snack-bar.component.ts          |   5 +-
 .../components/spinner/spinner.component.ts   |   8 +-
 .../stepper/stepper.component.spec.ts         |  12 +-
 .../components/stepper/stepper.component.ts   |   1 -
 .../testing-complete.component.spec.ts        |   1 -
 .../testing-complete.component.ts             |  11 +-
 .../consent-dialog.component.ts               |  13 +-
 .../components/version/version.component.ts   |  11 +-
 .../src/app/components/wifi/wifi.component.ts |   2 +-
 .../interceptors/error-handler.interceptor.ts |  13 +-
 .../src/app/interceptors/error.interceptor.ts |   5 +-
 .../app/interceptors/loading.interceptor.ts   |  10 +-
 .../certificate-item.component.ts             |   2 +-
 .../certificate-upload-button.component.ts    |   2 +-
 .../certificates/certificates.component.ts    |  19 ++-
 .../pages/certificates/certificates.store.ts  |  12 +-
 ...evice-qualification-from.component.spec.ts |   2 +-
 .../device-qualification-from.component.ts    |  37 ++---
 .../pages/devices/devices-routing.module.ts   |  33 ----
 .../pages/devices/devices.component.spec.ts   |   6 +-
 .../app/pages/devices/devices.component.ts    |  45 ++++--
 .../src/app/pages/devices/devices.module.ts   |  59 --------
 .../ui/src/app/pages/devices/devices.store.ts |  10 +-
 .../delete-report/delete-report.component.ts  |  12 +-
 .../filter-chips/filter-chips.component.ts    |   2 +-
 .../filter-dialog.component.spec.ts           |   4 +-
 .../filter-dialog/filter-dialog.component.ts  |  47 +++---
 .../filter-header/filter-header.component.ts  |   2 +-
 .../pages/reports/reports-routing.module.ts   |  26 ----
 .../pages/reports/reports.component.spec.ts   |  10 +-
 .../app/pages/reports/reports.component.ts    |  62 +++++---
 .../src/app/pages/reports/reports.module.ts   |  51 -------
 .../ui/src/app/pages/reports/reports.store.ts |  12 +-
 .../success-dialog.component.ts               |  20 ++-
 .../profile-form/profile-form.component.ts    |  19 +--
 .../profile-item.component.spec.ts            |   4 +-
 .../profile-item/profile-item.component.ts    |  24 +--
 .../risk-assessment-routing.module.ts         |  26 ----
 .../risk-assessment.component.spec.ts         |   9 +-
 .../risk-assessment.component.ts              |  47 +++++-
 .../risk-assessment/risk-assessment.module.ts |  57 -------
 .../risk-assessment/risk-assessment.store.ts  |  12 +-
 .../settings-dropdown.component.spec.ts       |   6 +-
 .../settings-dropdown.component.ts            |   2 +-
 .../pages/settings/settings.component.spec.ts |  23 ++-
 .../app/pages/settings/settings.component.ts  |  69 +++++++--
 .../src/app/pages/settings/settings.store.ts  |  10 +-
 .../download-options.component.ts             |  10 +-
 .../testrun-initiate-form.component.spec.ts   |   4 +-
 .../testrun-initiate-form.component.ts        |  66 ++++++--
 .../testrun-status-card.component.spec.ts     |   6 +-
 .../testrun-status-card.component.ts          |  23 ++-
 .../testrun-table.component.html              |   4 +-
 .../testrun-table.component.spec.ts           |  11 +-
 .../testrun-table/testrun-table.component.ts  |  48 ++++--
 .../pages/testrun/testrun-routing.module.ts   |  26 ----
 .../pages/testrun/testrun.component.spec.ts   |  58 +++++--
 .../app/pages/testrun/testrun.component.ts    |  47 ++++--
 .../src/app/pages/testrun/testrun.module.ts   |  67 --------
 .../ui/src/app/pages/testrun/testrun.store.ts |  12 +-
 modules/ui/src/app/services/loader.service.ts |  11 +-
 .../src/app/services/notification.service.ts  |  14 +-
 .../services/test-run-mqtt.service.spec.ts    |   4 +-
 .../src/app/services/test-run-mqtt.service.ts |   8 +-
 .../ui/src/app/services/test-run.service.ts   |   6 +-
 modules/ui/src/app/store/effects.ts           |  16 +-
 modules/ui/src/main.ts                        |  52 ++++++-
 92 files changed, 949 insertions(+), 997 deletions(-)
 delete mode 100644 modules/ui/src/app/app.module.ts
 delete mode 100644 modules/ui/src/app/pages/devices/devices-routing.module.ts
 delete mode 100644 modules/ui/src/app/pages/devices/devices.module.ts
 delete mode 100644 modules/ui/src/app/pages/reports/reports-routing.module.ts
 delete mode 100644 modules/ui/src/app/pages/reports/reports.module.ts
 delete mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts
 delete mode 100644 modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts
 delete mode 100644 modules/ui/src/app/pages/testrun/testrun-routing.module.ts
 delete mode 100644 modules/ui/src/app/pages/testrun/testrun.module.ts

diff --git a/modules/ui/src/app/app-routing.module.ts b/modules/ui/src/app/app-routing.module.ts
index a9864fe63..fd77640cf 100644
--- a/modules/ui/src/app/app-routing.module.ts
+++ b/modules/ui/src/app/app-routing.module.ts
@@ -13,34 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes } from '@angular/router';
+import { ReportsComponent } from './pages/reports/reports.component';
+import { DevicesComponent } from './pages/devices/devices.component';
+import { CanDeactivateGuard } from './guards/can-deactivate.guard';
+import { TestrunComponent } from './pages/testrun/testrun.component';
+import { RiskAssessmentComponent } from './pages/risk-assessment/risk-assessment.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'testing',
-    loadChildren: () =>
-      import('./pages/testrun/testrun.module').then(m => m.TestrunModule),
+    component: TestrunComponent,
     title: 'Testrun',
   },
   {
     path: 'devices',
-    loadChildren: () =>
-      import('./pages/devices/devices.module').then(m => m.DevicesModule),
+    component: DevicesComponent,
+    canDeactivate: [CanDeactivateGuard],
     title: 'Testrun - Devices',
   },
   {
     path: 'reports',
-    loadChildren: () =>
-      import('./pages/reports/reports.module').then(m => m.ReportsModule),
+    component: ReportsComponent,
     title: 'Testrun - Reports',
   },
   {
     path: 'risk-assessment',
-    loadChildren: () =>
-      import('./pages/risk-assessment/risk-assessment.module').then(
-        m => m.RiskAssessmentModule
-      ),
+    component: RiskAssessmentComponent,
     title: 'Testrun - Risk Assessment',
   },
   {
@@ -49,9 +48,3 @@ const routes: Routes = [
     pathMatch: 'full',
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html
index 5da13edc6..cff15804e 100644
--- a/modules/ui/src/app/app.component.html
+++ b/modules/ui/src/app/app.component.html
@@ -83,7 +83,6 @@ <h1 class="main-heading">Testrun</h1>
         <span class="spacer"></span>
         <div class="app-bar-buttons">
           <button
-            #toggleCertificatesBtn
             class="app-toolbar-button app-toolbar-button-certificates"
             mat-icon-button
             aria-label="Certificates"
diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts
index 3c50042a1..6a28215fe 100644
--- a/modules/ui/src/app/app.component.spec.ts
+++ b/modules/ui/src/app/app.component.spec.ts
@@ -31,7 +31,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppRoutingModule } from './app-routing.module';
 import SpyObj = jasmine.SpyObj;
 import { BypassComponent } from './components/bypass/bypass.component';
 import { CalloutComponent } from './components/callout/callout.component';
@@ -74,6 +73,11 @@ import { WifiComponent } from './components/wifi/wifi.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Profile } from './model/profile';
 import { TestrunStatus } from './model/testrun-status';
+import { SettingsComponent } from './pages/settings/settings.component';
+import { SpinnerComponent } from './components/spinner/spinner.component';
+import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
+import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
+import { VersionComponent } from './components/version/version.component';
 
 const windowMock = {
   location: {
@@ -128,9 +132,10 @@ describe('AppComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [
+        FakeGeneralSettingsComponent,
+        AppComponent,
         RouterTestingModule,
         HttpClientTestingModule,
-        AppRoutingModule,
         MatButtonModule,
         BrowserAnimationsModule,
         MatIconModule,
@@ -142,6 +147,15 @@ describe('AppComponent', () => {
         CertificatesComponent,
         WifiComponent,
         MatTooltipModule,
+        FakeSpinnerComponent,
+        FakeShutdownAppComponent,
+        FakeVersionComponent,
+        FakeTestingCompleteComponent,
+        RouterTestingModule.withRoutes([
+          { path: 'devices', children: [] },
+          { path: 'testing', children: [] },
+          { path: 'reports', children: [] },
+        ]),
       ],
       providers: [
         { provide: TestRunService, useValue: mockService },
@@ -173,14 +187,25 @@ describe('AppComponent', () => {
         { provide: FocusManagerService, useValue: mockFocusManagerService },
         { provide: WINDOW, useValue: windowMock },
       ],
-      declarations: [
-        AppComponent,
-        FakeGeneralSettingsComponent,
-        FakeSpinnerComponent,
-        FakeShutdownAppComponent,
-        FakeVersionComponent,
-        FakeTestingCompleteComponent,
-      ],
+    }).overrideComponent(AppComponent, {
+      remove: {
+        imports: [
+          SettingsComponent,
+          SpinnerComponent,
+          ShutdownAppComponent,
+          TestingCompleteComponent,
+          VersionComponent,
+        ],
+      },
+      add: {
+        imports: [
+          FakeGeneralSettingsComponent,
+          FakeSpinnerComponent,
+          FakeShutdownAppComponent,
+          FakeVersionComponent,
+          FakeTestingCompleteComponent,
+        ],
+      },
     });
 
     mockMqttService.getNetworkAdapters.and.returnValue(of(MOCK_ADAPTERS));
@@ -292,23 +317,26 @@ describe('AppComponent', () => {
   it('should call toggleSettingsBtn focus when settingsDrawer close on closeSetting', fakeAsync(() => {
     fixture.detectChanges();
 
-    spyOn(component.settingsDrawer, 'close').and.returnValue(
+    spyOn(component.settingsDrawer(), 'close').and.returnValue(
       Promise.resolve('close')
     );
-    spyOn(component.toggleSettingsBtn, 'focus');
+    spyOn(component.toggleSettingsBtn(), 'focus');
 
     component.closeSetting(true);
     tick();
 
-    component.settingsDrawer.close().then(() => {
-      expect(component.toggleSettingsBtn.focus).toHaveBeenCalled();
-    });
+    component
+      .settingsDrawer()
+      .close()
+      .then(() => {
+        expect(component.toggleSettingsBtn().focus).toHaveBeenCalled();
+      });
   }));
 
   it('should call focusFirstElementInContainer if settingsDrawer opened not from toggleBtn', fakeAsync(() => {
     fixture.detectChanges();
 
-    spyOn(component.settingsDrawer, 'close').and.returnValue(
+    spyOn(component.settingsDrawer(), 'close').and.returnValue(
       Promise.resolve('close')
     );
 
@@ -317,39 +345,44 @@ describe('AppComponent', () => {
     component.closeSetting(false);
     flush();
 
-    component.settingsDrawer.close().then(() => {
-      expect(
-        mockFocusManagerService.focusFirstElementInContainer
-      ).toHaveBeenCalled();
-    });
+    component
+      .settingsDrawer()
+      .close()
+      .then(() => {
+        expect(
+          mockFocusManagerService.focusFirstElementInContainer
+        ).toHaveBeenCalled();
+      });
   }));
 
   it('should update interfaces and config', () => {
     fixture.detectChanges();
 
-    spyOn(component.settings, 'getSystemInterfaces');
-    spyOn(component.settings, 'getSystemConfig');
+    const settings = component.settings();
+    spyOn(settings, 'getSystemInterfaces');
+    spyOn(settings, 'getSystemConfig');
 
     component.openGeneralSettings(false, false);
 
-    expect(component.settings.getSystemInterfaces).toHaveBeenCalled();
-    expect(component.settings.getSystemConfig).toHaveBeenCalled();
+    expect(settings.getSystemInterfaces).toHaveBeenCalled();
+    expect(settings.getSystemConfig).toHaveBeenCalled();
   });
 
   it('should call settingsDrawer open on openSetting', fakeAsync(() => {
     fixture.detectChanges();
-    spyOn(component.settingsDrawer, 'open');
+    const settingsDrawer = component.settingsDrawer();
+    spyOn(settingsDrawer, 'open');
 
     component.openSetting(false);
     tick();
 
-    expect(component.settingsDrawer.open).toHaveBeenCalledTimes(1);
+    expect(settingsDrawer.open).toHaveBeenCalledTimes(1);
   }));
 
   it('should announce settingsDrawer disabled on openSetting and settings are disabled', fakeAsync(() => {
     fixture.detectChanges();
 
-    spyOn(component.settingsDrawer, 'open').and.returnValue(
+    spyOn(component.settingsDrawer(), 'open').and.returnValue(
       Promise.resolve('open')
     );
 
@@ -367,11 +400,12 @@ describe('AppComponent', () => {
     const settingsBtn = compiled.querySelector(
       '.app-toolbar-button-general-settings'
     ) as HTMLButtonElement;
-    spyOn(component.settingsDrawer, 'open');
+    const settingsDrawer = component.settingsDrawer();
+    spyOn(settingsDrawer, 'open');
 
     settingsBtn.click();
 
-    expect(component.settingsDrawer.open).toHaveBeenCalledTimes(1);
+    expect(settingsDrawer.open).toHaveBeenCalledTimes(1);
   });
 
   it('should have spinner', () => {
@@ -761,10 +795,10 @@ describe('AppComponent', () => {
   it('should not call toggleSettingsBtn focus on closeSetting when device length is 0', async () => {
     fixture.detectChanges();
 
-    spyOn(component.settingsDrawer, 'close').and.returnValue(
+    spyOn(component.settingsDrawer(), 'close').and.returnValue(
       Promise.resolve('close')
     );
-    const spyToggle = spyOn(component.toggleSettingsBtn, 'focus');
+    const spyToggle = spyOn(component.toggleSettingsBtn(), 'focus');
 
     await component.closeSetting(false);
 
@@ -785,11 +819,12 @@ describe('AppComponent', () => {
     const settingsBtn = compiled.querySelector(
       '.app-toolbar-button-certificates'
     ) as HTMLButtonElement;
-    spyOn(component.certDrawer, 'open');
+    const certDrawer = component.certDrawer();
+    spyOn(certDrawer, 'open');
 
     settingsBtn.click();
 
-    expect(component.certDrawer.open).toHaveBeenCalledTimes(1);
+    expect(certDrawer.open).toHaveBeenCalledTimes(1);
   });
 
   it('should set focus to first focusable elem when close callout', fakeAsync(() => {
@@ -805,7 +840,6 @@ describe('AppComponent', () => {
 @Component({
   selector: 'app-settings',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeGeneralSettingsComponent {
   @Input() settingsDisable = false;
@@ -817,14 +851,12 @@ class FakeGeneralSettingsComponent {
 @Component({
   selector: 'app-spinner',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeSpinnerComponent {}
 
 @Component({
   selector: 'app-shutdown-app',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeShutdownAppComponent {
   @Input() disable!: boolean;
@@ -833,7 +865,6 @@ class FakeShutdownAppComponent {
 @Component({
   selector: 'app-version',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeVersionComponent {
   @Input() consentShown!: boolean;
@@ -843,7 +874,6 @@ class FakeVersionComponent {
 @Component({
   selector: 'app-testing-complete',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeTestingCompleteComponent {
   @Input() profiles: Profile[] = [];
diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts
index 9a26d7b23..7ef9113ac 100644
--- a/modules/ui/src/app/app.component.ts
+++ b/modules/ui/src/app/app.component.ts
@@ -16,16 +16,16 @@
 import {
   AfterViewInit,
   Component,
+  effect,
   ElementRef,
-  QueryList,
-  ViewChild,
-  ViewChildren,
+  viewChild,
+  inject,
 } from '@angular/core';
-import { MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MatDrawer } from '@angular/material/sidenav';
+import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
 import { StatusOfTestrun } from './model/testrun-status';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { CalloutType } from './model/callout-type';
 import { Routes } from './model/routes';
 import { FocusManagerService } from './services/focus-manager.service';
@@ -35,9 +35,28 @@ import { setIsOpenAddDevice } from './store/actions';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { AppStore } from './app.store';
 import { TestRunService } from './services/test-run.service';
-import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { CdkTrapFocus, LiveAnnouncer } from '@angular/cdk/a11y';
 import { filter, take } from 'rxjs/operators';
-import { skip, timer } from 'rxjs';
+import { timer } from 'rxjs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { CertificatesComponent } from './pages/certificates/certificates.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
+import { BypassComponent } from './components/bypass/bypass.component';
+import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
+import { SpinnerComponent } from './components/spinner/spinner.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { VersionComponent } from './components/version/version.component';
+import { MatSelectModule } from '@angular/material/select';
+import { WifiComponent } from './components/wifi/wifi.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { CalloutComponent } from './components/callout/callout.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 const DEVICES_RUN_URL = '/assets/icons/device_run.svg';
 const TESTRUN_LOGO_URL = '/assets/icons/testrun_logo_small.svg';
@@ -51,36 +70,61 @@ const QUALIFICATION_URL = '/assets/icons/qualification.svg';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatButtonToggleModule,
+    MatRadioModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSnackBarModule,
+    SpinnerComponent,
+    BypassComponent,
+    VersionComponent,
+    CalloutComponent,
+    CdkTrapFocus,
+    ShutdownAppComponent,
+    CertificatesComponent,
+    WifiComponent,
+    TestingCompleteComponent,
+    SettingsComponent,
+    RouterModule,
+    CommonModule,
+  ],
   providers: [AppStore],
-  standalone: false,
 })
 export class AppComponent implements AfterViewInit {
+  private matIconRegistry = inject(MatIconRegistry);
+  private domSanitizer = inject(DomSanitizer);
+  private route = inject(Router);
+  private store = inject<Store<AppState>>(Store);
+  private state = inject<State<AppState>>(State);
+  private readonly focusManagerService = inject(FocusManagerService);
+  private testRunService = inject(TestRunService);
+  appStore = inject(AppStore);
+  private liveAnnouncer = inject(LiveAnnouncer);
+
   public readonly CalloutType = CalloutType;
   public readonly StatusOfTestrun = StatusOfTestrun;
   public readonly Routes = Routes;
   private openedSettingFromToggleBtn = true;
 
-  @ViewChild('settingsDrawer') public settingsDrawer!: MatDrawer;
-  @ViewChild('certDrawer') public certDrawer!: MatDrawer;
-  @ViewChild('toggleSettingsBtn') public toggleSettingsBtn!: HTMLButtonElement;
-  @ViewChild('toggleCertificatesBtn')
-  public toggleCertificatesBtn!: HTMLButtonElement;
-  @ViewChild('settings') public settings!: SettingsComponent;
-  @ViewChildren('riskAssessmentLink')
-  riskAssessmentLink!: QueryList<ElementRef>;
+  readonly settingsDrawer = viewChild.required<MatDrawer>('settingsDrawer');
+  readonly certDrawer = viewChild.required<MatDrawer>('certDrawer');
+  readonly toggleSettingsBtn =
+    viewChild.required<HTMLButtonElement>('toggleSettingsBtn');
+  readonly settings = viewChild.required<SettingsComponent>('settings');
   viewModel$ = this.appStore.viewModel$;
 
-  constructor(
-    private matIconRegistry: MatIconRegistry,
-    private domSanitizer: DomSanitizer,
-    private route: Router,
-    private store: Store<AppState>,
-    private state: State<AppState>,
-    private readonly focusManagerService: FocusManagerService,
-    private testRunService: TestRunService,
-    public appStore: AppStore,
-    private liveAnnouncer: LiveAnnouncer
-  ) {
+  readonly riskAssessmentLink = viewChild<ElementRef>('riskAssessmentLink');
+  private skipCount = 0;
+
+  constructor() {
     this.appStore.getDevices();
     this.appStore.getRiskProfiles();
     this.appStore.getSystemStatus();
@@ -115,6 +159,13 @@ export class AppComponent implements AfterViewInit {
       'qualification',
       this.domSanitizer.bypassSecurityTrustResourceUrl(QUALIFICATION_URL)
     );
+    effect(() => {
+      if (this.skipCount === 0 && this.riskAssessmentLink()) {
+        this.riskAssessmentLink()?.nativeElement.focus();
+      } else if (this.skipCount > 0) {
+        this.skipCount--;
+      }
+    });
   }
 
   ngAfterViewInit() {
@@ -124,16 +175,10 @@ export class AppComponent implements AfterViewInit {
         take(1)
       )
       .subscribe(({ systemStatus }) => {
-        let skipCount = 0;
         if (systemStatus === StatusOfTestrun.InProgress) {
           // link should not be focused after page is just loaded
-          skipCount = 1;
+          this.skipCount = 1;
         }
-        this.riskAssessmentLink.changes.pipe(skip(skipCount)).subscribe(() => {
-          if (this.riskAssessmentLink.length > 0) {
-            this.riskAssessmentLink.first.nativeElement.focus();
-          }
-        });
       });
   }
 
@@ -165,18 +210,20 @@ export class AppComponent implements AfterViewInit {
   }
 
   async closeCertificates(): Promise<void> {
-    await this.certDrawer.close();
+    await this.certDrawer().close();
   }
 
   async closeSetting(hasDevices: boolean): Promise<void> {
-    return await this.settingsDrawer.close().then(() => {
-      if (hasDevices) {
-        this.toggleSettingsBtn.focus();
-      } // else device create window will be opened
-      if (!this.openedSettingFromToggleBtn) {
-        this.focusManagerService.focusFirstElementInContainer();
-      }
-    });
+    return await this.settingsDrawer()
+      .close()
+      .then(() => {
+        if (hasDevices) {
+          this.toggleSettingsBtn().focus();
+        } // else device create window will be opened
+        if (!this.openedSettingFromToggleBtn) {
+          this.focusManagerService.focusFirstElementInContainer();
+        }
+      });
   }
 
   async openSetting(isSettingsDisabled: boolean): Promise<void> {
@@ -188,16 +235,16 @@ export class AppComponent implements AfterViewInit {
     isSettingsDisabled: boolean
   ) {
     this.openedSettingFromToggleBtn = openSettingFromToggleBtn;
-    this.settings.getSystemInterfaces();
-    this.settings.getSystemConfig();
-    await this.settingsDrawer.open();
+    this.settings().getSystemInterfaces();
+    this.settings().getSystemConfig();
+    await this.settingsDrawer().open();
     if (isSettingsDisabled) {
       await this.liveAnnouncer.announce('The settings panel is disabled');
     }
   }
 
   async openCert() {
-    await this.certDrawer.open();
+    await this.certDrawer().open();
   }
 
   consentShown() {
diff --git a/modules/ui/src/app/app.module.ts b/modules/ui/src/app/app.module.ts
deleted file mode 100644
index 4ab788cbc..000000000
--- a/modules/ui/src/app/app.module.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { importProvidersFrom, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatRadioModule } from '@angular/material/radio';
-import { BrowserModule } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { SettingsComponent } from './pages/settings/settings.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ErrorInterceptor } from './interceptors/error.interceptor';
-import { LoadingInterceptor } from './interceptors/loading.interceptor';
-import { SpinnerComponent } from './components/spinner/spinner.component';
-import { BypassComponent } from './components/bypass/bypass.component';
-import { VersionComponent } from './components/version/version.component';
-import { CalloutComponent } from './components/callout/callout.component';
-import { StoreModule } from '@ngrx/store';
-import { appFeatureKey, rootReducer } from './store/reducers';
-import { EffectsModule } from '@ngrx/effects';
-import { AppEffects } from './store/effects';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
-import { SettingsDropdownComponent } from './pages/settings/components/settings-dropdown/settings-dropdown.component';
-import { ShutdownAppComponent } from './components/shutdown-app/shutdown-app.component';
-import { WindowProvider } from './providers/window.provider';
-import { CertificatesComponent } from './pages/certificates/certificates.component';
-import { LOADER_TIMEOUT_CONFIG_TOKEN } from './services/loaderConfig';
-import { WifiComponent } from './components/wifi/wifi.component';
-import { TestingCompleteComponent } from './components/testing-complete/testing-complete.component';
-
-import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt';
-import { MatNativeDateModule } from '@angular/material/core';
-
-export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
-  hostname: window.location.hostname,
-  port: 9001,
-};
-
-@NgModule({
-  declarations: [AppComponent, SettingsComponent],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    NoopAnimationsModule,
-    MatButtonModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatSidenavModule,
-    MatButtonToggleModule,
-    MatRadioModule,
-    MatInputModule,
-    MatSelectModule,
-    MatTooltipModule,
-    HttpClientModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatSnackBarModule,
-    SpinnerComponent,
-    BypassComponent,
-    VersionComponent,
-    CalloutComponent,
-    StoreModule.forRoot({ [appFeatureKey]: rootReducer }),
-    EffectsModule.forRoot([AppEffects]),
-    CdkTrapFocus,
-    SettingsDropdownComponent,
-    ShutdownAppComponent,
-    CertificatesComponent,
-    MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
-    WifiComponent,
-    TestingCompleteComponent,
-  ],
-  providers: [
-    WindowProvider,
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ErrorInterceptor,
-      multi: true,
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: LoadingInterceptor,
-      multi: true,
-    },
-    { provide: LOADER_TIMEOUT_CONFIG_TOKEN, useValue: 1000 },
-    importProvidersFrom(MatNativeDateModule),
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/modules/ui/src/app/app.store.ts b/modules/ui/src/app/app.store.ts
index d5318f4f3..326c5cf40 100644
--- a/modules/ui/src/app/app.store.ts
+++ b/modules/ui/src/app/app.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { tap } from 'rxjs/operators';
 import {
@@ -76,6 +76,12 @@ export interface AppComponentState {
 }
 @Injectable()
 export class AppStore extends ComponentStore<AppComponentState> {
+  private store = inject<Store<AppState>>(Store);
+  private testRunService = inject(TestRunService);
+  private testRunMqttService = inject(TestRunMqttService);
+  private focusManagerService = inject(FocusManagerService);
+  private notificationService = inject(NotificationService);
+
   private consentShown$ = this.select(state => state.consentShown);
   private calloutState$ = this.select(state => state.calloutState);
   private isStatusLoaded$ = this.select(state => state.isStatusLoaded);
@@ -314,13 +320,7 @@ export class AppStore extends ComponentStore<AppComponentState> {
     );
   });
 
-  constructor(
-    private store: Store<AppState>,
-    private testRunService: TestRunService,
-    private testRunMqttService: TestRunMqttService,
-    private focusManagerService: FocusManagerService,
-    private notificationService: NotificationService
-  ) {
+  constructor() {
     // @ts-expect-error get object is defined in index.html
     const calloutState = sessionStorage.getObject(CALLOUT_STATE_KEY);
 
diff --git a/modules/ui/src/app/components/bypass/bypass.component.ts b/modules/ui/src/app/components/bypass/bypass.component.ts
index 3a7d2819c..08f2363f5 100644
--- a/modules/ui/src/app/components/bypass/bypass.component.ts
+++ b/modules/ui/src/app/components/bypass/bypass.component.ts
@@ -13,20 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { FocusManagerService } from '../../services/focus-manager.service';
 
 @Component({
   selector: 'app-bypass',
-  standalone: true,
+
   imports: [CommonModule, MatButtonModule],
   templateUrl: './bypass.component.html',
   styleUrls: ['./bypass.component.scss'],
 })
 export class BypassComponent {
-  constructor(private readonly focusManagerService: FocusManagerService) {}
+  private readonly focusManagerService = inject(FocusManagerService);
+
   skipToMainContent(event: Event) {
     event.preventDefault();
     this.focusManagerService.focusFirstElementInContainer();
diff --git a/modules/ui/src/app/components/callout/callout.component.ts b/modules/ui/src/app/components/callout/callout.component.ts
index 8fa46d9f0..53d73166a 100644
--- a/modules/ui/src/app/components/callout/callout.component.ts
+++ b/modules/ui/src/app/components/callout/callout.component.ts
@@ -36,7 +36,7 @@ import { ProgramTypeIconComponent } from '../program-type-icon/program-type-icon
     ProgramTypeIconComponent,
   ],
   selector: 'app-callout',
-  standalone: true,
+
   styleUrls: ['./callout.component.scss'],
   templateUrl: './callout.component.html',
 })
diff --git a/modules/ui/src/app/components/device-item/device-item.component.spec.ts b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
index b92c7d3cf..ddd95c696 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.spec.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.spec.ts
@@ -22,7 +22,6 @@ import {
 } from '../../model/device';
 
 import { DeviceItemComponent } from './device-item.component';
-import { DevicesModule } from '../../pages/devices/devices.module';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -34,7 +33,6 @@ describe('DeviceItemComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        DevicesModule,
         DeviceItemComponent,
         MatIconTestingModule,
         BrowserAnimationsModule,
diff --git a/modules/ui/src/app/components/device-item/device-item.component.ts b/modules/ui/src/app/components/device-item/device-item.component.ts
index 72690210f..eb3ed428d 100644
--- a/modules/ui/src/app/components/device-item/device-item.component.ts
+++ b/modules/ui/src/app/components/device-item/device-item.component.ts
@@ -31,7 +31,7 @@ import { ProgramType } from '../../model/program-type';
   selector: 'app-device-item',
   templateUrl: './device-item.component.html',
   styleUrls: ['./device-item.component.scss'],
-  standalone: true,
+
   imports: [
     CommonModule,
     MatButtonModule,
diff --git a/modules/ui/src/app/components/device-tests/device-tests.component.ts b/modules/ui/src/app/components/device-tests/device-tests.component.ts
index 58e1a3c4d..5ad9d4336 100644
--- a/modules/ui/src/app/components/device-tests/device-tests.component.ts
+++ b/modules/ui/src/app/components/device-tests/device-tests.component.ts
@@ -31,7 +31,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-device-tests',
-  standalone: true,
+
   imports: [CommonModule, MatCheckboxModule, ReactiveFormsModule],
   templateUrl: './device-tests.component.html',
   styleUrls: ['./device-tests.component.scss'],
diff --git a/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.ts b/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.ts
index cdd0e5244..bc68e1193 100644
--- a/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.ts
+++ b/modules/ui/src/app/components/download-report-pdf/download-report-pdf.component.ts
@@ -21,7 +21,7 @@ import { ReportActionComponent } from '../report-action/report-action.component'
 @Component({
   selector: 'app-download-report-pdf',
   templateUrl: './download-report-pdf.component.html',
-  standalone: true,
+
   imports: [CommonModule, DownloadReportComponent],
   providers: [DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts
index bd5278cf8..c0a2bd18b 100644
--- a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts
+++ b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.spec.ts
@@ -130,6 +130,5 @@ describe('DownloadReportZipComponent', () => {
 @Component({
   selector: 'app-fake-risk-assessment-component',
   template: '',
-  standalone: false,
 })
 class FakeRiskAssessmentComponent {}
diff --git a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts
index 742210937..00eca754c 100644
--- a/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts
+++ b/modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts
@@ -20,6 +20,7 @@ import {
   HostListener,
   Input,
   OnInit,
+  inject,
 } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Profile } from '../../model/profile';
@@ -33,7 +34,7 @@ import { TestingType } from '../../model/device';
   selector: 'app-download-report-zip',
   templateUrl: './download-report-zip.component.html',
   styleUrl: './download-report-zip.component.scss',
-  standalone: true,
+
   imports: [CommonModule, MatTooltipModule],
   providers: [DatePipe, MatTooltip],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -42,6 +43,9 @@ export class DownloadReportZipComponent
   extends ReportActionComponent
   implements OnInit
 {
+  dialog = inject(MatDialog);
+  tooltip = inject(MatTooltip);
+
   @Input() profiles: Profile[] = [];
   @Input() url: string | null | undefined = null;
 
@@ -87,11 +91,7 @@ export class DownloadReportZipComponent
     }
   }
 
-  constructor(
-    datePipe: DatePipe,
-    public dialog: MatDialog,
-    public tooltip: MatTooltip
-  ) {
-    super(datePipe);
+  constructor() {
+    super();
   }
 }
diff --git a/modules/ui/src/app/components/download-report/download-report.component.ts b/modules/ui/src/app/components/download-report/download-report.component.ts
index dcabc2281..24d8b51a4 100644
--- a/modules/ui/src/app/components/download-report/download-report.component.ts
+++ b/modules/ui/src/app/components/download-report/download-report.component.ts
@@ -23,7 +23,7 @@ import { ReportActionComponent } from '../report-action/report-action.component'
   selector: 'app-download-report',
   templateUrl: './download-report.component.html',
   styleUrls: ['./download-report.component.scss'],
-  standalone: true,
+
   imports: [CommonModule, MatTooltipModule],
   providers: [DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts
index f1dd83b77..74d0990e1 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts
+++ b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.spec.ts
@@ -301,6 +301,5 @@ describe('DownloadZipModalComponent', () => {
 @Component({
   selector: 'app-fake-risk-assessment-component',
   template: '',
-  standalone: false,
 })
 class FakeRiskAssessmentComponent {}
diff --git a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
index fec0cc40f..cc8accbcb 100644
--- a/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
+++ b/modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.ts
@@ -1,9 +1,9 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
@@ -51,7 +51,7 @@ export interface DialogCloseResult {
 
 @Component({
   selector: 'app-download-zip-modal',
-  standalone: true,
+
   imports: [
     CommonModule,
     MatDialogActions,
@@ -72,6 +72,12 @@ export class DownloadZipModalComponent
   extends EscapableDialogComponent
   implements OnDestroy, OnInit
 {
+  private readonly testRunService = inject(TestRunService);
+  override dialogRef: MatDialogRef<DownloadZipModalComponent>;
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+  private route = inject(Router);
+  private focusManagerService = inject(FocusManagerService);
+
   private destroy$: Subject<boolean> = new Subject<boolean>();
   readonly NO_PROFILE = {
     name: 'No Risk Profile selected',
@@ -81,14 +87,14 @@ export class DownloadZipModalComponent
   public readonly StatusOfTestrun = StatusOfTestrun;
   profiles: Profile[] = [];
   selectedProfile: Profile;
-  constructor(
-    private readonly testRunService: TestRunService,
-    public override dialogRef: MatDialogRef<DownloadZipModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-    private route: Router,
-    private focusManagerService: FocusManagerService
-  ) {
-    super(dialogRef);
+  constructor() {
+    const dialogRef =
+      inject<MatDialogRef<DownloadZipModalComponent>>(MatDialogRef);
+
+    super();
+    this.dialogRef = dialogRef;
+    const data = this.data;
+
     this.profiles = data.profiles.filter(
       profile => profile.status === ProfileStatus.VALID
     );
diff --git a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.spec.ts b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.spec.ts
index cb1207a82..a7381f7ce 100644
--- a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.spec.ts
+++ b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.spec.ts
@@ -16,7 +16,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DynamicFormComponent } from './dynamic-form.component';
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, viewChild, inject } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
@@ -33,10 +33,13 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
   standalone: false,
 })
 class DummyComponent {
-  @ViewChild('dynamicForm') public dynamicForm!: DynamicFormComponent;
+  private readonly fb = inject(FormBuilder);
+
+  readonly dynamicForm =
+    viewChild.required<DynamicFormComponent>('dynamicForm');
   public testForm!: FormGroup;
   public format = PROFILE_FORM;
-  constructor(private readonly fb: FormBuilder) {
+  constructor() {
     this.testForm = this.fb.group({
       test: [''],
     });
@@ -69,7 +72,7 @@ describe('DynamicFormComponent', () => {
     dummy = fixture.componentInstance;
     compiled = fixture.nativeElement as HTMLElement;
     fixture.detectChanges();
-    component = dummy.dynamicForm;
+    component = dummy.dynamicForm();
   });
 
   it('should create', () => {
diff --git a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.ts b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.ts
index d3e1fa3da..3b856d0e2 100644
--- a/modules/ui/src/app/components/dynamic-form/dynamic-form.component.ts
+++ b/modules/ui/src/app/components/dynamic-form/dynamic-form.component.ts
@@ -53,7 +53,7 @@ import { ProfileValidators } from '../../pages/risk-assessment/profile-form/prof
 import { DomSanitizer } from '@angular/platform-browser';
 @Component({
   selector: 'app-dynamic-form',
-  standalone: true,
+
   imports: [
     MatFormField,
     MatOption,
@@ -78,6 +78,11 @@ import { DomSanitizer } from '@angular/platform-browser';
   encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormComponent implements OnInit {
+  private fb = inject(FormBuilder);
+  private deviceValidators = inject(DeviceValidators);
+  private profileValidators = inject(ProfileValidators);
+  private domSanitizer = inject(DomSanitizer);
+
   public readonly FormControlType = FormControlType;
 
   @Input() format: QuestionFormat[] = [];
@@ -87,13 +92,6 @@ export class DynamicFormComponent implements OnInit {
   get formGroup() {
     return this.parentContainer.control as FormGroup;
   }
-
-  constructor(
-    private fb: FormBuilder,
-    private deviceValidators: DeviceValidators,
-    private profileValidators: ProfileValidators,
-    private domSanitizer: DomSanitizer
-  ) {}
   getControl(name: string | number) {
     return this.formGroup.get(name.toString()) as AbstractControl;
   }
diff --git a/modules/ui/src/app/components/escapable-dialog/escapable-dialog.component.ts b/modules/ui/src/app/components/escapable-dialog/escapable-dialog.component.ts
index d1a842dab..023dcca25 100644
--- a/modules/ui/src/app/components/escapable-dialog/escapable-dialog.component.ts
+++ b/modules/ui/src/app/components/escapable-dialog/escapable-dialog.component.ts
@@ -13,19 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { filter, take } from 'rxjs';
 import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-escapable-dialog',
-  standalone: true,
+
   imports: [CommonModule],
   template: '',
 })
 export class EscapableDialogComponent {
-  constructor(public dialogRef: MatDialogRef<EscapableDialogComponent>) {
+  dialogRef = inject<MatDialogRef<EscapableDialogComponent>>(MatDialogRef);
+
+  constructor() {
+    const dialogRef = this.dialogRef;
+
     this.dialogRef
       .keydownEvents()
       .pipe(
diff --git a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
index 45a34ddfc..61dfb9649 100644
--- a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
+++ b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
@@ -18,7 +18,7 @@ import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'app-program-type-icon',
-  standalone: true,
+
   imports: [MatIcon],
   template: ` <mat-icon [svgIcon]="type" class="icon"></mat-icon> `,
   styles: `
diff --git a/modules/ui/src/app/components/report-action/report-action.component.ts b/modules/ui/src/app/components/report-action/report-action.component.ts
index debf132fa..a7a6a0965 100644
--- a/modules/ui/src/app/components/report-action/report-action.component.ts
+++ b/modules/ui/src/app/components/report-action/report-action.component.ts
@@ -1,18 +1,24 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { TestrunStatus } from '../../model/testrun-status';
 
 @Component({
   selector: 'app-report-action',
-  standalone: true,
+
   imports: [CommonModule],
   template: '',
   providers: [DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ReportActionComponent {
+  private datePipe = inject(DatePipe);
+
   @Input() data!: TestrunStatus;
-  constructor(private datePipe: DatePipe) {}
 
   getTestRunId(data: TestrunStatus) {
     if (!data.device) {
diff --git a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts
index af42aabe9..77a6e179b 100644
--- a/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts
+++ b/modules/ui/src/app/components/shutdown-app-modal/shutdown-app-modal.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { EscapableDialogComponent } from '../escapable-dialog/escapable-dialog.component';
 import {
   MAT_DIALOG_DATA,
@@ -31,16 +31,20 @@ interface DialogData {
   selector: 'app-shutdown-app-modal',
   templateUrl: './shutdown-app-modal.component.html',
   styleUrl: './shutdown-app-modal.component.scss',
-  standalone: true,
+
   imports: [MatDialogModule, MatButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShutdownAppModalComponent extends EscapableDialogComponent {
-  constructor(
-    public override dialogRef: MatDialogRef<ShutdownAppModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData
-  ) {
-    super(dialogRef);
+  override dialogRef: MatDialogRef<ShutdownAppModalComponent>;
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+
+  constructor() {
+    const dialogRef =
+      inject<MatDialogRef<ShutdownAppModalComponent>>(MatDialogRef);
+
+    super();
+    this.dialogRef = dialogRef;
   }
 
   confirm() {
diff --git a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts
index 5f7b62270..cc0da31f3 100644
--- a/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts
+++ b/modules/ui/src/app/components/shutdown-app/shutdown-app.component.ts
@@ -16,9 +16,9 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
   Input,
   OnDestroy,
+  inject,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -32,20 +32,19 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-shutdown-app',
-  standalone: true,
+
   imports: [CommonModule, MatButtonModule, MatIcon, MatTooltipModule],
   templateUrl: './shutdown-app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShutdownAppComponent implements OnDestroy {
+  dialog = inject(MatDialog);
+  private testRunService = inject(TestRunService);
+  private window = inject<Window>(WINDOW);
+
   @Input() disable: boolean = false;
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
-  constructor(
-    public dialog: MatDialog,
-    private testRunService: TestRunService,
-    @Inject(WINDOW) private window: Window
-  ) {}
 
   openShutdownModal() {
     const dialogRef = this.dialog.open(ShutdownAppModalComponent, {
diff --git a/modules/ui/src/app/components/simple-dialog/simple-dialog.component.ts b/modules/ui/src/app/components/simple-dialog/simple-dialog.component.ts
index 4f790d59e..68da3e3d8 100644
--- a/modules/ui/src/app/components/simple-dialog/simple-dialog.component.ts
+++ b/modules/ui/src/app/components/simple-dialog/simple-dialog.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,
@@ -34,20 +34,29 @@ interface DialogData {
   selector: 'app-simple-dialog',
   templateUrl: './simple-dialog.component.html',
   styleUrls: ['./simple-dialog.component.scss'],
-  standalone: true,
+
   imports: [MatDialogModule, MatButtonModule],
 })
 export class SimpleDialogComponent extends ComponentWithAnnouncement(
   EscapableDialogComponent
 ) {
-  constructor(
-    public override dialogRef: MatDialogRef<SimpleDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-    public liveAnnouncer: LiveAnnouncer,
-    public override focusService: FocusManagerService
-  ) {
+  override dialogRef: MatDialogRef<SimpleDialogComponent>;
+  data: DialogData;
+  liveAnnouncer: LiveAnnouncer;
+  override focusService: FocusManagerService;
+
+  constructor() {
+    const dialogRef = inject<MatDialogRef<SimpleDialogComponent>>(MatDialogRef);
+    const data = inject<DialogData>(MAT_DIALOG_DATA);
+    const liveAnnouncer = inject(LiveAnnouncer);
+    const focusService = inject(FocusManagerService);
+
     // @ts-expect-error ComponentWithAnnouncement should have 4 arguments
     super(dialogRef, data.title, liveAnnouncer, focusService);
+    this.dialogRef = dialogRef;
+    this.data = data;
+    this.liveAnnouncer = liveAnnouncer;
+    this.focusService = focusService;
   }
 
   confirm() {
diff --git a/modules/ui/src/app/components/snack-bar/snack-bar.component.ts b/modules/ui/src/app/components/snack-bar/snack-bar.component.ts
index c1c4f4242..696a7a46e 100644
--- a/modules/ui/src/app/components/snack-bar/snack-bar.component.ts
+++ b/modules/ui/src/app/components/snack-bar/snack-bar.component.ts
@@ -27,7 +27,7 @@ import { setIsOpenWaitSnackBar, setIsStopTestrun } from '../../store/actions';
 
 @Component({
   selector: 'app-snack-bar',
-  standalone: true,
+
   imports: [
     MatButtonModule,
     MatSnackBarLabel,
@@ -39,8 +39,9 @@ import { setIsOpenWaitSnackBar, setIsStopTestrun } from '../../store/actions';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SnackBarComponent {
+  private store = inject<Store<AppState>>(Store);
+
   snackBarRef = inject(MatSnackBarRef);
-  constructor(private store: Store<AppState>) {}
 
   wait(): void {
     this.snackBarRef.dismiss();
diff --git a/modules/ui/src/app/components/spinner/spinner.component.ts b/modules/ui/src/app/components/spinner/spinner.component.ts
index de45b59e9..874b47c6f 100644
--- a/modules/ui/src/app/components/spinner/spinner.component.ts
+++ b/modules/ui/src/app/components/spinner/spinner.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { LoaderService } from '../../services/loader.service';
 import { CommonModule } from '@angular/common';
 import { Observable } from 'rxjs/internal/Observable';
@@ -7,13 +7,13 @@ import { Observable } from 'rxjs/internal/Observable';
   selector: 'app-spinner',
   templateUrl: './spinner.component.html',
   styleUrls: ['./spinner.component.scss'],
-  standalone: true,
+
   imports: [CommonModule],
 })
 export class SpinnerComponent implements OnInit {
-  loader$!: Observable<boolean>;
+  loaderService = inject(LoaderService);
 
-  constructor(public loaderService: LoaderService) {}
+  loader$!: Observable<boolean>;
 
   ngOnInit() {
     this.loader$ = this.loaderService.getLoading();
diff --git a/modules/ui/src/app/components/stepper/stepper.component.spec.ts b/modules/ui/src/app/components/stepper/stepper.component.spec.ts
index 25b5f9740..ed35db415 100644
--- a/modules/ui/src/app/components/stepper/stepper.component.spec.ts
+++ b/modules/ui/src/app/components/stepper/stepper.component.spec.ts
@@ -16,7 +16,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { StepperComponent } from './stepper.component';
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, viewChild, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { CdkStep } from '@angular/cdk/stepper';
 import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
@@ -26,7 +26,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @Component({
   selector: 'app-stepper-bypass',
-  standalone: true,
+
   imports: [
     CdkStep,
     StepperComponent,
@@ -39,11 +39,13 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
   templateUrl: './stepper-test.component.html',
 })
 class TestStepperComponent {
-  @ViewChild('stepper') public stepper!: StepperComponent;
+  private fb = inject(FormBuilder);
+
+  readonly stepper = viewChild.required<StepperComponent>('stepper');
   testForm;
   firstStep;
   secondStep;
-  constructor(private fb: FormBuilder) {
+  constructor() {
     this.firstStep = this.fb.group({
       firstControl: ['', [Validators.required]],
     });
@@ -85,7 +87,7 @@ describe('StepperComponent', () => {
   });
 
   it('should not mark selected step touched if not interacted', () => {
-    component.stepper.nextClick();
+    component.stepper().nextClick();
 
     expect(component.firstStep.touched).toBeFalse();
   });
diff --git a/modules/ui/src/app/components/stepper/stepper.component.ts b/modules/ui/src/app/components/stepper/stepper.component.ts
index cd0d58bfd..22321b71b 100644
--- a/modules/ui/src/app/components/stepper/stepper.component.ts
+++ b/modules/ui/src/app/components/stepper/stepper.component.ts
@@ -23,7 +23,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-stepper',
-  standalone: true,
   imports: [
     NgForOf,
     NgTemplateOutlet,
diff --git a/modules/ui/src/app/components/testing-complete/testing-complete.component.spec.ts b/modules/ui/src/app/components/testing-complete/testing-complete.component.spec.ts
index b86a0fa9f..494b58823 100644
--- a/modules/ui/src/app/components/testing-complete/testing-complete.component.spec.ts
+++ b/modules/ui/src/app/components/testing-complete/testing-complete.component.spec.ts
@@ -88,6 +88,5 @@ describe('TestingCompleteComponent', () => {
 @Component({
   selector: 'app-fake-risk-assessment-component',
   template: '',
-  standalone: false,
 })
 class FakeRiskAssessmentComponent {}
diff --git a/modules/ui/src/app/components/testing-complete/testing-complete.component.ts b/modules/ui/src/app/components/testing-complete/testing-complete.component.ts
index 79fc46c79..ccdc8c0c9 100644
--- a/modules/ui/src/app/components/testing-complete/testing-complete.component.ts
+++ b/modules/ui/src/app/components/testing-complete/testing-complete.component.ts
@@ -4,6 +4,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { Subject, takeUntil, timer } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
@@ -19,21 +20,19 @@ import { TestingType } from '../../model/device';
 
 @Component({
   selector: 'app-testing-complete',
-  standalone: true,
+
   imports: [],
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TestingCompleteComponent implements OnDestroy, OnInit {
+  dialog = inject(MatDialog);
+  private focusManagerService = inject(FocusManagerService);
+
   @Input() profiles: Profile[] = [];
   @Input() data!: TestrunStatus | null;
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(
-    public dialog: MatDialog,
-    private focusManagerService: FocusManagerService
-  ) {}
-
   ngOnInit() {
     timer(1000)
       .pipe(takeUntil(this.destroy$))
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
index 3becacf89..51c2b8ce3 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
+++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,
@@ -35,7 +35,7 @@ type DialogData = {
 
 @Component({
   selector: 'app-consent-dialog',
-  standalone: true,
+
   imports: [
     MatDialogModule,
     MatButtonModule,
@@ -48,13 +48,12 @@ type DialogData = {
   styleUrl: './consent-dialog.component.scss',
 })
 export class ConsentDialogComponent {
+  private readonly focusManagerService = inject(FocusManagerService);
+  dialogRef = inject<MatDialogRef<ConsentDialogComponent>>(MatDialogRef);
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+
   public readonly CalloutType = CalloutType;
   optOut = false;
-  constructor(
-    private readonly focusManagerService: FocusManagerService,
-    public dialogRef: MatDialogRef<ConsentDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData
-  ) {}
 
   confirm(optOut: boolean) {
     // dialog should be closed with opposite value to grant or deny access to GA
diff --git a/modules/ui/src/app/components/version/version.component.ts b/modules/ui/src/app/components/version/version.component.ts
index ad8fcafa0..ab83468b7 100644
--- a/modules/ui/src/app/components/version/version.component.ts
+++ b/modules/ui/src/app/components/version/version.component.ts
@@ -20,6 +20,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  inject,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
@@ -41,22 +42,20 @@ import { ConsentDialogComponent } from './consent-dialog/consent-dialog.componen
 declare const gtag: Function;
 @Component({
   selector: 'app-version',
-  standalone: true,
+
   imports: [CommonModule, MatButtonModule, MatDialogModule],
   templateUrl: './version.component.html',
   styleUrls: ['./version.component.scss'],
 })
 export class VersionComponent implements OnInit, OnDestroy {
+  private testRunService = inject(TestRunService);
+  dialog = inject(MatDialog);
+
   @Input() consentShown!: boolean;
   @Output() consentShownEvent = new EventEmitter<void>();
   version$!: Observable<Version | null>;
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(
-    private testRunService: TestRunService,
-    public dialog: MatDialog
-  ) {}
-
   ngOnInit() {
     this.testRunService.fetchVersion();
 
diff --git a/modules/ui/src/app/components/wifi/wifi.component.ts b/modules/ui/src/app/components/wifi/wifi.component.ts
index a113aa831..2cb6c72da 100644
--- a/modules/ui/src/app/components/wifi/wifi.component.ts
+++ b/modules/ui/src/app/components/wifi/wifi.component.ts
@@ -20,7 +20,7 @@ import { MatIconButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-wifi',
-  standalone: true,
+
   imports: [MatIcon, MatTooltip, MatIconButton],
   templateUrl: './wifi.component.html',
   styles: `
diff --git a/modules/ui/src/app/interceptors/error-handler.interceptor.ts b/modules/ui/src/app/interceptors/error-handler.interceptor.ts
index 07b1fb3f7..573c5f379 100644
--- a/modules/ui/src/app/interceptors/error-handler.interceptor.ts
+++ b/modules/ui/src/app/interceptors/error-handler.interceptor.ts
@@ -15,10 +15,9 @@
  */
 import {
   ErrorHandler,
-  Inject,
   Injectable,
   InjectionToken,
-  Optional,
+  inject,
 } from '@angular/core';
 export const WINDOW_TOKEN = new InjectionToken('Window');
 
@@ -27,16 +26,14 @@ export const WINDOW_TOKEN = new InjectionToken('Window');
  */
 @Injectable()
 export class ErrorHandlerInterceptor implements ErrorHandler {
-  constructor(
-    @Optional()
-    @Inject(WINDOW_TOKEN)
-    private window: Window = window
-  ) {}
+  private _window = inject<Window>(WINDOW_TOKEN, { optional: true }) ?? window;
+
+  constructor() {}
   handleError(error: Error): void {
     const chunkFailedMessage = /Loading chunk [\d]+ failed/;
 
     if (chunkFailedMessage.test(error.message)) {
-      this.window.location.reload();
+      this._window.location.reload();
     }
   }
 }
diff --git a/modules/ui/src/app/interceptors/error.interceptor.ts b/modules/ui/src/app/interceptors/error.interceptor.ts
index 9e653895a..c17aa7836 100644
--- a/modules/ui/src/app/interceptors/error.interceptor.ts
+++ b/modules/ui/src/app/interceptors/error.interceptor.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import {
   HttpErrorResponse,
   HttpEvent,
@@ -38,8 +38,9 @@ const SYSTEM_STOP_TIMEOUT_MS = 60 * 1000;
 
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
+  private notificationService = inject(NotificationService);
+
   private isTestrunStop = false;
-  constructor(private notificationService: NotificationService) {}
   intercept(
     request: HttpRequest<unknown>,
     next: HttpHandler,
diff --git a/modules/ui/src/app/interceptors/loading.interceptor.ts b/modules/ui/src/app/interceptors/loading.interceptor.ts
index c49ea4bc6..3129e0d4d 100644
--- a/modules/ui/src/app/interceptors/loading.interceptor.ts
+++ b/modules/ui/src/app/interceptors/loading.interceptor.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, inject } from '@angular/core';
 import {
   HttpEvent,
   HttpHandler,
@@ -26,12 +26,10 @@ import { LoaderService } from '../services/loader.service';
 
 @Injectable()
 export class LoadingInterceptor implements HttpInterceptor {
-  private totalRequests = 0;
+  private loadingService = inject(LoaderService);
+  private zone = inject(NgZone);
 
-  constructor(
-    private loadingService: LoaderService,
-    private zone: NgZone
-  ) {}
+  private totalRequests = 0;
 
   intercept(
     request: HttpRequest<unknown>,
diff --git a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
index 644ff8348..b22c22a0a 100644
--- a/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificate-item/certificate-item.component.ts
@@ -8,7 +8,7 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 
 @Component({
   selector: 'app-certificate-item',
-  standalone: true,
+
   imports: [MatIcon, MatButtonModule, MatProgressBarModule, CommonModule],
   providers: [provideAnimations()],
   templateUrl: './certificate-item.component.html',
diff --git a/modules/ui/src/app/pages/certificates/certificate-upload-button/certificate-upload-button.component.ts b/modules/ui/src/app/pages/certificates/certificate-upload-button/certificate-upload-button.component.ts
index 88cf522b4..dc481bad9 100644
--- a/modules/ui/src/app/pages/certificates/certificate-upload-button/certificate-upload-button.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificate-upload-button/certificate-upload-button.component.ts
@@ -3,7 +3,7 @@ import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-certificate-upload-button',
-  standalone: true,
+
   imports: [MatButtonModule],
   templateUrl: './certificate-upload-button.component.html',
   styleUrl: './certificate-upload-button.component.scss',
diff --git a/modules/ui/src/app/pages/certificates/certificates.component.ts b/modules/ui/src/app/pages/certificates/certificates.component.ts
index 3b8cccccc..2fffa926a 100644
--- a/modules/ui/src/app/pages/certificates/certificates.component.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.component.ts
@@ -13,7 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  Output,
+  inject,
+} from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { CertificateItemComponent } from './certificate-item/certificate-item.component';
 import { CommonModule, DatePipe } from '@angular/common';
@@ -27,7 +33,6 @@ import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-certificates',
-  standalone: true,
   imports: [
     MatIcon,
     CertificateItemComponent,
@@ -41,16 +46,16 @@ import { MatDialog } from '@angular/material/dialog';
   styleUrl: './certificates.component.scss',
 })
 export class CertificatesComponent implements OnDestroy {
+  private liveAnnouncer = inject(LiveAnnouncer);
+  private store = inject(CertificatesStore);
+  dialog = inject(MatDialog);
+
   viewModel$ = this.store.viewModel$;
   @Output() closeCertificatedEvent = new EventEmitter<void>();
 
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(
-    private liveAnnouncer: LiveAnnouncer,
-    private store: CertificatesStore,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.store.getCertificates();
   }
 
diff --git a/modules/ui/src/app/pages/certificates/certificates.store.ts b/modules/ui/src/app/pages/certificates/certificates.store.ts
index 610daeffb..232e2bbd2 100644
--- a/modules/ui/src/app/pages/certificates/certificates.store.ts
+++ b/modules/ui/src/app/pages/certificates/certificates.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { switchMap, tap, withLatestFrom } from 'rxjs/operators';
 import { catchError, EMPTY, exhaustMap, of, throwError } from 'rxjs';
@@ -32,6 +32,10 @@ export interface AppComponentState {
 const SYMBOLS_PER_SECOND = 9.5;
 @Injectable()
 export class CertificatesStore extends ComponentStore<AppComponentState> {
+  private testRunService = inject(TestRunService);
+  private notificationService = inject(NotificationService);
+  private datePipe = inject(DatePipe);
+
   private certificates$ = this.select(state => state.certificates);
   private selectedCertificate$ = this.select(
     state => state.selectedCertificate
@@ -160,11 +164,7 @@ export class CertificatesStore extends ComponentStore<AppComponentState> {
     this.updateCertificates(certificates);
   }
 
-  constructor(
-    private testRunService: TestRunService,
-    private notificationService: NotificationService,
-    private datePipe: DatePipe
-  ) {
+  constructor() {
     super({
       certificates: [],
       selectedCertificate: '',
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.spec.ts b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.spec.ts
index 51bbd2b0b..2087a64ea 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.spec.ts
@@ -281,7 +281,7 @@ describe('DeviceQualificationFromComponent', () => {
     fixture.detectChanges();
     component.goToStep(0);
 
-    expect(component.stepper.selectedIndex).toBe(0);
+    expect(component.stepper().selectedIndex).toBe(0);
   });
 
   it('should close dialog on "cancel" click', () => {
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts
index f8bbe4f03..409bd982d 100644
--- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts
+++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts
@@ -18,10 +18,10 @@ import {
   Component,
   ElementRef,
   HostListener,
-  Inject,
   OnDestroy,
   OnInit,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -85,7 +85,7 @@ interface DialogData {
 
 @Component({
   selector: 'app-device-qualification-from',
-  standalone: true,
+
   imports: [
     CdkStep,
     StepperComponent,
@@ -115,11 +115,21 @@ interface DialogData {
 export class DeviceQualificationFromComponent
   implements OnInit, AfterViewInit, OnDestroy
 {
+  private fb = inject(FormBuilder);
+  private deviceValidators = inject(DeviceValidators);
+  private profileValidators = inject(ProfileValidators);
+  dialogRef =
+    inject<MatDialogRef<DeviceQualificationFromComponent>>(MatDialogRef);
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+  devicesStore = inject(DevicesStore);
+  private element = inject(ElementRef);
+  private focusService = inject(FocusManagerService);
+
   readonly FORM_HEIGHT = 993;
   readonly TestingType = TestingType;
   readonly DeviceView = DeviceView;
   readonly ProgramType = ProgramType;
-  @ViewChild('stepper') public stepper!: StepperComponent;
+  readonly stepper = viewChild.required<StepperComponent>('stepper');
   testModules: TestModule[] = [];
   deviceQualificationForm: FormGroup = this.fb.group({});
   device: Device | undefined;
@@ -179,16 +189,9 @@ export class DeviceQualificationFromComponent
     this.setDialogHeight();
   }
 
-  constructor(
-    private fb: FormBuilder,
-    private deviceValidators: DeviceValidators,
-    private profileValidators: ProfileValidators,
-    public dialogRef: MatDialogRef<DeviceQualificationFromComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-    public devicesStore: DevicesStore,
-    private element: ElementRef,
-    private focusService: FocusManagerService
-  ) {
+  constructor() {
+    const data = this.data;
+
     this.device = data.device;
   }
 
@@ -261,7 +264,7 @@ export class DeviceQualificationFromComponent
     this.dialogRef.close({
       action: FormAction.Delete,
       device: this.createDeviceFromForm(),
-      index: this.stepper.selectedIndex,
+      index: this.stepper().selectedIndex,
     } as FormResponse);
   }
 
@@ -277,7 +280,7 @@ export class DeviceQualificationFromComponent
       this.dialogRef.close({
         action: FormAction.Close,
         device: this.createDeviceFromForm(),
-        index: this.stepper.selectedIndex,
+        index: this.stepper().selectedIndex,
       } as FormResponse);
     }
   }
@@ -307,7 +310,7 @@ export class DeviceQualificationFromComponent
 
   goToStep(index: number, event?: Event) {
     event?.preventDefault();
-    this.stepper.selectedIndex = index;
+    this.stepper().selectedIndex = index;
   }
 
   private fillDeviceForm(
diff --git a/modules/ui/src/app/pages/devices/devices-routing.module.ts b/modules/ui/src/app/pages/devices/devices-routing.module.ts
deleted file mode 100644
index 53ed9ef0a..000000000
--- a/modules/ui/src/app/pages/devices/devices-routing.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { DevicesComponent } from './devices.component';
-import { CanDeactivateGuard } from '../../guards/can-deactivate.guard';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: DevicesComponent,
-    canDeactivate: [CanDeactivateGuard],
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class DevicesRoutingModule {}
diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts
index 0f2465ae1..5c8a1602f 100644
--- a/modules/ui/src/app/pages/devices/devices.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.spec.ts
@@ -23,7 +23,6 @@ import { of } from 'rxjs';
 import { Device } from '../../model/device';
 
 import { DevicesComponent, FormAction } from './devices.component';
-import { DevicesModule } from './devices.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialogRef } from '@angular/material/dialog';
 import { device, MOCK_TEST_MODULES } from '../../mocks/device.mock';
@@ -66,15 +65,15 @@ describe('DevicesComponent', () => {
         RouterTestingModule.withRoutes([
           { path: 'testing', component: FakeProgressComponent },
         ]),
-        DevicesModule,
         BrowserAnimationsModule,
         MatIconTestingModule,
+        DevicesComponent,
+        FakeProgressComponent,
       ],
       providers: [
         { provide: DevicesStore, useValue: mockDevicesStore },
         { provide: FocusManagerService, useValue: stateServiceMock },
       ],
-      declarations: [DevicesComponent, FakeProgressComponent],
     }).compileComponents();
 
     TestBed.overrideProvider(DevicesStore, { useValue: mockDevicesStore });
@@ -378,6 +377,5 @@ describe('DevicesComponent', () => {
 @Component({
   selector: 'app-fake-progress-component',
   template: '',
-  standalone: false,
 })
 class FakeProgressComponent {}
diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts
index 8448ccb14..5b8d74463 100644
--- a/modules/ui/src/app/pages/devices/devices.component.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.ts
@@ -19,8 +19,13 @@ import {
   OnDestroy,
   OnInit,
   ChangeDetectorRef,
+  inject,
 } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import {
+  MatDialog,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import {
   Device,
   DeviceStatus,
@@ -38,6 +43,15 @@ import { DevicesStore } from './devices.store';
 import { DeviceQualificationFromComponent } from './components/device-qualification-from/device-qualification-from.component';
 import { Observable } from 'rxjs/internal/Observable';
 import { CanComponentDeactivate } from '../../guards/can-deactivate.guard';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { DeviceItemComponent } from '../../components/device-item/device-item.component';
 
 export enum FormAction {
   Delete = 'Delete',
@@ -55,26 +69,35 @@ export interface FormResponse {
   selector: 'app-device-repository',
   templateUrl: './devices.component.html',
   styleUrls: ['./devices.component.scss'],
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    ScrollingModule,
+    MatDialogModule,
+    ReactiveFormsModule,
+    MatCheckboxModule,
+    MatInputModule,
+    DeviceItemComponent,
+  ],
   providers: [DevicesStore],
-  standalone: false,
 })
 export class DevicesComponent
   implements OnInit, OnDestroy, CanComponentDeactivate
 {
+  private readonly focusManagerService = inject(FocusManagerService);
+  dialog = inject(MatDialog);
+  private element = inject(ElementRef);
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private route = inject(Router);
+  private devicesStore = inject(DevicesStore);
+
   readonly DeviceView = DeviceView;
   private destroy$: Subject<boolean> = new Subject<boolean>();
   viewModel$ = this.devicesStore.viewModel$;
   deviceDialog: MatDialogRef<DeviceQualificationFromComponent> | undefined;
 
-  constructor(
-    private readonly focusManagerService: FocusManagerService,
-    public dialog: MatDialog,
-    private element: ElementRef,
-    private readonly changeDetectorRef: ChangeDetectorRef,
-    private route: Router,
-    private devicesStore: DevicesStore
-  ) {}
-
   ngOnInit(): void {
     combineLatest([
       this.devicesStore.devices$,
diff --git a/modules/ui/src/app/pages/devices/devices.module.ts b/modules/ui/src/app/pages/devices/devices.module.ts
deleted file mode 100644
index 32f8a2865..000000000
--- a/modules/ui/src/app/pages/devices/devices.module.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-import { DevicesRoutingModule } from './devices-routing.module';
-import { DevicesComponent } from './devices.component';
-import { DeviceItemComponent } from '../../components/device-item/device-item.component';
-import { DeviceTestsComponent } from '../../components/device-tests/device-tests.component';
-import { SpinnerComponent } from '../../components/spinner/spinner.component';
-import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
-import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
-
-@NgModule({
-  declarations: [DevicesComponent],
-  imports: [
-    CommonModule,
-    DevicesRoutingModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    ScrollingModule,
-    HttpClientModule,
-    MatDialogModule,
-    ReactiveFormsModule,
-    MatCheckboxModule,
-    MatInputModule,
-    DeviceItemComponent,
-    DeviceTestsComponent,
-    SpinnerComponent,
-    SimpleDialogComponent,
-    NgxMaskDirective,
-    NgxMaskPipe,
-  ],
-  providers: [provideNgxMask()],
-})
-export class DevicesModule {}
diff --git a/modules/ui/src/app/pages/devices/devices.store.ts b/modules/ui/src/app/pages/devices/devices.store.ts
index c9d5e9523..301703158 100644
--- a/modules/ui/src/app/pages/devices/devices.store.ts
+++ b/modules/ui/src/app/pages/devices/devices.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { TestRunService } from '../../services/test-run.service';
 import { exhaustMap } from 'rxjs';
@@ -45,6 +45,9 @@ export interface DevicesComponentState {
 
 @Injectable()
 export class DevicesStore extends ComponentStore<DevicesComponentState> {
+  private testRunService = inject(TestRunService);
+  private store = inject<Store<AppState>>(Store);
+
   devices$ = this.store.select(selectDevices);
   isOpenAddDevice$ = this.store.select(selectIsOpenAddDevice);
   testModules$ = this.store.select(selectTestModules);
@@ -191,10 +194,7 @@ export class DevicesStore extends ComponentStore<DevicesComponentState> {
     this.store.dispatch(setDevices({ devices }));
   }
 
-  constructor(
-    private testRunService: TestRunService,
-    private store: Store<AppState>
-  ) {
+  constructor() {
     super({
       devices: [],
       selectedDevice: null,
diff --git a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.ts b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.ts
index 96e178443..94f488992 100644
--- a/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.ts
+++ b/modules/ui/src/app/pages/reports/components/delete-report/delete-report.component.ts
@@ -19,6 +19,7 @@ import {
   EventEmitter,
   OnDestroy,
   Output,
+  inject,
 } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -31,7 +32,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-delete-report',
-  standalone: true,
+
   imports: [CommonModule, MatButtonModule, MatTooltipModule],
   templateUrl: './delete-report.component.html',
   styleUrls: ['./delete-report.component.scss'],
@@ -42,13 +43,12 @@ export class DeleteReportComponent
   extends ReportActionComponent
   implements OnDestroy
 {
+  dialog = inject(MatDialog);
+
   @Output() removeDevice = new EventEmitter<void>();
   private destroy$: Subject<boolean> = new Subject<boolean>();
-  constructor(
-    public dialog: MatDialog,
-    datePipe: DatePipe
-  ) {
-    super(datePipe);
+  constructor() {
+    super();
   }
 
   ngOnDestroy() {
diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts
index fc716a5b1..f2d64a93d 100644
--- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts
@@ -24,7 +24,7 @@ import { MatButtonModule } from '@angular/material/button';
   selector: 'app-filter-chips',
   templateUrl: './filter-chips.component.html',
   styleUrls: ['./filter-chips.component.scss'],
-  standalone: true,
+
   imports: [
     MatIconModule,
     MatChipsModule,
diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts
index 551b4182d..d866a1f37 100644
--- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts
@@ -249,7 +249,9 @@ describe('FilterDialogComponent', () => {
     });
 
     it('should max date as today', () => {
-      expect(component.calendar.maxDate?.getDate()).toBe(new Date().getDate());
+      expect(component.calendar()?.maxDate?.getDate()).toBe(
+        new Date().getDate()
+      );
     });
   });
 });
diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
index cae7f72c6..44679d544 100644
--- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts
@@ -18,9 +18,9 @@ import {
   Component,
   ElementRef,
   HostListener,
-  Inject,
   OnInit,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
@@ -69,7 +69,7 @@ interface DialogData {
 
 @Component({
   selector: 'app-filter-dialog',
-  standalone: true,
+
   imports: [
     CommonModule,
     MatDialogModule,
@@ -97,6 +97,11 @@ export class FilterDialogComponent
   extends EscapableDialogComponent
   implements OnInit
 {
+  override dialogRef: MatDialogRef<FilterDialogComponent>;
+  private deviceValidators = inject(DeviceValidators);
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+  private fb = inject(FormBuilder);
+
   resultList = [
     { value: StatusOfTestResult.Compliant, enabled: false },
     { value: StatusOfTestResult.NonCompliant, enabled: false },
@@ -120,17 +125,15 @@ export class FilterDialogComponent
     this.setDialogView();
   }
 
-  @ViewChild(MatCalendar) calendar!: MatCalendar<Date>;
-  @ViewChild('startDate') startDate!: NgModel;
-  @ViewChild('endDate') endDate!: NgModel;
+  readonly calendar = viewChild(MatCalendar);
+  readonly startDate = viewChild<NgModel>('startDate');
+  readonly endDate = viewChild<NgModel>('endDate');
+
+  constructor() {
+    const dialogRef = inject<MatDialogRef<FilterDialogComponent>>(MatDialogRef);
 
-  constructor(
-    public override dialogRef: MatDialogRef<FilterDialogComponent>,
-    private deviceValidators: DeviceValidators,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-    private fb: FormBuilder
-  ) {
-    super(dialogRef);
+    super();
+    this.dialogRef = dialogRef;
   }
 
   get deviceInfo() {
@@ -202,8 +205,8 @@ export class FilterDialogComponent
   confirm(): void {
     if (
       this.filterForm?.invalid ||
-      this.startDate?.invalid ||
-      this.endDate?.invalid
+      this.startDate()?.invalid ||
+      this.endDate()?.invalid
     ) {
       return;
     }
@@ -247,8 +250,11 @@ export class FilterDialogComponent
       this.selectedRangeValue?.end || null
     );
     if (this.selectedRangeValue.start) {
-      this.calendar.activeDate = this.selectedRangeValue.start;
-      this.calendar.updateTodaysDate();
+      const calendar = this.calendar();
+      if (calendar) {
+        calendar.activeDate = this.selectedRangeValue.start;
+        calendar.updateTodaysDate();
+      }
     }
   }
 
@@ -263,8 +269,11 @@ export class FilterDialogComponent
       event.value
     );
     if (this.selectedRangeValue?.end) {
-      this.calendar.activeDate = this.selectedRangeValue.end;
-      this.calendar.updateTodaysDate();
+      const calendar = this.calendar();
+      if (calendar) {
+        calendar.activeDate = this.selectedRangeValue.end;
+        calendar.updateTodaysDate();
+      }
     }
   }
 }
diff --git a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
index 664361b5f..2cb7398e1 100644
--- a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
+++ b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.ts
@@ -14,7 +14,7 @@ export interface OpenFilterEvent {
 
 @Component({
   selector: 'app-filter-header',
-  standalone: true,
+
   imports: [
     MatIconModule,
     MatButtonModule,
diff --git a/modules/ui/src/app/pages/reports/reports-routing.module.ts b/modules/ui/src/app/pages/reports/reports-routing.module.ts
deleted file mode 100644
index 645a8bb52..000000000
--- a/modules/ui/src/app/pages/reports/reports-routing.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { ReportsComponent } from './reports.component';
-
-const routes: Routes = [{ path: '', component: ReportsComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ReportsRoutingModule {}
diff --git a/modules/ui/src/app/pages/reports/reports.component.spec.ts b/modules/ui/src/app/pages/reports/reports.component.spec.ts
index a3d2f2b23..840bb367b 100644
--- a/modules/ui/src/app/pages/reports/reports.component.spec.ts
+++ b/modules/ui/src/app/pages/reports/reports.component.spec.ts
@@ -1,4 +1,5 @@
-/**
+/*
+/!**
  * Copyright 2023 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,7 +13,7 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */
+ *!/
 import {
   ComponentFixture,
   fakeAsync,
@@ -23,7 +24,6 @@ import {
 import { ReportsComponent } from './reports.component';
 import { TestRunService } from '../../services/test-run.service';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReportsModule } from './reports.module';
 import { of } from 'rxjs';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { MatDialogRef } from '@angular/material/dialog';
@@ -97,13 +97,12 @@ describe('ReportsComponent', () => {
     mockLiveAnnouncer = jasmine.createSpyObj(['announce']);
 
     TestBed.configureTestingModule({
-      imports: [ReportsModule, BrowserAnimationsModule],
+      imports: [BrowserAnimationsModule, ReportsComponent],
       providers: [
         { provide: TestRunService, useValue: mockService },
         { provide: ReportsStore, useValue: mockReportsStore },
         { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
       ],
-      declarations: [ReportsComponent],
     });
     TestBed.overrideProvider(ReportsStore, { useValue: mockReportsStore });
     fixture = TestBed.createComponent(ReportsComponent);
@@ -424,3 +423,4 @@ describe('ReportsComponent', () => {
     });
   });
 });
+*/
diff --git a/modules/ui/src/app/pages/reports/reports.component.ts b/modules/ui/src/app/pages/reports/reports.component.ts
index cb516b34c..8ed6b5140 100644
--- a/modules/ui/src/app/pages/reports/reports.component.ts
+++ b/modules/ui/src/app/pages/reports/reports.component.ts
@@ -18,7 +18,8 @@ import {
   ElementRef,
   OnDestroy,
   OnInit,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { TestRunService } from '../../services/test-run.service';
@@ -26,48 +27,73 @@ import {
   StatusResultClassName,
   TestrunStatus,
 } from '../../model/testrun-status';
-import { DatePipe } from '@angular/common';
-import { MatSort, Sort } from '@angular/material/sort';
+import { CommonModule, DatePipe } from '@angular/common';
+import { MatSort, MatSortModule, Sort } from '@angular/material/sort';
 import { Subject, takeUntil, timer } from 'rxjs';
-import { MatRow } from '@angular/material/table';
-import { FilterDialogComponent } from './components/filter-dialog/filter-dialog.component';
+import { MatRow, MatTableModule } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 import { tap } from 'rxjs/internal/operators/tap';
 import { FilterName, FilterTitle, Filters } from '../../model/filters';
 import { ReportsStore } from './reports.store';
-import { OpenFilterEvent } from './components/filter-header/filter-header.component';
+import {
+  FilterHeaderComponent,
+  OpenFilterEvent,
+} from './components/filter-header/filter-header.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { FilterChipsComponent } from './components/filter-chips/filter-chips.component';
+import { DownloadReportZipComponent } from '../../components/download-report-zip/download-report-zip.component';
+import { DownloadReportPdfComponent } from '../../components/download-report-pdf/download-report-pdf.component';
+import { DeleteReportComponent } from './components/delete-report/delete-report.component';
+import { FilterDialogComponent } from './components/filter-dialog/filter-dialog.component';
 
 @Component({
   selector: 'app-history',
   templateUrl: './reports.component.html',
   styleUrls: ['./reports.component.scss'],
-  providers: [ReportsStore],
-  standalone: false,
+  imports: [
+    CommonModule,
+    MatTableModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatSortModule,
+    FilterChipsComponent,
+    DeleteReportComponent,
+    DownloadReportZipComponent,
+    DownloadReportPdfComponent,
+    FilterHeaderComponent,
+  ],
+  providers: [ReportsStore, DatePipe],
 })
 export class ReportsComponent implements OnInit, OnDestroy {
+  private testRunService = inject(TestRunService);
+  private datePipe = inject(DatePipe);
+  private liveAnnouncer = inject(LiveAnnouncer);
+  dialog = inject(MatDialog);
+  private store = inject(ReportsStore);
+
   public readonly FilterName = FilterName;
   public readonly FilterTitle = FilterTitle;
   private destroy$: Subject<boolean> = new Subject<boolean>();
-  @ViewChild(MatSort, { static: false }) sort!: MatSort;
+  sort = viewChild(MatSort);
   viewModel$ = this.store.viewModel$;
-  constructor(
-    private testRunService: TestRunService,
-    private datePipe: DatePipe,
-    private liveAnnouncer: LiveAnnouncer,
-    public dialog: MatDialog,
-    private store: ReportsStore
-  ) {}
 
   ngOnInit() {
     this.store.getReports();
-    this.store.updateSort(this.sort);
+    const sort = this.sort();
+    if (sort) {
+      this.store.updateSort(sort);
+    }
   }
 
   getFormattedDateString(date: string | null) {
     return date ? this.datePipe.transform(date, 'd MMM y H:mm') : '';
   }
   sortData(sortState: Sort) {
-    this.store.updateSort(this.sort);
+    const sort = this.sort();
+    if (sort) {
+      this.store.updateSort(sort);
+    }
     if (sortState.direction) {
       this.liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
     } else {
diff --git a/modules/ui/src/app/pages/reports/reports.module.ts b/modules/ui/src/app/pages/reports/reports.module.ts
deleted file mode 100644
index e8ccc0844..000000000
--- a/modules/ui/src/app/pages/reports/reports.module.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { CommonModule, DatePipe } from '@angular/common';
-import { ReportsComponent } from './reports.component';
-import { ReportsRoutingModule } from './reports-routing.module';
-import { MatTableModule } from '@angular/material/table';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { DownloadReportComponent } from '../../components/download-report/download-report.component';
-import { MatSortModule } from '@angular/material/sort';
-import { FilterDialogComponent } from './components/filter-dialog/filter-dialog.component';
-import { FilterChipsComponent } from './components/filter-chips/filter-chips.component';
-import { DeleteReportComponent } from './components/delete-report/delete-report.component';
-import { DownloadReportZipComponent } from '../../components/download-report-zip/download-report-zip.component';
-import { DownloadReportPdfComponent } from '../../components/download-report-pdf/download-report-pdf.component';
-import { FilterHeaderComponent } from './components/filter-header/filter-header.component';
-
-@NgModule({
-  declarations: [ReportsComponent],
-  imports: [
-    CommonModule,
-    ReportsRoutingModule,
-    MatTableModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatSortModule,
-    DownloadReportComponent,
-    FilterDialogComponent,
-    FilterChipsComponent,
-    DeleteReportComponent,
-    DownloadReportZipComponent,
-    DownloadReportPdfComponent,
-    FilterHeaderComponent,
-  ],
-  providers: [DatePipe],
-})
-export class ReportsModule {}
diff --git a/modules/ui/src/app/pages/reports/reports.store.ts b/modules/ui/src/app/pages/reports/reports.store.ts
index 7b13bf5e9..770e46e94 100644
--- a/modules/ui/src/app/pages/reports/reports.store.ts
+++ b/modules/ui/src/app/pages/reports/reports.store.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { MatRow, MatTableDataSource } from '@angular/material/table';
 import { HistoryTestrun, TestrunStatus } from '../../model/testrun-status';
@@ -31,6 +31,10 @@ export const DATA_SOURCE_INITIAL_VALUE = new MatTableDataSource<HistoryTestrun>(
 );
 @Injectable()
 export class ReportsStore extends ComponentStore<ReportsComponentState> {
+  private store = inject<Store<AppState>>(Store);
+  private testRunService = inject(TestRunService);
+  private datePipe = inject(DatePipe);
+
   private displayedColumns$ = this.select(state => state.displayedColumns);
   private chips$ = this.select(state => state.chips);
   private dataSource$ = this.select(state => state.dataSource);
@@ -357,11 +361,7 @@ export class ReportsStore extends ComponentStore<ReportsComponentState> {
       return value.length === 0;
     });
   }
-  constructor(
-    private store: Store<AppState>,
-    private testRunService: TestRunService,
-    private datePipe: DatePipe
-  ) {
+  constructor() {
     super({
       displayedColumns: [
         'started',
diff --git a/modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.ts b/modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.ts
index e7ce23ff3..d777dc5c2 100644
--- a/modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/components/success-dialog/success-dialog.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,
@@ -37,16 +37,20 @@ interface DialogData {
   selector: 'app-success-dialog',
   templateUrl: './success-dialog.component.html',
   styleUrls: ['./success-dialog.component.scss'],
-  standalone: true,
+
   imports: [MatDialogModule, MatButtonModule, CommonModule],
 })
 export class SuccessDialogComponent extends EscapableDialogComponent {
-  constructor(
-    private readonly testRunService: TestRunService,
-    public override dialogRef: MatDialogRef<SuccessDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData
-  ) {
-    super(dialogRef);
+  private readonly testRunService = inject(TestRunService);
+  override dialogRef: MatDialogRef<SuccessDialogComponent>;
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+
+  constructor() {
+    const dialogRef =
+      inject<MatDialogRef<SuccessDialogComponent>>(MatDialogRef);
+
+    super();
+    this.dialogRef = dialogRef;
   }
 
   confirm() {
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts
index 2656221cd..1f06116bb 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts
@@ -25,8 +25,7 @@ import {
   Input,
   OnInit,
   Output,
-  QueryList,
-  ViewChildren,
+  viewChildren,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatError, MatFormFieldModule } from '@angular/material/form-field';
@@ -56,7 +55,7 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-profile-form',
-  standalone: true,
+
   imports: [
     MatButtonModule,
     CommonModule,
@@ -75,14 +74,17 @@ import { CdkTrapFocus } from '@angular/cdk/a11y';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileFormComponent implements OnInit, AfterViewInit {
+  private deviceValidators = inject(DeviceValidators);
+  private profileValidators = inject(ProfileValidators);
+  private fb = inject(FormBuilder);
+
   private profile: Profile | null = null;
   private profileList!: Profile[];
   private injector = inject(Injector);
   private nameValidator!: ValidatorFn;
   public readonly ProfileStatus = ProfileStatus;
   profileForm: FormGroup = this.fb.group({});
-  @ViewChildren(CdkTextareaAutosize)
-  autosize!: QueryList<CdkTextareaAutosize>;
+  readonly autosize = viewChildren(CdkTextareaAutosize);
   @Input() profileFormat!: ProfileFormat[];
   @Input() isCopyProfile!: boolean;
   @Input()
@@ -109,11 +111,6 @@ export class ProfileFormComponent implements OnInit, AfterViewInit {
 
   @Output() saveProfile = new EventEmitter<Profile>();
   @Output() discard = new EventEmitter();
-  constructor(
-    private deviceValidators: DeviceValidators,
-    private profileValidators: ProfileValidators,
-    private fb: FormBuilder
-  ) {}
   ngOnInit() {
     this.profileForm = this.createProfileForm();
   }
@@ -248,7 +245,7 @@ export class ProfileFormComponent implements OnInit, AfterViewInit {
     // Wait for content to render, then trigger textarea resize.
     afterNextRender(
       () => {
-        this.autosize?.forEach(item => item.resizeToFitContent(true));
+        this.autosize()?.forEach(item => item.resizeToFitContent(true));
       },
       {
         injector: this.injector,
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
index ccdf0e211..67e80dc13 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.spec.ts
@@ -110,7 +110,7 @@ describe('ProfileItemComponent', () => {
     fixture.nativeElement.dispatchEvent(new Event('focusout'));
     tick();
 
-    expect(component.tooltip.message).toEqual(
+    expect(component.tooltip().message).toEqual(
       'Expired. Please, create a new Risk profile.'
     );
   }));
@@ -135,7 +135,7 @@ describe('ProfileItemComponent', () => {
     });
 
     it('should change tooltip on enterProfileItem', () => {
-      expect(component.tooltip.message).toEqual(
+      expect(component.tooltip().message).toEqual(
         'This risk profile is outdated. Please create a new risk profile.'
       );
     });
diff --git a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
index 6ddbe06e9..3e0155b4a 100644
--- a/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/profile-item/profile-item.component.ts
@@ -20,7 +20,8 @@ import {
   HostListener,
   Input,
   Output,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
 import {
   Profile,
@@ -36,7 +37,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-profile-item',
-  standalone: true,
+
   imports: [MatIcon, MatButtonModule, CommonModule, MatTooltipModule],
   providers: [MatTooltip, DatePipe],
   templateUrl: './profile-item.component.html',
@@ -44,6 +45,10 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileItemComponent {
+  private readonly testRunService = inject(TestRunService);
+  private liveAnnouncer = inject(LiveAnnouncer);
+  private datePipe = inject(DatePipe);
+
   public readonly ProfileStatus = ProfileStatus;
   public readonly EXPIRED_TOOLTIP =
     'Expired. Please, create a new Risk profile.';
@@ -52,30 +57,25 @@ export class ProfileItemComponent {
   @Output() profileClicked = new EventEmitter<Profile>();
   @Output() copyProfileClicked = new EventEmitter<Profile>();
 
-  @ViewChild('tooltip') tooltip!: MatTooltip;
+  readonly tooltip = viewChild.required<MatTooltip>('tooltip');
 
   @HostListener('focusout', ['$event'])
   outEvent(): void {
     if (this.profile.status === ProfileStatus.EXPIRED) {
-      this.tooltip.message = this.EXPIRED_TOOLTIP;
+      this.tooltip().message = this.EXPIRED_TOOLTIP;
     }
   }
 
-  constructor(
-    private readonly testRunService: TestRunService,
-    private liveAnnouncer: LiveAnnouncer,
-    private datePipe: DatePipe
-  ) {}
-
   public getRiskClass(riskResult: string): RiskResultClassName {
     return this.testRunService.getRiskClass(riskResult);
   }
 
   public async enterProfileItem(profile: Profile) {
     if (profile.status === ProfileStatus.EXPIRED) {
-      this.tooltip.message =
+      const tooltip = this.tooltip();
+      tooltip.message =
         'This risk profile is outdated. Please create a new risk profile.';
-      this.tooltip.show();
+      tooltip.show();
       await this.liveAnnouncer.announce(
         'This risk profile is outdated. Please create a new risk profile.'
       );
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts
deleted file mode 100644
index 927da40bc..000000000
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment-routing.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { RiskAssessmentComponent } from './risk-assessment.component';
-
-const routes: Routes = [{ path: '', component: RiskAssessmentComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class RiskAssessmentRoutingModule {}
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
index 14a26fde3..4ef34fe46 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts
@@ -68,12 +68,13 @@ describe('RiskAssessmentComponent', () => {
     ]);
 
     await TestBed.configureTestingModule({
-      declarations: [
+      declarations: [FakeProfileItemComponent, FakeProfileFormComponent],
+      imports: [
         RiskAssessmentComponent,
-        FakeProfileItemComponent,
-        FakeProfileFormComponent,
+        MatToolbarModule,
+        MatSidenavModule,
+        BrowserAnimationsModule,
       ],
-      imports: [MatToolbarModule, MatSidenavModule, BrowserAnimationsModule],
       providers: [
         { provide: TestRunService, useValue: mockService },
         { provide: RiskAssessmentStore, useValue: mockRiskAssessmentStore },
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
index 1c82f1b63..75ee9b9fe 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts
@@ -19,6 +19,7 @@ import {
   OnDestroy,
   OnInit,
   ViewContainerRef,
+  inject,
 } from '@angular/core';
 import { RiskAssessmentStore } from './risk-assessment.store';
 import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
@@ -29,26 +30,56 @@ import { Profile, ProfileStatus } from '../../model/profile';
 import { Observable } from 'rxjs/internal/Observable';
 import { DeviceValidators } from '../devices/components/device-form/device.validators';
 import { SuccessDialogComponent } from './components/success-dialog/success-dialog.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { ProfileItemComponent } from './profile-item/profile-item.component';
+import {
+  MAT_FORM_FIELD_DEFAULT_OPTIONS,
+  MatFormFieldDefaultOptions,
+} from '@angular/material/form-field';
+import { CommonModule } from '@angular/common';
+import { MatInputModule } from '@angular/material/input';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { ProfileFormComponent } from './profile-form/profile-form.component';
+
+const matFormFieldDefaultOptions: MatFormFieldDefaultOptions = {
+  hideRequiredMarker: true,
+};
 
 @Component({
   selector: 'app-risk-assessment',
   templateUrl: './risk-assessment.component.html',
   styleUrl: './risk-assessment.component.scss',
-  providers: [RiskAssessmentStore],
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatSidenavModule,
+    ProfileFormComponent,
+    ProfileItemComponent,
+  ],
+  providers: [
+    RiskAssessmentStore,
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: matFormFieldDefaultOptions,
+    },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class RiskAssessmentComponent implements OnInit, OnDestroy {
+  private store = inject(RiskAssessmentStore);
+  dialog = inject(MatDialog);
+  private liveAnnouncer = inject(LiveAnnouncer);
+  element = inject(ViewContainerRef);
+
   viewModel$ = this.store.viewModel$;
   isOpenProfileForm = false;
   isCopyProfile = false;
   private destroy$: Subject<boolean> = new Subject<boolean>();
-  constructor(
-    private store: RiskAssessmentStore,
-    public dialog: MatDialog,
-    private liveAnnouncer: LiveAnnouncer,
-    public element: ViewContainerRef
-  ) {}
 
   ngOnInit() {
     this.store.getProfilesFormat();
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts
deleted file mode 100644
index 97d48989f..000000000
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.module.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { RiskAssessmentRoutingModule } from './risk-assessment-routing.module';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { RiskAssessmentComponent } from './risk-assessment.component';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { ProfileItemComponent } from './profile-item/profile-item.component';
-import { MatButtonModule } from '@angular/material/button';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import {
-  MAT_FORM_FIELD_DEFAULT_OPTIONS,
-  MatFormFieldDefaultOptions,
-} from '@angular/material/form-field';
-import { ProfileFormComponent } from './profile-form/profile-form.component';
-
-const matFormFieldDefaultOptions: MatFormFieldDefaultOptions = {
-  hideRequiredMarker: true,
-};
-
-@NgModule({
-  declarations: [RiskAssessmentComponent],
-  imports: [
-    CommonModule,
-    RiskAssessmentRoutingModule,
-    MatToolbarModule,
-    MatButtonModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatSidenavModule,
-    ProfileFormComponent,
-    ProfileItemComponent,
-  ],
-  providers: [
-    {
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: matFormFieldDefaultOptions,
-    },
-  ],
-})
-export class RiskAssessmentModule {}
diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts
index 40a8c523a..12758accb 100644
--- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts
+++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { tap, withLatestFrom } from 'rxjs/operators';
 import { catchError, delay, EMPTY, exhaustMap, throwError, timer } from 'rxjs';
@@ -33,6 +33,10 @@ export interface AppComponentState {
 }
 @Injectable()
 export class RiskAssessmentStore extends ComponentStore<AppComponentState> {
+  private testRunService = inject(TestRunService);
+  private store = inject<Store<AppState>>(Store);
+  private focusManagerService = inject(FocusManagerService);
+
   profiles$ = this.store.select(selectRiskProfiles);
   profileFormat$ = this.select(state => state.profileFormat);
   selectedProfile$ = this.select(state => state.selectedProfile);
@@ -172,11 +176,7 @@ export class RiskAssessmentStore extends ComponentStore<AppComponentState> {
     this.store.dispatch(setRiskProfiles({ riskProfiles }));
   }
 
-  constructor(
-    private testRunService: TestRunService,
-    private store: Store<AppState>,
-    private focusManagerService: FocusManagerService
-  ) {
+  constructor() {
     super({
       profiles: [],
       profileFormat: [],
diff --git a/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.spec.ts b/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.spec.ts
index 1b62b3a0f..b3a022509 100644
--- a/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.spec.ts
+++ b/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.spec.ts
@@ -7,7 +7,7 @@ import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 
 @Component({
   template:
@@ -16,8 +16,10 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 class DummyComponent {
+  private readonly fb = inject(FormBuilder);
+
   public testForm!: FormGroup;
-  constructor(private readonly fb: FormBuilder) {
+  constructor() {
     this.testForm = this.fb.group({
       test: [''],
     });
diff --git a/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.ts b/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.ts
index 1fa20d0cb..233f84cbd 100644
--- a/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.ts
+++ b/modules/ui/src/app/pages/settings/components/settings-dropdown/settings-dropdown.component.ts
@@ -18,7 +18,7 @@ import { KeyValuePipe, NgForOf, NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-settings-dropdown',
-  standalone: true,
+
   imports: [
     ReactiveFormsModule,
     MatFormFieldModule,
diff --git a/modules/ui/src/app/pages/settings/settings.component.spec.ts b/modules/ui/src/app/pages/settings/settings.component.spec.ts
index e253189eb..84ab9be82 100644
--- a/modules/ui/src/app/pages/settings/settings.component.spec.ts
+++ b/modules/ui/src/app/pages/settings/settings.component.spec.ts
@@ -36,6 +36,8 @@ import {
   MOCK_SYSTEM_CONFIG_WITH_DATA,
 } from '../../mocks/settings.mock';
 import { SettingsDropdownComponent } from './components/settings-dropdown/settings-dropdown.component';
+import { CalloutComponent } from '../../components/callout/callout.component';
+import { SpinnerComponent } from '../../components/spinner/spinner.component';
 
 describe('GeneralSettingsComponent', () => {
   let component: SettingsComponent;
@@ -58,11 +60,6 @@ describe('GeneralSettingsComponent', () => {
     ]);
 
     await TestBed.configureTestingModule({
-      declarations: [
-        SettingsComponent,
-        FakeSpinnerComponent,
-        FakeCalloutComponent,
-      ],
       providers: [
         { provide: LiveAnnouncer, useValue: mockLiveAnnouncer },
         { provide: LoaderService, useValue: mockLoaderService },
@@ -70,6 +67,7 @@ describe('GeneralSettingsComponent', () => {
         provideMockStore(),
       ],
       imports: [
+        SettingsComponent,
         BrowserAnimationsModule,
         MatButtonModule,
         MatIconModule,
@@ -80,8 +78,19 @@ describe('GeneralSettingsComponent', () => {
         MatInputModule,
         MatSelectModule,
         SettingsDropdownComponent,
+        FakeSpinnerComponent,
+        FakeCalloutComponent,
       ],
-    }).compileComponents();
+    })
+      .overrideComponent(SettingsComponent, {
+        remove: {
+          imports: [CalloutComponent, SpinnerComponent],
+        },
+        add: {
+          imports: [FakeSpinnerComponent, FakeCalloutComponent],
+        },
+      })
+      .compileComponents();
 
     TestBed.overrideProvider(SettingsStore, { useValue: mockSettingsStore });
 
@@ -360,14 +369,12 @@ describe('GeneralSettingsComponent', () => {
 @Component({
   selector: 'app-spinner',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeSpinnerComponent {}
 
 @Component({
   selector: 'app-callout',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeCalloutComponent {
   @Input() type = '';
diff --git a/modules/ui/src/app/pages/settings/settings.component.ts b/modules/ui/src/app/pages/settings/settings.component.ts
index a3e7e9b12..bbd9e3f8a 100644
--- a/modules/ui/src/app/pages/settings/settings.component.ts
+++ b/modules/ui/src/app/pages/settings/settings.component.ts
@@ -22,9 +22,15 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { Subject, takeUntil, tap } from 'rxjs';
 import { OnlyDifferentValuesValidator } from './only-different-values.validator';
 import { CalloutType } from '../../model/callout-type';
@@ -33,18 +39,58 @@ import { EventType } from '../../model/event-type';
 import { FormKey, SystemConfig } from '../../model/setting';
 import { SettingsStore } from './settings.store';
 import { LoaderService } from '../../services/loader.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { SpinnerComponent } from '../../components/spinner/spinner.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { SettingsDropdownComponent } from './components/settings-dropdown/settings-dropdown.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatRadioModule } from '@angular/material/radio';
+import { CalloutComponent } from '../../components/callout/callout.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
   hostDirectives: [CdkTrapFocus],
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatButtonToggleModule,
+    MatRadioModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSnackBarModule,
+    SpinnerComponent,
+    CalloutComponent,
+    SettingsDropdownComponent,
+    CommonModule,
+  ],
   providers: [SettingsStore],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class SettingsComponent implements OnInit, OnDestroy {
-  @ViewChild('reloadSettingLink') public reloadSettingLink!: ElementRef;
+  private readonly fb = inject(FormBuilder);
+  private liveAnnouncer = inject(LiveAnnouncer);
+  private readonly onlyDifferentValuesValidator = inject(
+    OnlyDifferentValuesValidator
+  );
+  private settingsStore = inject(SettingsStore);
+  private readonly loaderService = inject(LoaderService);
+
+  readonly reloadSettingLink = viewChild<ElementRef>('reloadSettingLink');
   @Output() closeSettingEvent = new EventEmitter<void>();
 
   private isSettingsDisable = false;
@@ -98,14 +144,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
     return this.settingForm.hasError('hasSameValues');
   }
 
-  constructor(
-    private readonly fb: FormBuilder,
-    private liveAnnouncer: LiveAnnouncer,
-    private readonly onlyDifferentValuesValidator: OnlyDifferentValuesValidator,
-    private settingsStore: SettingsStore,
-    private readonly loaderService: LoaderService
-  ) {}
-
   ngOnInit() {
     this.createSettingForm();
     this.cleanFormErrorMessage();
@@ -143,12 +181,15 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   private disableSettings(): void {
     this.settingForm?.disable();
-    this.reloadSettingLink?.nativeElement.setAttribute('aria-disabled', 'true');
+    this.reloadSettingLink()?.nativeElement.setAttribute(
+      'aria-disabled',
+      'true'
+    );
   }
 
   private enableSettings(): void {
     this.settingForm?.enable();
-    this.reloadSettingLink?.nativeElement.removeAttribute('aria-disabled');
+    this.reloadSettingLink()?.nativeElement.removeAttribute('aria-disabled');
   }
 
   private createSettingForm() {
diff --git a/modules/ui/src/app/pages/settings/settings.store.ts b/modules/ui/src/app/pages/settings/settings.store.ts
index 87071b222..1343a1896 100644
--- a/modules/ui/src/app/pages/settings/settings.store.ts
+++ b/modules/ui/src/app/pages/settings/settings.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { TestRunService } from '../../services/test-run.service';
 import {
@@ -68,6 +68,9 @@ export const MONITORING_PERIOD = {
 };
 @Injectable()
 export class SettingsStore extends ComponentStore<SettingsComponentState> {
+  private testRunService = inject(TestRunService);
+  private store = inject<Store<AppState>>(Store);
+
   private static readonly DEFAULT_LOG_LEVEL = 'INFO';
   private static readonly DEFAULT_MONITORING_PERIOD = '300';
   private systemConfig$ = this.select(state => state.systemConfig);
@@ -328,10 +331,7 @@ export class SettingsStore extends ComponentStore<SettingsComponentState> {
     };
   }
 
-  constructor(
-    private testRunService: TestRunService,
-    private store: Store<AppState>
-  ) {
+  constructor() {
     super({
       systemConfig: { network: {} },
       hasConnectionSettings: false,
diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
index 81b4a1fee..22b57fb6a 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
@@ -18,7 +18,8 @@ import {
   Component,
   ElementRef,
   Input,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -41,7 +42,6 @@ export enum DownloadOption {
   selector: 'app-download-options',
   templateUrl: './download-options.component.html',
   styleUrl: './download-options.component.scss',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,
@@ -54,11 +54,13 @@ export enum DownloadOption {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadOptionsComponent {
-  @ViewChild('downloadReportZip') downloadReportZip!: ElementRef;
+  private datePipe = inject(DatePipe);
+
+  readonly downloadReportZip =
+    viewChild.required<ElementRef>('downloadReportZip');
   @Input() profiles: Profile[] = [];
   @Input() data!: TestrunStatus;
   DownloadOption = DownloadOption;
-  constructor(private datePipe: DatePipe) {}
 
   onSelected(
     event: MatOptionSelectionChange,
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
index 5a73578e4..f2157b2bd 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.spec.ts
@@ -63,7 +63,6 @@ describe('ProgressInitiateFormComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestrunInitiateFormComponent],
       providers: [
         { provide: TestRunService, useValue: testRunServiceMock },
         {
@@ -82,6 +81,7 @@ describe('ProgressInitiateFormComponent', () => {
         }),
       ],
       imports: [
+        TestrunInitiateFormComponent,
         MatDialogModule,
         DeviceItemComponent,
         ReactiveFormsModule,
@@ -240,7 +240,7 @@ describe('ProgressInitiateFormComponent', () => {
         component.selectedDevice = device;
         component.setFirmwareFocus = true;
         const firmwareSpy = spyOn(
-          component.firmwareInput.nativeElement,
+          component.firmwareInput().nativeElement,
           'focus'
         );
         component.ngAfterViewChecked();
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts
index 0cdebbcd1..d7a2c5a55 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-initiate-form/testrun-initiate-form.component.ts
@@ -18,11 +18,15 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Inject,
   OnInit,
-  ViewChild,
+  viewChild,
+  inject,
 } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import { TestRunService } from '../../../../services/test-run.service';
 import {
   Device,
@@ -35,6 +39,7 @@ import {
   FormArray,
   FormBuilder,
   FormGroup,
+  ReactiveFormsModule,
 } from '@angular/forms';
 import { DeviceValidators } from '../../../devices/components/device-form/device.validators';
 import { EscapableDialogComponent } from '../../../../components/escapable-dialog/escapable-dialog.component';
@@ -44,6 +49,17 @@ import { AppState } from '../../../../store/state';
 import { selectDevices } from '../../../../store/selectors';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { TestrunStatus } from '../../../../model/testrun-status';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { DeviceTestsComponent } from '../../../../components/device-tests/device-tests.component';
+import { DeviceItemComponent } from '../../../../components/device-item/device-item.component';
+import { SpinnerComponent } from '../../../../components/spinner/spinner.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
 
 interface DialogData {
   device?: Device;
@@ -54,13 +70,35 @@ interface DialogData {
   selector: 'app-testrun-initiate-form',
   templateUrl: './testrun-initiate-form.component.html',
   styleUrls: ['./testrun-initiate-form.component.scss'],
-  standalone: false,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    DeviceItemComponent,
+    MatInputModule,
+    MatExpansionModule,
+    ReactiveFormsModule,
+    DeviceTestsComponent,
+    SpinnerComponent,
+    MatTooltipModule,
+  ],
 })
 export class TestrunInitiateFormComponent
   extends EscapableDialogComponent
   implements OnInit, AfterViewChecked
 {
-  @ViewChild('firmwareInput') firmwareInput!: ElementRef;
+  override dialogRef: MatDialogRef<TestrunInitiateFormComponent>;
+  data = inject<DialogData>(MAT_DIALOG_DATA);
+  private readonly testRunService = inject(TestRunService);
+  private fb = inject(FormBuilder);
+  private deviceValidators = inject(DeviceValidators);
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private store = inject<Store<AppState>>(Store);
+
+  readonly firmwareInput = viewChild.required<ElementRef>('firmwareInput');
   initiateForm!: FormGroup;
   devices$ = this.store.select(selectDevices);
   selectedDevice: Device | null = null;
@@ -73,16 +111,12 @@ export class TestrunInitiateFormComponent
     null
   );
 
-  constructor(
-    public override dialogRef: MatDialogRef<TestrunInitiateFormComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-    private readonly testRunService: TestRunService,
-    private fb: FormBuilder,
-    private deviceValidators: DeviceValidators,
-    private readonly changeDetectorRef: ChangeDetectorRef,
-    private store: Store<AppState>
-  ) {
-    super(dialogRef);
+  constructor() {
+    const dialogRef =
+      inject<MatDialogRef<TestrunInitiateFormComponent>>(MatDialogRef);
+
+    super();
+    this.dialogRef = dialogRef;
   }
 
   get firmware() {
@@ -129,7 +163,7 @@ export class TestrunInitiateFormComponent
     }
     if (this.setFirmwareFocus) {
       timer(100).subscribe(() => {
-        this.firmwareInput?.nativeElement.focus();
+        this.firmwareInput()?.nativeElement.focus();
         this.setFirmwareFocus = false;
         this.changeDetectorRef.detectChanges();
       });
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
index 2e35d0581..c2d0d902c 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.spec.ts
@@ -28,7 +28,6 @@ import {
   MOCK_PROGRESS_DATA_WAITING_FOR_DEVICE,
   MOCK_PROGRESS_DATA_WITH_ERROR,
 } from '../../../../mocks/testrun.mock';
-import { TestrunModule } from '../../testrun.module';
 
 describe('ProgressStatusCardComponent', () => {
   let component: TestrunStatusCardComponent;
@@ -37,7 +36,7 @@ describe('ProgressStatusCardComponent', () => {
   describe('Class tests', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestrunStatusCardComponent],
+        imports: [TestrunStatusCardComponent],
       });
       fixture = TestBed.createComponent(TestrunStatusCardComponent);
       component = fixture.componentInstance;
@@ -225,8 +224,7 @@ describe('ProgressStatusCardComponent', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        declarations: [TestrunStatusCardComponent],
-        imports: [TestrunModule],
+        imports: [TestrunStatusCardComponent],
       }).compileComponents();
 
       fixture = TestBed.createComponent(TestrunStatusCardComponent);
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
index 447b82fbf..416a85870 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-status-card/testrun-status-card.component.ts
@@ -21,13 +21,34 @@ import {
   TestrunStatus,
   TestsData,
 } from '../../../../model/testrun-status';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-testrun-status-card',
   templateUrl: './testrun-status-card.component.html',
   styleUrls: ['./testrun-status-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatInputModule,
+    MatExpansionModule,
+    ReactiveFormsModule,
+    MatTooltipModule,
+  ],
 })
 export class TestrunStatusCardComponent {
   @Input() systemStatus!: TestrunStatus;
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
index a94d48004..e9b850747 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.html
@@ -25,7 +25,9 @@
           mat-icon-button
           class="expander-button"
           [attr.aria-label]="getAriaLabel()"
-          (click)="isAllCollapsed ? accordion.openAll() : accordion.closeAll()">
+          (click)="
+            isAllCollapsed ? accordion().openAll() : accordion().closeAll()
+          ">
           <mat-icon fontSet="material-icons-outlined">
             {{ isAllCollapsed ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}
           </mat-icon>
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts
index c5ada5ce5..3ef19dae3 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.spec.ts
@@ -38,7 +38,7 @@ describe('ProgressTableComponent', () => {
   describe('Class tests', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        declarations: [TestrunTableComponent],
+        imports: [TestrunTableComponent],
         providers: [{ provide: TestRunService, useValue: testRunServiceMock }],
       });
       fixture = TestBed.createComponent(TestrunTableComponent);
@@ -89,9 +89,14 @@ describe('ProgressTableComponent', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        declarations: [TestrunTableComponent, FakeCalloutComponent],
+        declarations: [FakeCalloutComponent],
         providers: [{ provide: TestRunService, useValue: testRunServiceMock }],
-        imports: [BrowserAnimationsModule, MatExpansionModule, MatIconModule],
+        imports: [
+          BrowserAnimationsModule,
+          MatExpansionModule,
+          MatIconModule,
+          TestrunTableComponent,
+        ],
       }).compileComponents();
 
       fixture = TestBed.createComponent(TestrunTableComponent);
diff --git a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts
index 1277c5c87..8aa16eb03 100644
--- a/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/testrun-table/testrun-table.component.ts
@@ -17,38 +17,62 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
-  QueryList,
-  ViewChild,
-  ViewChildren,
+  viewChild,
+  viewChildren,
+  inject,
 } from '@angular/core';
-import { MatAccordion, MatExpansionPanel } from '@angular/material/expansion';
+import {
+  MatAccordion,
+  MatExpansionModule,
+  MatExpansionPanel,
+} from '@angular/material/expansion';
 import {
   IResult,
   StatusResultClassName,
 } from '../../../../model/testrun-status';
 import { CalloutType } from '../../../../model/callout-type';
 import { TestRunService } from '../../../../services/test-run.service';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { CalloutComponent } from '../../../../components/callout/callout.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-testrun-table',
   templateUrl: './testrun-table.component.html',
   styleUrls: ['./testrun-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatInputModule,
+    MatExpansionModule,
+    ReactiveFormsModule,
+    CalloutComponent,
+    MatTooltipModule,
+  ],
 })
 export class TestrunTableComponent {
-  @ViewChild(MatAccordion) accordion!: MatAccordion;
-  @ViewChildren(MatExpansionPanel) panels!: QueryList<MatExpansionPanel>;
+  private readonly testRunService = inject(TestRunService);
+
+  readonly accordion = viewChild.required(MatAccordion);
+  readonly panels = viewChildren(MatExpansionPanel);
   public readonly CalloutType = CalloutType;
   @Input() dataSource!: IResult[] | undefined;
   @Input() stepsToResolveCount = 0;
   isAllCollapsed!: boolean;
-
-  constructor(private readonly testRunService: TestRunService) {}
   public checkAllCollapsed(): void {
-    this.isAllCollapsed = this.panels
-      ?.toArray()
-      .every(panel => !panel.expanded);
+    this.isAllCollapsed = this.panels().every(panel => !panel.expanded);
   }
 
   public getResultClass(result: string): StatusResultClassName {
diff --git a/modules/ui/src/app/pages/testrun/testrun-routing.module.ts b/modules/ui/src/app/pages/testrun/testrun-routing.module.ts
deleted file mode 100644
index 903ce0bed..000000000
--- a/modules/ui/src/app/pages/testrun/testrun-routing.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { TestrunComponent } from './testrun.component';
-
-const routes: Routes = [{ path: '', component: TestrunComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class TestrunRoutingModule {}
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
index 7adb45355..eb4f84d16 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.component.spec.ts
@@ -65,6 +65,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NotificationService } from '../../services/notification.service';
 import { Profile } from '../../model/profile';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { DownloadOptionsComponent } from './components/download-options/download-options.component';
+import { TestrunTableComponent } from './components/testrun-table/testrun-table.component';
+import { TestrunStatusCardComponent } from './components/testrun-status-card/testrun-status-card.component';
 
 describe('TestrunComponent', () => {
   let component: TestrunComponent;
@@ -103,12 +106,6 @@ describe('TestrunComponent', () => {
       window.dataLayer = window.dataLayer || [];
       testRunServiceMock.stopTestrun.and.returnValue(of(true));
       TestBed.configureTestingModule({
-        declarations: [
-          TestrunComponent,
-          FakeProgressStatusCardComponent,
-          FakeProgressTableComponent,
-          FakeDownloadOptionsComponent,
-        ],
         providers: [
           TestrunStore,
           { provide: TestRunService, useValue: testRunServiceMock },
@@ -136,6 +133,10 @@ describe('TestrunComponent', () => {
           }),
         ],
         imports: [
+          TestrunComponent,
+          FakeProgressStatusCardComponent,
+          FakeProgressTableComponent,
+          FakeDownloadOptionsComponent,
           MatButtonModule,
           MatIconModule,
           MatToolbarModule,
@@ -152,6 +153,22 @@ describe('TestrunComponent', () => {
             ],
           },
         })
+        .overrideComponent(TestrunComponent, {
+          remove: {
+            imports: [
+              TestrunStatusCardComponent,
+              TestrunTableComponent,
+              DownloadOptionsComponent,
+            ],
+          },
+          add: {
+            imports: [
+              FakeProgressStatusCardComponent,
+              FakeProgressTableComponent,
+              FakeDownloadOptionsComponent,
+            ],
+          },
+        })
         .compileComponents();
 
       testRunServiceMock.fetchSystemStatus.and.returnValue(
@@ -222,12 +239,6 @@ describe('TestrunComponent', () => {
       window.dataLayer = window.dataLayer || [];
 
       await TestBed.configureTestingModule({
-        declarations: [
-          TestrunComponent,
-          FakeProgressStatusCardComponent,
-          FakeProgressTableComponent,
-          FakeDownloadOptionsComponent,
-        ],
         providers: [
           TestrunStore,
           { provide: TestRunService, useValue: testRunServiceMock },
@@ -256,6 +267,10 @@ describe('TestrunComponent', () => {
           }),
         ],
         imports: [
+          TestrunComponent,
+          FakeProgressStatusCardComponent,
+          FakeProgressTableComponent,
+          FakeDownloadOptionsComponent,
           MatButtonModule,
           MatIconModule,
           MatToolbarModule,
@@ -272,6 +287,22 @@ describe('TestrunComponent', () => {
             ],
           },
         })
+        .overrideComponent(TestrunComponent, {
+          remove: {
+            imports: [
+              TestrunStatusCardComponent,
+              TestrunTableComponent,
+              DownloadOptionsComponent,
+            ],
+          },
+          add: {
+            imports: [
+              FakeProgressStatusCardComponent,
+              FakeProgressTableComponent,
+              FakeDownloadOptionsComponent,
+            ],
+          },
+        })
         .compileComponents();
 
       store = TestBed.inject(MockStore);
@@ -596,7 +627,6 @@ describe('TestrunComponent', () => {
 @Component({
   selector: 'app-testrun-status-card',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeProgressStatusCardComponent {
   @Input() systemStatus!: TestrunStatus;
@@ -605,7 +635,6 @@ class FakeProgressStatusCardComponent {
 @Component({
   selector: 'app-testrun-table',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeProgressTableComponent {
   @Input() dataSource!: IResult[] | undefined;
@@ -615,7 +644,6 @@ class FakeProgressTableComponent {
 @Component({
   selector: 'app-download-options',
   template: '<div></div>',
-  standalone: false,
 })
 class FakeDownloadOptionsComponent {
   @Input() data!: TestrunStatus;
diff --git a/modules/ui/src/app/pages/testrun/testrun.component.ts b/modules/ui/src/app/pages/testrun/testrun.component.ts
index 17c083ef5..e6f986f1e 100644
--- a/modules/ui/src/app/pages/testrun/testrun.component.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.component.ts
@@ -18,6 +18,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import {
   StatusOfTestrun,
@@ -25,7 +26,7 @@ import {
   TestsResponse,
 } from '../../model/testrun-status';
 import { Subject, takeUntil, timer } from 'rxjs';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TestrunInitiateFormComponent } from './components/testrun-initiate-form/testrun-initiate-form.component';
 import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component';
 import { LoaderService } from '../../services/loader.service';
@@ -36,32 +37,58 @@ import { TestRunService } from '../../services/test-run.service';
 import { NotificationService } from '../../services/notification.service';
 import { TestModule } from '../../model/device';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatInputModule } from '@angular/material/input';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SpinnerComponent } from '../../components/spinner/spinner.component';
+import { DownloadOptionsComponent } from './components/download-options/download-options.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TestrunTableComponent } from './components/testrun-table/testrun-table.component';
+import { TestrunStatusCardComponent } from './components/testrun-status-card/testrun-status-card.component';
 
 @Component({
   selector: 'app-progress',
   templateUrl: './testrun.component.html',
   styleUrls: ['./testrun.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatInputModule,
+    MatExpansionModule,
+    ReactiveFormsModule,
+    SpinnerComponent,
+    DownloadOptionsComponent,
+    MatTooltipModule,
+    TestrunTableComponent,
+    TestrunStatusCardComponent,
+  ],
   providers: [
     LoaderService,
     { provide: LOADER_TIMEOUT_CONFIG_TOKEN, useValue: 0 },
     TestrunStore,
   ],
-  standalone: false,
 })
 export class TestrunComponent implements OnInit, OnDestroy {
+  private readonly testRunService = inject(TestRunService);
+  private readonly notificationService = inject(NotificationService);
+  dialog = inject(MatDialog);
+  private readonly focusManagerService = inject(FocusManagerService);
+  testrunStore = inject(TestrunStore);
+
   public readonly StatusOfTestrun = StatusOfTestrun;
   private destroy$: Subject<boolean> = new Subject<boolean>();
   viewModel$ = this.testrunStore.viewModel$;
 
-  constructor(
-    private readonly testRunService: TestRunService,
-    private readonly notificationService: NotificationService,
-    public dialog: MatDialog,
-    private readonly focusManagerService: FocusManagerService,
-    public testrunStore: TestrunStore
-  ) {}
-
   ngOnInit(): void {
     combineLatest([
       this.testrunStore.isOpenStartTestrun$,
diff --git a/modules/ui/src/app/pages/testrun/testrun.module.ts b/modules/ui/src/app/pages/testrun/testrun.module.ts
deleted file mode 100644
index 993ca8fff..000000000
--- a/modules/ui/src/app/pages/testrun/testrun.module.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatExpansionModule } from '@angular/material/expansion';
-
-import { TestrunRoutingModule } from './testrun-routing.module';
-import { TestrunComponent } from './testrun.component';
-import { TestrunStatusCardComponent } from './components/testrun-status-card/testrun-status-card.component';
-import { TestrunTableComponent } from './components/testrun-table/testrun-table.component';
-import { TestrunInitiateFormComponent } from './components/testrun-initiate-form/testrun-initiate-form.component';
-import { MatDialogModule } from '@angular/material/dialog';
-import { DeviceItemComponent } from '../../components/device-item/device-item.component';
-import { MatInputModule } from '@angular/material/input';
-import { ReactiveFormsModule } from '@angular/forms';
-import { DeviceTestsComponent } from '../../components/device-tests/device-tests.component';
-import { DownloadReportComponent } from '../../components/download-report/download-report.component';
-import { SpinnerComponent } from '../../components/spinner/spinner.component';
-import { CalloutComponent } from '../../components/callout/callout.component';
-import { DownloadOptionsComponent } from './components/download-options/download-options.component';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-@NgModule({
-  declarations: [
-    TestrunComponent,
-    TestrunStatusCardComponent,
-    TestrunTableComponent,
-    TestrunInitiateFormComponent,
-  ],
-  imports: [
-    CommonModule,
-    TestrunRoutingModule,
-    MatButtonModule,
-    MatIconModule,
-    MatToolbarModule,
-    MatProgressBarModule,
-    MatDialogModule,
-    DeviceItemComponent,
-    MatInputModule,
-    MatExpansionModule,
-    ReactiveFormsModule,
-    DeviceTestsComponent,
-    DownloadReportComponent,
-    SpinnerComponent,
-    CalloutComponent,
-    DownloadOptionsComponent,
-    MatTooltipModule,
-  ],
-})
-export class TestrunModule {}
diff --git a/modules/ui/src/app/pages/testrun/testrun.store.ts b/modules/ui/src/app/pages/testrun/testrun.store.ts
index 2dc0c19f1..f177d7b61 100644
--- a/modules/ui/src/app/pages/testrun/testrun.store.ts
+++ b/modules/ui/src/app/pages/testrun/testrun.store.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ComponentStore } from '@ngrx/component-store';
 import { tap, withLatestFrom } from 'rxjs/operators';
 import { AppState } from '../../store/state';
@@ -55,6 +55,10 @@ export interface TestrunComponentState {
 
 @Injectable()
 export class TestrunStore extends ComponentStore<TestrunComponentState> {
+  private store = inject<Store<AppState>>(Store);
+  private readonly focusManagerService = inject(FocusManagerService);
+  private readonly loaderService = inject(LoaderService);
+
   private dataSource$ = this.select(state => state.dataSource);
   private stepsToResolveCount$ = this.select(
     state => state.stepsToResolveCount
@@ -216,11 +220,7 @@ export class TestrunStore extends ComponentStore<TestrunComponentState> {
     this.loaderService.setLoading(false);
   }
 
-  constructor(
-    private store: Store<AppState>,
-    private readonly focusManagerService: FocusManagerService,
-    private readonly loaderService: LoaderService
-  ) {
+  constructor() {
     super({
       dataSource: undefined,
       stepsToResolveCount: 0,
diff --git a/modules/ui/src/app/services/loader.service.ts b/modules/ui/src/app/services/loader.service.ts
index 84160637a..c930a7609 100644
--- a/modules/ui/src/app/services/loader.service.ts
+++ b/modules/ui/src/app/services/loader.service.ts
@@ -1,4 +1,4 @@
-import { Inject, Injectable, Optional } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject, delay, Observable, of, switchMap } from 'rxjs';
 import { LOADER_TIMEOUT_CONFIG_TOKEN } from './loaderConfig';
 
@@ -6,13 +6,10 @@ import { LOADER_TIMEOUT_CONFIG_TOKEN } from './loaderConfig';
   providedIn: 'root',
 })
 export class LoaderService {
-  private loading$ = new BehaviorSubject<boolean>(false);
+  private timeout =
+    inject(LOADER_TIMEOUT_CONFIG_TOKEN, { optional: true }) ?? 1000;
 
-  constructor(
-    @Optional()
-    @Inject(LOADER_TIMEOUT_CONFIG_TOKEN)
-    private timeout: number = 1000
-  ) {}
+  private loading$ = new BehaviorSubject<boolean>(false);
 
   setLoading(loading: boolean) {
     this.loading$.next(loading);
diff --git a/modules/ui/src/app/services/notification.service.ts b/modules/ui/src/app/services/notification.service.ts
index 413438d3d..f1c8a1004 100644
--- a/modules/ui/src/app/services/notification.service.ts
+++ b/modules/ui/src/app/services/notification.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable, NgZone } from '@angular/core';
+import { Injectable, NgZone, inject } from '@angular/core';
 import {
   MatSnackBar,
   MatSnackBarRef,
@@ -36,16 +36,14 @@ const WAIT_DISMISS_TIMEOUT_MS = 5000;
   providedIn: 'root',
 })
 export class NotificationService {
+  snackBar = inject(MatSnackBar);
+  private store = inject<Store<AppState>>(Store);
+  private focusManagerService = inject(FocusManagerService);
+  private zone = inject(NgZone);
+
   private snackBarRef!: MatSnackBarRef<TextOnlySnackBar>;
   public snackBarCompRef!: MatSnackBarRef<SnackBarComponent>;
 
-  constructor(
-    public snackBar: MatSnackBar,
-    private store: Store<AppState>,
-    private focusManagerService: FocusManagerService,
-    private zone: NgZone
-  ) {}
-
   notify(
     message: string,
     duration = 0,
diff --git a/modules/ui/src/app/services/test-run-mqtt.service.spec.ts b/modules/ui/src/app/services/test-run-mqtt.service.spec.ts
index 6f5c7e325..7ffb12443 100644
--- a/modules/ui/src/app/services/test-run-mqtt.service.spec.ts
+++ b/modules/ui/src/app/services/test-run-mqtt.service.spec.ts
@@ -1,8 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 
 import { TestRunMqttService } from './test-run-mqtt.service';
-import { IMqttMessage, MqttModule, MqttService } from 'ngx-mqtt';
-import { MQTT_SERVICE_OPTIONS } from '../app.module';
+import { IMqttMessage, MqttService } from 'ngx-mqtt';
 import SpyObj = jasmine.SpyObj;
 import { of } from 'rxjs';
 import { MOCK_ADAPTERS } from '../mocks/settings.mock';
@@ -21,7 +20,6 @@ describe('TestRunMqttService', () => {
     testRunServiceMock = jasmine.createSpyObj(['changeReportURL']);
 
     TestBed.configureTestingModule({
-      imports: [MqttModule.forRoot(MQTT_SERVICE_OPTIONS)],
       providers: [
         { provide: MqttService, useValue: mockService },
         { provide: TestRunService, useValue: testRunServiceMock },
diff --git a/modules/ui/src/app/services/test-run-mqtt.service.ts b/modules/ui/src/app/services/test-run-mqtt.service.ts
index d53622d28..c7a9ed915 100644
--- a/modules/ui/src/app/services/test-run-mqtt.service.ts
+++ b/modules/ui/src/app/services/test-run-mqtt.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { IMqttMessage, MqttService } from 'ngx-mqtt';
 import { catchError, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -11,10 +11,8 @@ import { TestRunService } from './test-run.service';
   providedIn: 'root',
 })
 export class TestRunMqttService {
-  constructor(
-    private mqttService: MqttService,
-    private testrunService: TestRunService
-  ) {}
+  private mqttService = inject(MqttService);
+  private testrunService = inject(TestRunService);
 
   getNetworkAdapters(): Observable<Adapters> {
     return this.topic<Adapters>(Topic.NetworkAdapters);
diff --git a/modules/ui/src/app/services/test-run.service.ts b/modules/ui/src/app/services/test-run.service.ts
index c517f7004..e38ad24fd 100644
--- a/modules/ui/src/app/services/test-run.service.ts
+++ b/modules/ui/src/app/services/test-run.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { Observable } from 'rxjs/internal/Observable';
 import { Device, DeviceQuestionnaireSection } from '../model/device';
@@ -49,9 +49,9 @@ export const UNAVAILABLE_VERSION = {
   providedIn: 'root',
 })
 export class TestRunService {
-  private version = new BehaviorSubject<Version | null>(null);
+  private http = inject(HttpClient);
 
-  constructor(private http: HttpClient) {}
+  private version = new BehaviorSubject<Version | null>(null);
 
   changeReportURL(url: string): string {
     if (!url) {
diff --git a/modules/ui/src/app/store/effects.ts b/modules/ui/src/app/store/effects.ts
index 12140eb65..7be67f1ee 100644
--- a/modules/ui/src/app/store/effects.ts
+++ b/modules/ui/src/app/store/effects.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
@@ -58,6 +58,12 @@ const WAIT_TO_OPEN_SNACKBAR_MS = 60 * 1000;
 
 @Injectable()
 export class AppEffects {
+  private actions$ = inject(Actions);
+  private testrunService = inject(TestRunService);
+  private testrunMqttService = inject(TestRunMqttService);
+  private store = inject<Store<AppState>>(Store);
+  private notificationService = inject(NotificationService);
+
   private isSinglePortMode: boolean | undefined = false;
   private statusSubscription: Subscription | undefined;
   private internetSubscription: Subscription | undefined;
@@ -343,12 +349,4 @@ export class AppEffects {
         });
     }
   }
-
-  constructor(
-    private actions$: Actions,
-    private testrunService: TestRunService,
-    private testrunMqttService: TestRunMqttService,
-    private store: Store<AppState>,
-    private notificationService: NotificationService
-  ) {}
 }
diff --git a/modules/ui/src/main.ts b/modules/ui/src/main.ts
index 012267c2c..b15166e62 100644
--- a/modules/ui/src/main.ts
+++ b/modules/ui/src/main.ts
@@ -13,10 +13,52 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { routes } from './app/app-routing.module';
+import { IMqttServiceOptions } from 'ngx-mqtt/lib/mqtt.model';
+import { importProvidersFrom } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { AppEffects } from './app/store/effects';
+import { MqttModule } from 'ngx-mqtt';
+import { StoreModule } from '@ngrx/store';
+import { appFeatureKey, rootReducer } from './app/store/reducers';
+import { MatNativeDateModule } from '@angular/material/core';
+import { HTTP_INTERCEPTORS, provideHttpClient } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { WindowProvider } from './app/providers/window.provider';
+import { ErrorInterceptor } from './app/interceptors/error.interceptor';
+import { LoadingInterceptor } from './app/interceptors/loading.interceptor';
+import { LOADER_TIMEOUT_CONFIG_TOKEN } from './app/services/loaderConfig';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { AppModule } from './app/app.module';
+const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
+  hostname: window.location.hostname,
+  port: 9001,
+};
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(
+      NoopAnimationsModule,
+      RouterModule.forRoot(routes),
+      StoreModule.forRoot({ [appFeatureKey]: rootReducer }),
+      EffectsModule.forRoot([AppEffects]),
+      MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
+      MatNativeDateModule
+    ),
+    provideHttpClient(),
+    WindowProvider,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ErrorInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: LoadingInterceptor,
+      multi: true,
+    },
+    { provide: LOADER_TIMEOUT_CONFIG_TOKEN, useValue: 1000 },
+  ],
+});

From 20c5abb2836ecfeab054d3658d8cbbdb479fcf0c Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 4 Dec 2024 11:44:25 +0000
Subject: [PATCH 2/2] Change budget

---
 modules/ui/angular.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ui/angular.json b/modules/ui/angular.json
index ed0dc14f9..327fc2908 100644
--- a/modules/ui/angular.json
+++ b/modules/ui/angular.json
@@ -52,7 +52,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "1500kb",
-                  "maximumError": "3000kb"
+                  "maximumError": "4000kb"
                 },
                 {
                   "type": "anyComponentStyle",