Merge pull request #19287 from opf/code-maintenance/angular-18

[#65070] Upgrade Angular to v18

frontend/package.json

@@ -5,14 +5,14 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "@angular-builders/custom-esbuild": "^17.1.2",
-    "@angular-devkit/build-angular": "^17.3.17",
-    "@angular-eslint/builder": "^17.4.1",
-    "@angular-eslint/eslint-plugin": "^17.4.1",
-    "@angular-eslint/eslint-plugin-template": "^17.4.1",
-    "@angular-eslint/schematics": "17.4.1",
-    "@angular-eslint/template-parser": "^17.4.1",
-    "@angular/language-service": "17.3.4",
+    "@angular-builders/custom-esbuild": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.2.20",
+    "@angular-eslint/builder": "18.4.3",
+    "@angular-eslint/eslint-plugin": "18.4.3",
+    "@angular-eslint/eslint-plugin-template": "18.4.3",
+    "@angular-eslint/schematics": "18.4.3",
+    "@angular-eslint/template-parser": "18.4.3",
+    "@angular/language-service": "18.2.13",
     "@html-eslint/eslint-plugin": "^0.24.1",
     "@html-eslint/parser": "^0.24.1",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
@@ -33,10 +33,10 @@
     "@types/urijs": "^1.19.6",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
     "browserslist": "^4.23.0",
-    "eslint": "^8.57.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-plugin-change-detection-strategy": "^0.1.4",
@@ -62,18 +62,18 @@
     "webpack-bundle-analyzer": "^4.4.2"
   },
   "dependencies": {
-    "@angular/animations": "^17.3.4",
-    "@angular/cdk": "^17.3.4",
-    "@angular/cli": "^17.3.4",
-    "@angular/common": "^17.3.4",
-    "@angular/compiler": "^17.3.4",
-    "@angular/compiler-cli": "^17.3.4",
-    "@angular/core": "^17.3.4",
-    "@angular/elements": "^17.3.4",
-    "@angular/forms": "^17.3.4",
-    "@angular/platform-browser": "^17.3.4",
-    "@angular/platform-browser-dynamic": "^17.3.4",
-    "@angular/router": "^17.3.4",
+    "@angular/animations": "^18.2.13",
+    "@angular/cdk": "^18.2.14",
+    "@angular/cli": "^18.2.20",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/compiler-cli": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/elements": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
     "@appsignal/javascript": "^1.3.28",
     "@appsignal/plugin-breadcrumbs-console": "^1.1.29",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.22",
@@ -189,4 +189,4 @@
     "lint:eslint": "eslint",
     "generate-typings": "tsc -d -p tsconfig.app.json"
   }
-}
+}

frontend/src/app/app.module.ts

