Chore: update to Angular v18 (#7106)

2025-07-28 18:24:38 -05:00 · 2024-06-26 20:57:39 -07:00
parent 4f1185c65d
commit 3435ffd00c
93 changed files with 3461 additions and 2829 deletions
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts
@@ -1,11 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { PdfViewerComponent } from 'ng2-pdf-viewer'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('DeletePagesConfirmDialogComponent', () => {
  let component: DeletePagesConfirmDialogComponent
@@ -14,13 +15,17 @@ describe('DeletePagesConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent],
-      providers: [NgbActiveModal, SafeHtmlPipe],
      imports: [
-        HttpClientTestingModule,
        NgxBootstrapIconsModule.pick(allIcons),
        FormsModule,
        ReactiveFormsModule,
      ],
+      providers: [
+        NgbActiveModal,
+        SafeHtmlPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()
    fixture = TestBed.createComponent(DeletePagesConfirmDialogComponent)
    component = fixture.componentInstance
--- a/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts
@@ -1,11 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('MergeConfirmDialogComponent', () => {
  let component: MergeConfirmDialogComponent
@@ -15,13 +16,16 @@ describe('MergeConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MergeConfirmDialogComponent],
-      providers: [NgbActiveModal],
      imports: [
-        HttpClientTestingModule,
        NgxBootstrapIconsModule.pick(allIcons),
        ReactiveFormsModule,
        FormsModule,
      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(MergeConfirmDialogComponent)
--- a/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts
@@ -2,8 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('RotateConfirmDialogComponent', () => {
  let component: RotateConfirmDialogComponent
@@ -12,10 +13,12 @@ describe('RotateConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [RotateConfirmDialogComponent, SafeHtmlPipe],
-      providers: [NgbActiveModal, SafeHtmlPipe],
-      imports: [
-        HttpClientTestingModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+      providers: [
+        NgbActiveModal,
+        SafeHtmlPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts
@@ -1,13 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { SplitConfirmDialogComponent } from './split-confirm-dialog.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ReactiveFormsModule, FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
 import { of } from 'rxjs'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('SplitConfirmDialogComponent', () => {
  let component: SplitConfirmDialogComponent
@@ -17,14 +18,17 @@ describe('SplitConfirmDialogComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SplitConfirmDialogComponent],
-      providers: [NgbActiveModal],
      imports: [
-        HttpClientTestingModule,
        NgxBootstrapIconsModule.pick(allIcons),
        ReactiveFormsModule,
        FormsModule,
        PdfViewerModule,
      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(SplitConfirmDialogComponent)
--- a/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.spec.ts
+++ b/src-ui/src/app/components/common/custom-field-display/custom-field-display.component.spec.ts
@@ -4,8 +4,9 @@ import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { CustomFieldDisplayComponent } from './custom-field-display.component'
 import { DisplayField, Document } from 'src/app/data/document'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const customFields: CustomField[] = [
  { id: 1, name: 'Field 1', data_type: CustomFieldDataType.String },
@@ -31,8 +32,12 @@ describe('CustomFieldDisplayComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CustomFieldDisplayComponent],
-      providers: [DocumentService],
-      imports: [HttpClientTestingModule],
+      imports: [],
+      providers: [
+        DocumentService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()
  })

--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
@@ -5,7 +5,7 @@ import {
  tick,
 } from '@angular/core/testing'
 import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { of } from 'rxjs'
@@ -22,6 +22,7 @@ import {
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const fields: CustomField[] = [
  {
@@ -47,7 +48,6 @@ describe('CustomFieldsDropdownComponent', () => {
    TestBed.configureTestingModule({
      declarations: [CustomFieldsDropdownComponent, SelectComponent],
      imports: [
-        HttpClientTestingModule,
        NgSelectModule,
        FormsModule,
        ReactiveFormsModule,
@@ -55,6 +55,10 @@ describe('CustomFieldsDropdownComponent', () => {
        NgbDropdownModule,
        NgxBootstrapIconsModule.pick(allIcons),
      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    })
    customFieldService = TestBed.inject(CustomFieldsService)
    toastService = TestBed.inject(ToastService)
--- a/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.spec.ts
@@ -10,7 +10,7 @@ import {
  DateSelection,
  RelativeDate,
 } from './dates-dropdown.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
@@ -18,6 +18,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DatePipe } from '@angular/common'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('DatesDropdownComponent', () => {
  let component: DatesDropdownComponent
@@ -31,14 +32,19 @@ describe('DatesDropdownComponent', () => {
        ClearableBadgeComponent,
        CustomDatePipe,
      ],
-      providers: [SettingsService, CustomDatePipe, DatePipe],
      imports: [
-        HttpClientTestingModule,
        NgbModule,
        FormsModule,
        ReactiveFormsModule,
        NgxBootstrapIconsModule.pick(allIcons),
      ],
+      providers: [
+        SettingsService,
+        CustomDatePipe,
+        DatePipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    settingsService = TestBed.inject(SettingsService)
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -11,6 +11,7 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('CorrespondentEditDialogComponent', () => {
  let component: CorrespondentEditDialogComponent
@@ -27,13 +28,11 @@ describe('CorrespondentEditDialogComponent', () => {
        TextComponent,
        PermissionsFormComponent,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { CustomFieldEditDialogComponent } from './custom-field-edit-dialog.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
@@ -12,6 +12,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('CustomFieldEditDialogComponent', () => {
  let component: CustomFieldEditDialogComponent
@@ -28,13 +29,11 @@ describe('CustomFieldEditDialogComponent', () => {
        TextComponent,
        SafeHtmlPipe,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -11,6 +11,7 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('DocumentTypeEditDialogComponent', () => {
  let component: DocumentTypeEditDialogComponent
@@ -27,13 +28,11 @@ describe('DocumentTypeEditDialogComponent', () => {
        TextComponent,
        PermissionsFormComponent,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
@@ -1,6 +1,6 @@
 import {
  HttpTestingController,
-  HttpClientTestingModule,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import { Component } from '@angular/core'
 import {
@@ -30,6 +30,7 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
 import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

@Component({
  template: `
@@ -96,6 +97,7 @@ describe('EditDialogComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [TestComponent],
+      imports: [FormsModule, ReactiveFormsModule],
      providers: [
        NgbActiveModal,
        {
@@ -114,8 +116,9 @@ describe('EditDialogComponent', () => {
        },
        SettingsService,
        TagService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
-      imports: [HttpClientTestingModule, FormsModule, ReactiveFormsModule],
    }).compileComponents()

    tagService = TestBed.inject(TagService)
--- a/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -12,6 +12,7 @@ import { TextComponent } from '../../input/text/text.component'
 import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { GroupEditDialogComponent } from './group-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('GroupEditDialogComponent', () => {
  let component: GroupEditDialogComponent
@@ -29,13 +30,11 @@ describe('GroupEditDialogComponent', () => {
        PermissionsFormComponent,
        PermissionsSelectComponent,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.spec.ts
@@ -1,6 +1,6 @@
 import {
  HttpTestingController,
-  HttpClientTestingModule,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import {
  ComponentFixture,
@@ -23,6 +23,7 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { MailAccountEditDialogComponent } from './mail-account-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('MailAccountEditDialogComponent', () => {
  let component: MailAccountEditDialogComponent
@@ -42,13 +43,11 @@ describe('MailAccountEditDialogComponent', () => {
        PermissionsFormComponent,
        PasswordComponent,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -23,6 +23,7 @@ import { TagsComponent } from '../../input/tags/tags.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { MailRuleEditDialogComponent } from './mail-rule-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('MailRuleEditDialogComponent', () => {
  let component: MailRuleEditDialogComponent
@@ -43,6 +44,7 @@ describe('MailRuleEditDialogComponent', () => {
        SafeHtmlPipe,
        CheckComponent,
      ],
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
      providers: [
        NgbActiveModal,
        {
@@ -63,13 +65,8 @@ describe('MailRuleEditDialogComponent', () => {
            listAll: () => of([]),
          },
        },
-      ],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -12,6 +12,7 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { StoragePathEditDialogComponent } from './storage-path-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('StoragePathEditDialogComponent', () => {
  let component: StoragePathEditDialogComponent
@@ -29,13 +30,11 @@ describe('StoragePathEditDialogComponent', () => {
        PermissionsFormComponent,
        SafeHtmlPipe,
      ],
-      providers: [NgbActiveModal],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -14,6 +14,7 @@ import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { TagEditDialogComponent } from './tag-edit-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('TagEditDialogComponent', () => {
  let component: TagEditDialogComponent
@@ -32,15 +33,19 @@ describe('TagEditDialogComponent', () => {
        ColorComponent,
        CheckComponent,
      ],
-      providers: [NgbActiveModal, SettingsService],
      imports: [
-        HttpClientTestingModule,
        FormsModule,
        ReactiveFormsModule,
        NgSelectModule,
        NgbModule,
        NgxBootstrapIconsModule.pick(allIcons),
      ],
+      providers: [
+        NgbActiveModal,
+        SettingsService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(TagEditDialogComponent)
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
  FormsModule,
@@ -19,6 +19,7 @@ import { TextComponent } from '../../input/text/text.component'
 import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { UserEditDialogComponent } from './user-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('UserEditDialogComponent', () => {
  let component: UserEditDialogComponent
@@ -37,6 +38,7 @@ describe('UserEditDialogComponent', () => {
        PermissionsFormComponent,
        PermissionsSelectComponent,
      ],
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
      providers: [
        NgbActiveModal,
        {
@@ -54,13 +56,8 @@ describe('UserEditDialogComponent', () => {
          },
        },
        SettingsService,
-      ],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -39,6 +39,7 @@ import {
 } from 'src/app/data/workflow-action'
 import { MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model'
 import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const workflow: Workflow = {
  name: 'Workflow 1',
@@ -88,6 +89,7 @@ describe('WorkflowEditDialogComponent', () => {
        SafeHtmlPipe,
        ConfirmButtonComponent,
      ],
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
      providers: [
        NgbActiveModal,
        {
@@ -150,13 +152,8 @@ describe('WorkflowEditDialogComponent', () => {
              }),
          },
        },
-      ],
-      imports: [
-        HttpClientTestingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        NgbModule,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/date/date.component.spec.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.spec.ts
@@ -5,7 +5,7 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { DateComponent } from './date.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
  NgbDateParserFormatter,
  NgbDatepickerModule,
@@ -13,6 +13,7 @@ import {
 import { RouterTestingModule } from '@angular/router/testing'
 import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('DateComponent', () => {
  let component: DateComponent
@@ -22,19 +23,20 @@ describe('DateComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [DateComponent],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgbDatepickerModule,
+        RouterTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        {
          provide: NgbDateParserFormatter,
          useClass: LocalizedDateParserFormatter,
        },
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgbDatepickerModule,
-        RouterTestingModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
  FormsModule,
@@ -10,6 +10,7 @@ import { of, throwError } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { DocumentLinkComponent } from './document-link.component'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const documents = [
  {
@@ -38,11 +39,10 @@ describe('DocumentLinkComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [DocumentLinkComponent],
-      imports: [
-        HttpClientTestingModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
+      imports: [NgSelectModule, FormsModule, ReactiveFormsModule],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    })
    documentService = TestBed.inject(DocumentService)
--- a/src-ui/src/app/components/common/input/file/file.component.spec.ts
+++ b/src-ui/src/app/components/common/input/file/file.component.spec.ts
@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { FileComponent } from './file.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('FileComponent', () => {
  let component: FileComponent
@@ -11,7 +12,11 @@ describe('FileComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FileComponent],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(FileComponent)
--- a/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
+++ b/src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts
@@ -4,9 +4,10 @@ import {
  NG_VALUE_ACCESSOR,
  ReactiveFormsModule,
 } from '@angular/forms'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { CurrencyPipe } from '@angular/common'
 import { MonetaryComponent } from './monetary.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('MonetaryComponent', () => {
  let component: MonetaryComponent
@@ -15,8 +16,12 @@ describe('MonetaryComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MonetaryComponent],
-      providers: [CurrencyPipe],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        CurrencyPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(MonetaryComponent)
--- a/src-ui/src/app/components/common/input/number/number.component.spec.ts
+++ b/src-ui/src/app/components/common/input/number/number.component.spec.ts
@@ -6,8 +6,9 @@ import {
 } from '@angular/forms'
 import { NumberComponent } from './number.component'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { of } from 'rxjs'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('NumberComponent', () => {
  let component: NumberComponent
@@ -18,8 +19,12 @@ describe('NumberComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [NumberComponent],
-      providers: [DocumentService],
-      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+      imports: [FormsModule, ReactiveFormsModule],
+      providers: [
+        DocumentService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(NumberComponent)
--- a/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.spec.ts
@@ -9,8 +9,9 @@ import { SelectComponent } from '../../select/select.component'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { PermissionsGroupComponent } from '../permissions-group/permissions-group.component'
 import { PermissionsUserComponent } from '../permissions-user/permissions-user.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsFormComponent', () => {
  let component: PermissionsFormComponent
@@ -24,14 +25,16 @@ describe('PermissionsFormComponent', () => {
        PermissionsGroupComponent,
        PermissionsUserComponent,
      ],
-      providers: [],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        NgbAccordionModule,
-        HttpClientTestingModule,
        NgSelectModule,
      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(PermissionsFormComponent)
--- a/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.spec.ts
@@ -5,10 +5,11 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { PermissionsGroupComponent } from './permissions-group.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { of } from 'rxjs'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsGroupComponent', () => {
  let component: PermissionsGroupComponent
@@ -19,12 +20,11 @@ describe('PermissionsGroupComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [PermissionsGroupComponent],
-      providers: [GroupService],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgSelectModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      providers: [
+        GroupService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.spec.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.spec.ts
@@ -5,11 +5,12 @@ import {
  ReactiveFormsModule,
 } from '@angular/forms'
 import { PermissionsUserComponent } from './permissions-user.component'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { of } from 'rxjs'
 import { UserService } from 'src/app/services/rest/user.service'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('PermissionsUserComponent', () => {
  let component: PermissionsUserComponent
@@ -20,12 +21,11 @@ describe('PermissionsUserComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [PermissionsUserComponent],
-      providers: [UserService],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        HttpClientTestingModule,
-        NgSelectModule,
+      imports: [FormsModule, ReactiveFormsModule, NgSelectModule],
+      providers: [
+        UserService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -49,7 +49,7 @@
      @if (getSuggestions().length > 0) {
        <small class="position-absolute top-100">
          <span i18n>Suggestions:</span>&nbsp;
-          @for (tag of getSuggestions(); track tag) {
+          @for (tag of getSuggestions(); track tag.id) {
            <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
          }
        </small>
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@@ -12,7 +12,7 @@ import {
 } from 'src/app/data/matching-model'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { RouterTestingModule } from '@angular/router/testing'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { of } from 'rxjs'
 import { TagService } from 'src/app/services/rest/tag.service'
 import {
@@ -31,6 +31,7 @@ import { PermissionsFormComponent } from '../permissions/permissions-form/permis
 import { SelectComponent } from '../select/select.component'
 import { SettingsService } from 'src/app/services/settings.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const tags: Tag[] = [
  {
@@ -74,6 +75,16 @@ describe('TagsComponent', () => {
        ColorComponent,
        CheckComponent,
      ],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        RouterTestingModule,
+        NgbModalModule,
+        NgbAccordionModule,
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        {
          provide: TagService,
@@ -90,17 +101,8 @@ describe('TagsComponent', () => {
              }),
          },
        },
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule,
-        NgSelectModule,
-        RouterTestingModule,
-        HttpClientTestingModule,
-        NgbModalModule,
-        NgbAccordionModule,
-        NgbPopoverModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/logo/logo.component.spec.ts
+++ b/src-ui/src/app/components/common/logo/logo.component.spec.ts
@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'

 import { LogoComponent } from './logo.component'
 import { By } from '@angular/platform-browser'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('LogoComponent', () => {
  let component: LogoComponent
@@ -14,7 +15,11 @@ describe('LogoComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LogoComponent],
-      imports: [HttpClientTestingModule],
+      imports: [],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    })
    settingsService = TestBed.inject(SettingsService)
    fixture = TestBed.createComponent(LogoComponent)
--- a/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { PermissionsDialogComponent } from './permissions-dialog.component'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { UserService } from 'src/app/services/rest/user.service'
 import { of } from 'rxjs'
@@ -12,6 +12,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { PermissionsUserComponent } from '../input/permissions/permissions-user/permissions-user.component'
 import { PermissionsGroupComponent } from '../input/permissions/permissions-group/permissions-group.component'
 import { SwitchComponent } from '../input/switch/switch.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const set_permissions = {
  owner: 10,
@@ -43,6 +44,7 @@ describe('PermissionsDialogComponent', () => {
        PermissionsUserComponent,
        PermissionsGroupComponent,
      ],
+      imports: [NgSelectModule, FormsModule, ReactiveFormsModule, NgbModule],
      providers: [
        NgbActiveModal,
        {
@@ -63,13 +65,8 @@ describe('PermissionsDialogComponent', () => {
              }),
          },
        },
-      ],
-      imports: [
-        HttpClientTestingModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
@@ -1,4 +1,4 @@
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -15,6 +15,7 @@ import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.comp
 import { SettingsService } from 'src/app/services/settings.service'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const currentUserID = 13

@@ -30,6 +31,13 @@ describe('PermissionsFilterDropdownComponent', () => {
        ClearableBadgeComponent,
        IfPermissionsDirective,
      ],
+      imports: [
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
      providers: [
        {
          provide: UserService,
@@ -63,14 +71,8 @@ describe('PermissionsFilterDropdownComponent', () => {
            },
          },
        },
-      ],
-      imports: [
-        HttpClientTestingModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
-        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.spec.ts
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.spec.ts
@@ -14,7 +14,8 @@ import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const permissions = [
  'add_document',
@@ -36,13 +37,15 @@ describe('PermissionsSelectComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [PermissionsSelectComponent],
-      providers: [],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        NgbModule,
        NgxBootstrapIconsModule.pick(allIcons),
-        HttpClientTestingModule,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()

--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -5,10 +5,11 @@ import { By } from '@angular/platform-browser'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const doc = {
  id: 10,
@@ -26,10 +27,10 @@ describe('PreviewPopupComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [PreviewPopupComponent, SafeUrlPipe],
-      imports: [
-        HttpClientTestingModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        PdfViewerModule,
+      imports: [NgxBootstrapIconsModule.pick(allIcons), PdfViewerModule],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    })
    settingsService = TestBed.inject(SettingsService)
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
@@ -14,7 +14,7 @@ import {
  NgbModalModule,
  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { HttpClientModule } from '@angular/common/http'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { TextComponent } from '../input/text/text.component'
 import { PasswordComponent } from '../input/password/password.component'
 import { of, throwError } from 'rxjs'
@@ -55,9 +55,7 @@ describe('ProfileEditDialogComponent', () => {
        PasswordComponent,
        ConfirmButtonComponent,
      ],
-      providers: [NgbActiveModal],
      imports: [
-        HttpClientModule,
        ReactiveFormsModule,
        FormsModule,
        NgbModalModule,
@@ -65,6 +63,7 @@ describe('ProfileEditDialogComponent', () => {
        NgxBootstrapIconsModule.pick(allIcons),
        NgbPopoverModule,
      ],
+      providers: [NgbActiveModal, provideHttpClient(withInterceptorsFromDi())],
    })
    profileService = TestBed.inject(ProfileService)
    toastService = TestBed.inject(ToastService)
--- a/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.spec.ts
@@ -1,6 +1,6 @@
 import {
  HttpTestingController,
-  HttpClientTestingModule,
+  provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import {
  ComponentFixture,
@@ -18,6 +18,7 @@ import { ShareLinksDropdownComponent } from './share-links-dropdown.component'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 describe('ShareLinksDropdownComponent', () => {
  let component: ShareLinksDropdownComponent
@@ -31,11 +32,14 @@ describe('ShareLinksDropdownComponent', () => {
    TestBed.configureTestingModule({
      declarations: [ShareLinksDropdownComponent],
      imports: [
-        HttpClientTestingModule,
        FormsModule,
        ReactiveFormsModule,
        NgxBootstrapIconsModule.pick(allIcons),
      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    })

    fixture = TestBed.createComponent(ShareLinksDropdownComponent)
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
+++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html
@@ -28,7 +28,7 @@
              <dt i18n>Media Storage</dt>
              <dd>
                <ngb-progressbar style="height: 4px;" class="mt-2 mb-1" type="primary" [max]="status.storage.total" [value]="status.storage.total - status.storage.available"></ngb-progressbar>
-                <span class="small">{{status.storage.available | filesize}} <ng-container i18n>available</ng-container> ({{status.storage.total | filesize}} <ng-container i18n>total</ng-container>)</span>
+                <span class="small">{{status.storage.available | fileSize}} <ng-container i18n>available</ng-container> ({{status.storage.total | fileSize}} <ng-container i18n>total</ng-container>)</span>
              </dd>
            </dl>
          </div>
--- a/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.spec.ts
@@ -17,9 +17,10 @@ import {
  InstallType,
  SystemStatus,
 } from 'src/app/data/system-status'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { NgxFilesizeModule } from 'ngx-filesize'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { FileSizePipe } from 'src/app/pipes/file-size.pipe'

 const status: SystemStatus = {
  pngx_version: '2.4.3',
@@ -57,17 +58,19 @@ describe('SystemStatusDialogComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [SystemStatusDialogComponent],
-      providers: [NgbActiveModal],
+      declarations: [SystemStatusDialogComponent, FileSizePipe],
      imports: [
        NgbModalModule,
        ClipboardModule,
-        HttpClientTestingModule,
        NgxBootstrapIconsModule.pick(allIcons),
-        NgxFilesizeModule,
        NgbPopoverModule,
        NgbProgressbarModule,
      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
    }).compileComponents()

    fixture = TestBed.createComponent(SystemStatusDialogComponent)
--- a/src-ui/src/app/components/common/toasts/toasts.component.spec.ts
+++ b/src-ui/src/app/components/common/toasts/toasts.component.spec.ts
@@ -8,11 +8,12 @@ import {
 import { ToastService } from 'src/app/services/toast.service'
 import { ToastsComponent } from './toasts.component'
 import { ComponentFixture } from '@angular/core/testing'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { of } from 'rxjs'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'

 const toasts = [
  {
@@ -46,11 +47,7 @@ describe('ToastsComponent', () => {
  beforeEach(async () => {
    TestBed.configureTestingModule({
      declarations: [ToastsComponent],
-      imports: [
-        HttpClientTestingModule,
-        NgbModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
+      imports: [NgbModule, NgxBootstrapIconsModule.pick(allIcons)],
      providers: [
        {
          provide: ToastService,
@@ -58,6 +55,8 @@ describe('ToastsComponent', () => {
            getToasts: () => of(toasts),
          },
        },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
      ],
    }).compileComponents()