[#74950] Angular: Migration to the inject function

frontend/src/app/core/active-window/active-window.service.ts

@@ -1,12 +1,14 @@
-import { Inject, Injectable, DOCUMENT } from '@angular/core';
+import { Injectable, DOCUMENT, inject } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { debugLog } from 'core-app/shared/helpers/debug_output';
 
 @Injectable({ providedIn: 'root' })
 export class ActiveWindowService {
   private activeState$ = new BehaviorSubject<boolean>(true);
 
-  constructor(@Inject(DOCUMENT) document:Document) {
+  constructor() {
+    const document = inject<Document>(DOCUMENT);
+
     document.addEventListener('visibilitychange', () => {
       if (document.visibilityState) {
         debugLog(`Browser window has visibility state changed to ${document.visibilityState}`);

frontend/src/app/core/apiv3/api-v3.service.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable, Injector } from '@angular/core';
+import { Injectable, Injector, inject } from '@angular/core';
 import { ApiV3GettableResource, ApiV3ResourceCollection } from 'core-app/core/apiv3/paths/apiv3-resource';
 import { Constructor } from 'core-app/core/util-types';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
@@ -65,6 +65,9 @@ import {
 
 @Injectable({ providedIn: 'root' })
 export class ApiV3Service {
+  readonly injector = inject(Injector);
+  readonly pathHelper = inject(PathHelperService);
+
   // /api/v3/attachments
   public readonly attachments = this.apiV3CollectionEndpoint('attachments');
 
@@ -173,11 +176,6 @@ export class ApiV3Service {
   // VIRTUAL boards are /api/v3/grids + a scope filter
   public readonly boards = this.apiV3CustomEndpoint(ApiV3BoardsPaths);
 
-  constructor(
-    readonly injector:Injector,
-    readonly pathHelper:PathHelperService,
-  ) { }
-
   /**
    * Returns the part of the API that exists both
    *  - WITHIN a project scope /api/v3/projects/*

frontend/src/app/core/apiv3/endpoints/projects/project.cache.ts

@@ -37,8 +37,8 @@ import { ProjectResource } from 'core-app/features/hal/resources/project-resourc
 export class ProjectCache extends StateCacheService<ProjectResource> {
   @InjectField() private schemaCacheService:SchemaCacheService;
 
-  constructor(readonly injector:Injector,
-    state:MultiInputState<ProjectResource>) {
+  // eslint-disable-next-line @angular-eslint/prefer-inject -- manually instantiated, not DI-resolved
+  constructor(readonly injector:Injector, state:MultiInputState<ProjectResource>) {
     super(state);
   }
 

frontend/src/app/core/augmenting/openproject-augmenting.module.ts

@@ -26,15 +26,17 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { NgModule } from '@angular/core';
+import { NgModule, inject } from '@angular/core';
 import { OpenprojectModalModule } from 'core-app/shared/components/modal/modal.module';
 import { OpModalWrapperAugmentService } from 'core-app/shared/components/modal/modal-wrapper-augment.service';
 
 @NgModule({
   imports: [OpenprojectModalModule],
 })
 export class OpenprojectAugmentingModule {
-  constructor(modalWrapper:OpModalWrapperAugmentService) {
+  constructor() {
+    const modalWrapper = inject(OpModalWrapperAugmentService);
+
     // Setup augmenting services
     modalWrapper.setupListener();
 

frontend/src/app/core/backup/op-backup.service.ts

@@ -26,17 +26,15 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { Observable } from 'rxjs';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 
 @Injectable({ providedIn: 'root' })
 export class OpenProjectBackupService {
-  constructor(
-    protected apiV3Service:ApiV3Service,
-  ) {
-  }
+  protected apiV3Service = inject(ApiV3Service);
+
 
   public triggerBackup(backupToken:string, includeAttachments = true):Observable<HalResource> {
     return this

frontend/src/app/core/browser/browser-detector.service.ts

@@ -1,9 +1,9 @@
-import { Inject, Injectable, DOCUMENT } from '@angular/core';
+import { Injectable, DOCUMENT, inject } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class BrowserDetector {
-  constructor(@Inject(DOCUMENT) private documentElement:Document) {
-  }
+  private documentElement = inject<Document>(DOCUMENT);
+
 
   /**
    * Detect mobile browser based on the Rails determined UA

frontend/src/app/core/config/configuration.service.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import moment from 'moment';
 
 import { ConfigurationResource } from 'core-app/features/hal/resources/configuration-resource';
@@ -35,15 +35,13 @@ import { type DurationFormat } from 'core-app/shared/helpers/chronic_duration';
 
 @Injectable({ providedIn: 'root' })
 export class ConfigurationService {
+  private readonly apiV3Service = inject(ApiV3Service);
+
   // fetches configuration from the ApiV3 endpoint
   // TODO: this currently saves the request between page reloads,
   // but could easily be stored in localStorage
   private configuration:ConfigurationResource;
 
-  public constructor(
-    private readonly apiV3Service:ApiV3Service,
-  ) { }
-
   public initialize():Promise<void> {
     return this.loadConfiguration();
   }

frontend/src/app/core/current-project/current-project.service.spec.ts

@@ -26,7 +26,9 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+import { TestBed } from '@angular/core/testing';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { CurrentProjectService } from './current-project.service';
 
 describe('currentProject service', () => {
@@ -40,7 +42,15 @@ describe('currentProject service', () => {
   };
 
   beforeEach(() => {
-    currentProject = new CurrentProjectService(new PathHelperService(), apiV3Stub);
+    TestBed.configureTestingModule({
+      providers: [
+        CurrentProjectService,
+        PathHelperService,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        { provide: ApiV3Service, useValue: apiV3Stub },
+      ],
+    });
+    currentProject = TestBed.inject(CurrentProjectService);
   });
 
   describe('with no meta present', () => {

frontend/src/app/core/current-project/current-project.service.ts

@@ -26,21 +26,21 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { getMetaElement } from '../setup/globals/global-helpers';
 
 @Injectable({ providedIn: 'root' })
 export class CurrentProjectService {
+  private PathHelper = inject(PathHelperService);
+  private apiV3Service = inject(ApiV3Service);
+
   private currentId:string|null = null;
   private currentName:string|null = null;
   private currentIdentifier:string|null = null;
 
-  constructor(
-    private PathHelper:PathHelperService,
-    private apiV3Service:ApiV3Service,
-  ) {
+  constructor() {
     this.detect();
   }
 

frontend/src/app/core/current-user/current-user.module.ts

@@ -1,4 +1,4 @@
-import { Injector, NgModule } from '@angular/core';
+import { Injector, NgModule, inject } from '@angular/core';
 
 import { CurrentUserService } from './current-user.service';
 import { CurrentUserStore } from './current-user.store';
@@ -35,7 +35,9 @@ export function bootstrapModule(injector:Injector):void {
   ],
 })
 export class CurrentUserModule {
-  constructor(injector:Injector) {
+  constructor() {
+    const injector = inject(Injector);
+
     bootstrapModule(injector);
   }
 }

frontend/src/app/core/current-user/current-user.query.ts

@@ -1,11 +1,17 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Query } from '@datorama/akita';
 import { CurrentUserState, CurrentUserStore } from './current-user.store';
 
 @Injectable()
 export class CurrentUserQuery extends Query<CurrentUserState> {
-  constructor(protected store:CurrentUserStore) {
+  protected store:CurrentUserStore;
+
+  constructor() {
+    const store = inject(CurrentUserStore);
+
     super(store);
+
+    this.store = store;
   }
 
   isLoggedIn$ = this.select((state) => !!state.loggedIn);

frontend/src/app/core/current-user/current-user.service.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { ApiV3ListFilter } from 'core-app/core/apiv3/paths/apiv3-list-resource.interface';
 import { CapabilitiesResourceService } from 'core-app/core/state/capabilities/capabilities.service';
@@ -38,12 +38,12 @@ import { CurrentUser, CurrentUserStore } from './current-user.store';
 
 @Injectable({ providedIn: 'root' })
 export class CurrentUserService {
-  constructor(
-    private apiV3Service:ApiV3Service,
-    private currentUserStore:CurrentUserStore,
-    private currentUserQuery:CurrentUserQuery,
-    private capabilitiesService:CapabilitiesResourceService,
-  ) {
+  private apiV3Service = inject(ApiV3Service);
+  private currentUserStore = inject(CurrentUserStore);
+  private currentUserQuery = inject(CurrentUserQuery);
+  private capabilitiesService = inject(CapabilitiesResourceService);
+
+  constructor() {
     this.setupLegacyDataListeners();
   }
 

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

@@ -26,18 +26,17 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import moment, { Moment } from 'moment-timezone';
 import { outputChronicDuration } from '../../shared/helpers/chronic_duration';
 
 @Injectable({ providedIn: 'root' })
 export class TimezoneService {
-  constructor(
-    readonly configurationService:ConfigurationService,
-    readonly I18n:I18nService,
-  ) { }
+  readonly configurationService = inject(ConfigurationService);
+  readonly I18n = inject(I18nService);
+
 
   /**
    * Returns the user's configured timezone or guesses it through moment

frontend/src/app/core/days/weekday.service.ts

@@ -26,10 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  Injectable,
-  Injector,
-} from '@angular/core';
+import { Injectable, Injector, inject } from '@angular/core';
 import moment, { Moment } from 'moment';
 import {
   take,
@@ -45,14 +42,12 @@ import {
 
 @Injectable({ providedIn: 'root' })
 export class WeekdayService {
+  readonly injector = inject(Injector);
+
   @InjectField() weekdaysService:WeekdayResourceService;
 
   private weekdays:IWeekday[];
 
-  constructor(
-    readonly injector:Injector,
-  ) {}
-
   /**
    * @param date The iso day number (1-7) or a date instance
    * @return {boolean} whether the given iso day is working or not

frontend/src/app/core/enterprise/banners.service.ts

@@ -26,18 +26,20 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Inject, Injectable, DOCUMENT } from '@angular/core';
+import { Injectable, DOCUMENT, inject } from '@angular/core';
 import { enterpriseEditionUrl } from 'core-app/core/setup/globals/constants.const';
 import { ConfigurationService } from 'core-app/core/config/configuration.service';
 
 @Injectable({ providedIn: 'root' })
 export class BannersService {
+  protected documentElement = inject<Document>(DOCUMENT);
+  protected configuration = inject(ConfigurationService);
+
   private readonly _bannersHidden:boolean = true;
 
-  constructor(
-    @Inject(DOCUMENT) protected documentElement:Document,
-    protected configuration:ConfigurationService,
-  ) {
+  constructor() {
+    const documentElement = this.documentElement;
+
     this._bannersHidden = documentElement.body.classList.contains('ee-banners-hidden');
   }
 

frontend/src/app/core/global_search/input/global-search-input.component.ts

@@ -1,16 +1,5 @@
 
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostListener,
-  Input,
-  OnDestroy,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnDestroy, ViewChild, ViewEncapsulation, inject } from '@angular/core';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { first, map, switchMap, tap } from 'rxjs/operators';
 import { GlobalSearchService } from 'core-app/core/global_search/services/global-search.service';
@@ -74,6 +63,18 @@ interface SearchResultItems {
   standalone: false,
 })
 export class GlobalSearchInputComponent implements AfterViewInit, OnDestroy {
+  readonly elementRef = inject(ElementRef);
+  readonly I18n = inject(I18nService);
+  readonly apiV3Service = inject(ApiV3Service);
+  readonly pathHelperService = inject(PathHelperService);
+  readonly halResourceService = inject(HalResourceService);
+  readonly globalSearchService = inject(GlobalSearchService);
+  readonly currentProjectService = inject(CurrentProjectService);
+  readonly deviceService = inject(DeviceService);
+  readonly cdRef = inject(ChangeDetectorRef);
+  readonly halNotification = inject(HalResourceNotificationService);
+  readonly recentItemsService = inject(RecentItemsService);
+
   @Input() public placeholder:string;
 
   @ViewChild('btn', { static: true }) btn:ElementRef;
@@ -131,19 +132,7 @@ export class GlobalSearchInputComponent implements AfterViewInit, OnDestroy {
     search: this.I18n.t('js.autocompleter.search'),
   };
 
-  constructor(
-    readonly elementRef:ElementRef,
-    readonly I18n:I18nService,
-    readonly apiV3Service:ApiV3Service,
-    readonly pathHelperService:PathHelperService,
-    readonly halResourceService:HalResourceService,
-    readonly globalSearchService:GlobalSearchService,
-    readonly currentProjectService:CurrentProjectService,
-    readonly deviceService:DeviceService,
-    readonly cdRef:ChangeDetectorRef,
-    readonly halNotification:HalResourceNotificationService,
-    readonly recentItemsService:RecentItemsService,
-  ) {
+  constructor() {
     populateInputsFromDataset(this);
   }