@@ -28,7 +28,7 @@
 
 import { APP_INITIALIZER, ApplicationRef, DoBootstrap, Injector, NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
-import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
   OpContextMenuTrigger,
@@ -301,9 +301,6 @@ export function initializeServices(injector:Injector) {
     // Angular Forms
     ReactiveFormsModule,
 
-    // Angular Http Client
-    HttpClientModule,
-
     // Augmenting Module
     OpenprojectAugmentingModule,
 
@@ -342,6 +339,7 @@ export function initializeServices(injector:Injector) {
     ConfirmDialogService,
     RevitAddInSettingsButtonService,
     CopyToClipboardService,
+    provideHttpClient(withInterceptorsFromDi()),
   ],
   declarations: [
     OpContextMenuTrigger,

frontend/src/app/core/apiv3/endpoints/work_packages/work-package-cache.spec.ts

@@ -43,7 +43,8 @@ import { WorkPackageCache } from 'core-app/core/apiv3/endpoints/work_packages/wo
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { HalResourceNotificationService } from 'core-app/features/hal/services/hal-resource-notification.service';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('WorkPackageCache', () => {
   let injector:Injector;
@@ -54,11 +55,8 @@ describe('WorkPackageCache', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        OpenprojectHalModule,
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [OpenprojectHalModule],
+    providers: [
         States,
         HalResourceService,
         TimezoneService,
@@ -66,13 +64,15 @@ describe('WorkPackageCache', () => {
         SchemaCacheService,
         PathHelperService,
         { provide: ConfigurationService, useValue: {} },
-        { provide: I18nService, useValue: { t: (...args:any[]) => 'translation' } },
+        { provide: I18nService, useValue: { t: (...args: any[]) => 'translation' } },
         { provide: WorkPackageResource, useValue: {} },
         { provide: ToastService, useValue: {} },
         { provide: HalResourceNotificationService, useValue: { handleRawError: () => false } },
         { provide: WorkPackageNotificationService, useValue: {} },
-      ],
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+});
 
     injector = TestBed.inject(Injector);
     states = TestBed.inject(States);

frontend/src/app/core/datetime/timezone.service.spec.ts

@@ -29,7 +29,7 @@
 /* jshint expr: true */
 
 import { TestBed } from '@angular/core/testing';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -47,16 +47,15 @@ describe('TimezoneService', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         { provide: I18nService, useValue: {} },
         { provide: ConfigurationService, useValue: ConfigurationServiceStub },
         PathHelperService,
         TimezoneService,
-      ],
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+});
 
     timezoneService = TestBed.inject(TimezoneService);
   };

frontend/src/app/core/forms/forms.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { UntypedFormBuilder } from '@angular/forms';
 import { FormsService } from './forms.service';
 
@@ -30,10 +30,9 @@ describe('FormsService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-      ],
-    });
+    imports: [],
+    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+});
     httpClient = TestBed.inject(HttpClient);
     httpTestingController = TestBed.inject(HttpTestingController);
     service = TestBed.inject(FormsService);

frontend/src/app/core/setup/init-vendors.ts

@@ -36,9 +36,6 @@ import lodash from 'lodash';
 // jQuery
 import 'jquery-ujs';
 
-// Angular dependencies
-import '@uirouter/angular';
-
 // Jquery UI
 // import 'jquery-ui/ui/position';
 // import 'jquery-ui/ui/disable-selection';

frontend/src/app/core/state/capabilities/capabilities.service.spec.ts

@@ -29,10 +29,7 @@
 /* jshint expr: true */
 
 import { TestBed } from '@angular/core/testing';
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
 import { States } from 'core-app/core/states/states.service';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
