feat(*): run @angular/core:inject migration

to remove all constructor injectables

Author: michaelwittwer

apps/styleguide/src/app/app.component.ts

@@ -18,7 +18,9 @@ export class AppComponent {
 
   private readonly logger: Logger = inject(LoggerService).getInstance('AppComponent')
 
-  constructor(clientIdService: ClientIdService) {
+  constructor() {
+    const clientIdService = inject(ClientIdService)
+
     this.logger.debug('constructor()')
     this.logger.debug('clientId', clientIdService.clientId)
   }

apps/styleguide/src/routes/sg-button/sg-button.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, OnDestroy, Optional, DOCUMENT } from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnDestroy, DOCUMENT, inject } from '@angular/core'
 import { ButtonComponent } from '@shiftcode/ngx-components'
 
 @Component({
@@ -17,11 +17,10 @@ export class SgButtonComponent implements OnDestroy {
 
   isToggled = false
 
-  private document?: Document
+  private readonly document = inject(DOCUMENT, { optional: true })
   private intervalId: any
 
-  constructor(@Optional() @Inject(DOCUMENT) document?: any) {
-    this.document = document
+  constructor() {
     this.intervalId = setInterval(this.updateActiveEl, 100)
   }
 
@@ -31,9 +30,7 @@ export class SgButtonComponent implements OnDestroy {
 
   private updateActiveEl = (): string | null => {
     return (this.activeEl =
-      (this.document &&
-        this.document.activeElement &&
-        `${this.document.activeElement.tagName}#${this.document.activeElement.id}`) ||
+      (this.document?.activeElement && `${this.document.activeElement.tagName}#${this.document.activeElement.id}`) ||
       null)
   }
 }

apps/styleguide/src/routes/sg-tooltip/sg-tooltip.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, Inject, Optional } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { TOOLTIP_DEFAULT_OPTIONS, TooltipDirective, TooltipOptions, TooltipPosition } from '@shiftcode/ngx-components'
 import { LoggerService } from '@shiftcode/ngx-core'
@@ -30,7 +30,9 @@ export class SgTooltipComponent {
   readonly positionCtrl = new FormControl<TooltipPosition>(this.tooltipPositions[0], { nonNullable: true })
   private readonly logger = inject(LoggerService).getInstance('SgTooltipComponent')
 
-  constructor(@Optional() @Inject(TOOLTIP_DEFAULT_OPTIONS) opts: TooltipOptions) {
+  constructor() {
+    const opts = inject<TooltipOptions>(TOOLTIP_DEFAULT_OPTIONS, { optional: true })
+
     this.logger.debug('tooltipDefaultOptions', opts)
   }
 }

libs/components/src/lib/click-outside/click-outside.directive.ts

@@ -13,8 +13,7 @@ export class ClickOutsideDirective implements OnDestroy, OnChanges {
 
   private subscription?: Subscription
   private readonly element: HTMLElement = inject(ElementRef).nativeElement
-
-  constructor(private uiEventService: UIEventService) {}
+  private readonly uiEventService = inject(UIEventService)
 
   ngOnChanges(): void {
     // as there is only one input, ngOnChanges is only called when `isActive` changes

libs/components/src/lib/insert-view-ref/insert-view-ref.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, ViewContainerRef, ViewRef } from '@angular/core'
+import { Directive, Input, ViewContainerRef, ViewRef, inject } from '@angular/core'
 
 /**
  * Directive to insert a viewRef to the template.
@@ -15,6 +15,8 @@ import { Directive, Input, ViewContainerRef, ViewRef } from '@angular/core'
  */
 @Directive({ selector: '[scInsertViewRef]', standalone: true })
 export class InsertViewRefDirective {
+  private readonly container = inject(ViewContainerRef)
+
   @Input()
   set scInsertViewRef(val: ViewRef | null | undefined) {
     this.container.clear()
@@ -27,8 +29,6 @@ export class InsertViewRefDirective {
     return this.container.length > 0
   }
 
-  constructor(private container: ViewContainerRef) {}
-
   /**
    * Inserts a view into the container.
    * @throws when a view is already attached

libs/components/src/lib/smooth-height/smooth-height.component.ts

@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations'
-import { Component, ElementRef, HostBinding, Input, OnChanges } from '@angular/core'
+import { Component, ElementRef, HostBinding, Input, OnChanges, inject } from '@angular/core'
 
 /**
  * Standalone Component to smoothly animate height changes.
@@ -25,8 +25,7 @@ export class SmoothHeightComponent implements OnChanges {
   trigger: any
 
   private startHeight: number
-
-  constructor(private element: ElementRef) {}
+  private readonly element = inject(ElementRef)
 
   @HostBinding('@grow')
   get grow() {

libs/components/src/lib/svg-animate/svg-animate.directive.ts

@@ -1,5 +1,5 @@
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion'
-import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnInit, inject } from '@angular/core'
 
 /**
  * Standalone Directive to animate SVG parts by calling beginElement method
@@ -34,13 +34,9 @@ export class SvgAnimateDirective implements OnChanges, AfterViewInit, OnInit {
     return this._withInitAnimation
   }
 
-  readonly element: HTMLElement
+  readonly element = inject(ElementRef).nativeElement
   private _withInitAnimation = false
 
-  constructor(elementRef: ElementRef<HTMLElement>) {
-    this.element = elementRef.nativeElement
-  }
-
   ngOnInit() {
     if (!this.withInitAnimation) {
       // set initial state without animation

libs/components/src/lib/svg/svg-registry.service.ts

@@ -9,6 +9,7 @@ import { firstValueFrom } from 'rxjs'
 export class SvgRegistry {
   private readonly cache = new Map<string, Promise<SVGElement>>()
   private readonly document = inject(DOCUMENT)
+  private readonly httpClient = inject(HttpClient)
 
   /**
    * Creates a DOM element from the given SVG string, and adds default attributes.
@@ -39,8 +40,6 @@ export class SvgRegistry {
     return svg
   }
 
-  constructor(private httpClient: HttpClient) {}
-
   /**
    * Returns a Promise that produces the icon (as an <svg> DOM element) from the given URL.
    * The response from the URL may be cached so this will not always cause an HTTP request, but

libs/components/src/lib/textarea-autosize/textarea-autosize.directive.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef, HostBinding, inject, Inject, Input, OnDestroy } from '@angular/core'
+import { AfterViewInit, Directive, ElementRef, HostBinding, inject, Input, OnDestroy } from '@angular/core'
 import { FormControlDirective } from '@angular/forms'
 import { LoggerService, ResizeService } from '@shiftcode/ngx-core'
 import { Logger } from '@shiftcode/logger'
@@ -24,14 +24,12 @@ export class TextareaAutosizeDirective implements AfterViewInit, OnDestroy {
 
   readonly element: HTMLTextAreaElement = inject(ElementRef).nativeElement
 
+  private readonly formControlDir = inject(FormControlDirective)
   private readonly logger: Logger = inject(LoggerService).getInstance('TextareaAutosizeDirective')
   private readonly onDestroy = new Subject<void>()
 
-  constructor(
-    resizeService: ResizeService,
-    @Inject(FormControlDirective) private readonly formControlDir: FormControlDirective,
-  ) {
-    resizeService.observe(this.element).pipe(takeUntil(this.onDestroy)).subscribe(this.resize.bind(this))
+  constructor() {
+    inject(ResizeService).observe(this.element).pipe(takeUntil(this.onDestroy)).subscribe(this.resize.bind(this))
   }
 
   ngAfterViewInit() {

libs/components/src/lib/tooltip/tooltip.component.ts

@@ -1,7 +1,15 @@
 import { AnimationEvent, trigger } from '@angular/animations'
 import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay'
 import { NgClass } from '@angular/common'
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  ViewChild,
+  inject,
+} from '@angular/core'
 import { Observable, Subject } from 'rxjs'
 import { TooltipNotchPosition, TooltipPosition, TooltipPositionSimple } from './tooltip-position.type'
 import { TooltipVisibility } from './tooltip-visibility.type'
@@ -75,7 +83,7 @@ export class TooltipComponent implements OnDestroy {
   /** Subject for notifying that the tooltip has been hidden from the view */
   private readonly onHide = new Subject<void>()
 
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+  private readonly changeDetectorRef = inject(ChangeDetectorRef)
 
   /**
    * Shows the tooltip with an animation originating from the provided origin