@@ -46,6 +43,7 @@ import { ICapability } from 'core-app/core/state/capabilities/capability.model';
 import URI from 'urijs';
 import { ApiV3ListParameters } from 'core-app/core/apiv3/paths/apiv3-list-resource.interface';
 import { CurrentUserQuery } from 'core-app/core/current-user/current-user.query';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 const globalCapability:ICapability = {
   id: 'placeholder_users/read/g-3',
@@ -136,10 +134,8 @@ describe('Capabilities service', () => {
     const ConfigurationServiceStub = {};
 
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         HalResourceService,
         { provide: ConfigurationService, useValue: ConfigurationServiceStub },
         { provide: States, useValue: new States() },
@@ -147,8 +143,10 @@ describe('Capabilities service', () => {
         CurrentUserStore,
         CurrentUserQuery,
         CurrentUserService,
-      ],
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+});
 
     currentUser = TestBed.inject(CurrentUserService);
     currentUser.setUser(user);

frontend/src/app/features/hal/resources/hal-resource.spec.ts

@@ -35,7 +35,8 @@ import { of } from 'rxjs';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
 import { HalLink, HalLinkInterface } from 'core-app/features/hal/hal-link/hal-link';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import Spy = jasmine.Spy;
 
 describe('HalResource', () => {
@@ -51,16 +52,15 @@ describe('HalResource', () => {
   beforeEach(waitForAsync(() => {
     // noinspection JSIgnoredPromiseFromCall
     TestBed.configureTestingModule({
-      imports: [
-        OpenprojectHalModule,
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [OpenprojectHalModule],
+    providers: [
         HalResourceService,
         States,
         I18nService,
-      ],
-    })
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+})
       .compileComponents()
       .then(() => {
         halResourceService = TestBed.inject(HalResourceService);

frontend/src/app/features/hal/resources/work-package-resource.spec.ts

@@ -48,7 +48,8 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-packag
 import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 import { WeekdayService } from 'core-app/core/days/weekday.service';
 import { of } from 'rxjs';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('WorkPackage', () => {
   let halResourceService:HalResourceService;
@@ -70,11 +71,8 @@ describe('WorkPackage', () => {
   beforeEach(waitForAsync(() => {
     // noinspection JSIgnoredPromiseFromCall
     TestBed.configureTestingModule({
-      imports: [
-        OpenprojectHalModule,
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [OpenprojectHalModule],
+    providers: [
         HalResourceService,
         States,
         TimezoneService,
@@ -90,8 +88,10 @@ describe('WorkPackage', () => {
         { provide: WorkPackageCreateService, useValue: {} },
         { provide: StateService, useValue: {} },
         { provide: SchemaCacheService, useValue: {} },
-      ],
-    })
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+})
       .compileComponents()
       .then(() => {
         halResourceService = TestBed.inject(HalResourceService);

frontend/src/app/features/work-packages/components/wp-edit-form/work-package-filter-values.spec.ts

@@ -38,7 +38,7 @@ import { WorkPackageCreateService } from 'core-app/features/work-packages/compon
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { TypeResource } from 'core-app/features/hal/resources/type-resource';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { States } from 'core-app/core/states/states.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
@@ -73,11 +73,8 @@ describe('WorkPackageFilterValues', () => {
   function setupTestBed() {
     // noinspection JSIgnoredPromiseFromCall
     void TestBed.configureTestingModule({
-      imports: [
-        UIRouterModule.forRoot({}),
-        HttpClientModule,
-      ],
-      providers: [
+    imports: [UIRouterModule.forRoot({})],
+    providers: [
         I18nService,
         { provide: WeekdayService, useValue: WeekdayServiceStub },
         States,
@@ -97,8 +94,9 @@ describe('WorkPackageFilterValues', () => {
         WorkPackageCreateService,
         HalResourceEditingService,
         WorkPackagesActivityService,
-      ],
-    }).compileComponents();
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+}).compileComponents();
 
     injector = TestBed.inject(Injector);
     halResourceService = injector.get(HalResourceService);

frontend/src/app/features/work-packages/components/wp-table/table-pagination/wp-table-pagination.component.spec.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { IsolatedQuerySpace } from 'core-app/features/work-packages/directives/query-space/isolated-query-space';
 import { inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { States } from 'core-app/core/states/states.service';
@@ -76,14 +76,12 @@ describe('wpTablePagination Directive', () => {
 
     // noinspection JSIgnoredPromiseFromCall
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-      ],
-      declarations: [
+    declarations: [
         WorkPackageTablePaginationComponent,
         OpIconComponent,
-      ],
-      providers: [
+    ],
+    imports: [],
+    providers: [
         States,
         PaginationService,
         WorkPackageViewSortByService,
@@ -94,8 +92,9 @@ describe('wpTablePagination Directive', () => {
         ConfigurationService,
         IsolatedQuerySpace,
         I18nService,
-      ],
-    }).compileComponents();
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+}).compileComponents();
   }));
 
   describe('page ranges and links', () => {

frontend/src/app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-tabs.service.spec.ts

@@ -1,4 +1,4 @@
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { Input } from '@angular/core';
 import { StateService } from '@uirouter/angular';
 import { TestBed } from '@angular/core/testing';
@@ -34,13 +34,12 @@ describe('WpTabsService', () => {
   beforeEach(() => {
     TestBed.resetTestingModule();
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         { provide: StateService, useValue: { includes: () => false } },
-      ],
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+});
     service = TestBed.inject(WorkPackageTabsService);
     (service as any).registeredTabs = [];
     service.register({ ...displayableTab }, { ...notDisplayableTab });

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { States } from 'core-app/core/states/states.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { of, map } from 'rxjs';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -8,6 +8,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { OpAutocompleterComponent } from './op-autocompleter.component';
 import { TOpAutocompleterResource } from './typings';
 import { By } from '@angular/platform-browser';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('autocompleter', () => {
   let fixture:ComponentFixture<OpAutocompleterComponent>;
@@ -53,11 +54,11 @@ describe('autocompleter', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [OpAutocompleterComponent],
-      providers: [States],
-      imports: [HttpClientTestingModule, NgSelectModule],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+    declarations: [OpAutocompleterComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [NgSelectModule],
+    providers: [States, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+}).compileComponents();
 
     fixture = TestBed.createComponent(OpAutocompleterComponent);
     getOptionsFnSpy = jasmine.createSpy("getOptionsFn").and.callFake((searchTerm:string) => {

frontend/src/app/shared/components/dynamic-forms/components/dynamic-form/dynamic-form.component.spec.ts

@@ -38,10 +38,11 @@ import { DateInputComponent } from 'core-app/shared/components/dynamic-forms/com
 import { FormattableTextareaInputComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-inputs/formattable-textarea-input/formattable-textarea-input.component';
 import { DynamicFieldGroupWrapperComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-field-group-wrapper/dynamic-field-group-wrapper.component';
 import { SpotFormFieldComponent } from 'core-app/spot/components/form-field/form-field.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { DynamicFieldWrapperComponent } from 'core-app/shared/components/dynamic-forms/components/dynamic-field-wrapper/dynamic-field-wrapper.component';
 import { ConfirmDialogService } from "core-app/shared/components/modals/confirm-dialog/confirm-dialog.service";
 import { IOPDynamicFormSettings } from 'core-app/shared/components/dynamic-forms/typings';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 @Component({
   template: `
@@ -296,54 +297,53 @@ describe('DynamicFormComponent', () => {
 
     await TestBed
       .configureTestingModule({
-        imports: [
-          CommonModule,
-          HttpClientTestingModule,
-          ReactiveFormsModule,
-          FormlyModule.forRoot({
+    declarations: [
+        DynamicFormComponent,
+        SpotFormFieldComponent,
+        TextInputComponent,
+        IntegerInputComponent,
+        SelectInputComponent,
+        BooleanInputComponent,
+        DynamicFormsTestingComponent,
+        DynamicFieldGroupWrapperComponent,
+        DynamicFieldWrapperComponent,
+        // Skip adding DateInputComponent and FormattableTextareaInputComponent
+        // to keep it simple (inheritance test issues).
+    ],
+    imports: [CommonModule,
+        ReactiveFormsModule,
+        FormlyModule.forRoot({
             types: [
-              { name: 'textInput', component: TextInputComponent },
-              { name: 'integerInput', component: IntegerInputComponent },
-              { name: 'selectInput', component: SelectInputComponent },
-              { name: 'booleanInput', component: BooleanInputComponent },
-              { name: 'dateInput', component: DateInputComponent },
-              { name: 'formattableInput', component: FormattableTextareaInputComponent },
+                { name: 'textInput', component: TextInputComponent },
+                { name: 'integerInput', component: IntegerInputComponent },
+                { name: 'selectInput', component: SelectInputComponent },
+                { name: 'booleanInput', component: BooleanInputComponent },
+                { name: 'dateInput', component: DateInputComponent },
+                { name: 'formattableInput', component: FormattableTextareaInputComponent },
             ],
             wrappers: [
-              {
-                name: 'op-dynamic-field-group-wrapper',
-                component: DynamicFieldGroupWrapperComponent,
-              },
-              {
-                name: 'op-dynamic-field-wrapper',
-                component: DynamicFieldWrapperComponent,
-              },
+                {
+                    name: 'op-dynamic-field-group-wrapper',
+                    component: DynamicFieldGroupWrapperComponent,
+                },
+                {
+                    name: 'op-dynamic-field-wrapper',
+                    component: DynamicFieldWrapperComponent,
+                },
             ],
-          }),
-          NgSelectModule,
-          NgOptionHighlightModule,
-        ],
-        declarations: [
-          DynamicFormComponent,
-          SpotFormFieldComponent,
-          TextInputComponent,
-          IntegerInputComponent,
-          SelectInputComponent,
-          BooleanInputComponent,
-          DynamicFormsTestingComponent,
-          DynamicFieldGroupWrapperComponent,
-          DynamicFieldWrapperComponent,
-          // Skip adding DateInputComponent and FormattableTextareaInputComponent
-          // to keep it simple (inheritance test issues).
-        ],
-        providers: [
-          DynamicFieldsService,
-          { provide: I18nService, useValue: I18nServiceStub },
-          { provide: PathHelperService, useValue: IPathHelperServiceStub },
-          { provide: ToastService, useValue: toastServiceSpy },
-          { provide: ConfirmDialogService, useValue: confirmDialogServiceSpy },
-        ],
-      })
+        }),
+        NgSelectModule,
+        NgOptionHighlightModule],
+    providers: [
+        DynamicFieldsService,
+        { provide: I18nService, useValue: I18nServiceStub },
+        { provide: PathHelperService, useValue: IPathHelperServiceStub },
+        { provide: ToastService, useValue: toastServiceSpy },
+        { provide: ConfirmDialogService, useValue: confirmDialogServiceSpy },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+})
       // Set component providers
       .overrideComponent(
         DynamicFormComponent,

frontend/src/app/shared/components/dynamic-forms/services/dynamic-fields/dynamic-fields.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { DynamicFieldsService } from 'core-app/shared/components/dynamic-forms/services/dynamic-fields/dynamic-fields.service';
 import { isObservable } from 'rxjs';
 import { IOPFormlyFieldSettings } from 'core-app/shared/components/dynamic-forms/typings';
@@ -12,13 +12,13 @@ describe('DynamicFieldsService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         DynamicFieldsService,
-      ],
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+});
     httpClient = TestBed.inject(HttpClient);
     httpTestingController = TestBed.inject(HttpTestingController);
     service = TestBed.inject(DynamicFieldsService);

frontend/src/app/shared/components/dynamic-forms/services/dynamic-form/dynamic-form.service.spec.ts

@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { DynamicFormService } from 'core-app/shared/components/dynamic-forms/services/dynamic-form/dynamic-form.service';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { DynamicFieldsService } from 'core-app/shared/components/dynamic-forms/services/dynamic-fields/dynamic-fields.service';
 import { UntypedFormGroup } from '@angular/forms';
 import { of } from 'rxjs';
@@ -117,15 +117,15 @@ describe('DynamicFormService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [],
+    providers: [
         DynamicFormService,
         DynamicFieldsService,
         FormsService,
-      ]
-    });
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+});
     httpClient = TestBed.inject(HttpClient);
     httpTestingController = TestBed.inject(HttpTestingController);
     dynamicFormService = TestBed.inject(DynamicFormService);

frontend/src/app/shared/components/grids/widgets/news/news.component.spec.ts

@@ -3,7 +3,7 @@ import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { States } from 'core-app/core/states/states.service';
 import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { By } from '@angular/platform-browser';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { of } from 'rxjs';
@@ -45,18 +45,20 @@ describe('shows news', () => {
   };
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        WidgetNewsComponent],
-      providers: [
+    declarations: [
+        WidgetNewsComponent
+    ],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [],
+    providers: [
         TimezoneService,
         { provide: ConfigurationService, useValue: configurationServiceStub },
         States,
         { provide: ApiV3Service, useValue: apiv3ServiceStub },
         HalResourceService,
-      ],
-      imports: [HttpClientModule],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+        provideHttpClient(withInterceptorsFromDi()),
+    ]
+}).compileComponents();
 
     fixture = TestBed.createComponent(WidgetNewsComponent);
     app = fixture.debugElement.componentInstance;

frontend/src/app/shared/components/toaster/toast.service.spec.ts

@@ -28,12 +28,12 @@
 
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { ToastService } from 'core-app/shared/components/toaster/toast.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { OpenprojectHalModule } from 'core-app/features/hal/openproject-hal.module';
 import { Observable, of } from 'rxjs';
-import { HttpEvent } from '@angular/common/http';
+import { HttpEvent, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('ToastService', () => {
   let toastService:ToastService;
@@ -41,16 +41,15 @@ describe('ToastService', () => {
   beforeEach(waitForAsync(() => {
     // noinspection JSIgnoredPromiseFromCall
     TestBed.configureTestingModule({
-      imports: [
-        OpenprojectHalModule,
-        HttpClientTestingModule,
-      ],
-      providers: [
+    imports: [OpenprojectHalModule],
+    providers: [
         { provide: ConfigurationService, useValue: { autoHidePopups: () => true } },
         I18nService,
         ToastService,
-      ],
-    })
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+    ]
+})
       .compileComponents()
       .then(() => {
         toastService = TestBed.inject(ToastService);