apache · rfellows · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Storage, ThemingService } from '@nifi/shared';
 
 @Component({
@@ -25,12 +25,12 @@ import { Storage, ThemingService } from '@nifi/shared';
     standalone: false
 })
 export class AppComponent {
+    private storage = inject(Storage);
+    private themingService = inject(ThemingService);
+
     title = 'nifi-jolt-transform-json-ui';
 
-    constructor(
-        private storage: Storage,
-        private themingService: ThemingService
-    ) {
+    constructor() {
         let theme = this.storage.getItem('theme');
 
         // Initially check if dark mode is enabled on system

diff --git a/...sform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts b/...sform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts
@@ -16,7 +16,7 @@
  */
 
 import { js_beautify } from 'js-beautify';
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { NiFiJoltTransformJsonUiState } from '../../../state';
 import {
@@ -99,6 +99,10 @@ const JS_BEAUTIFY_OPTIONS = {
     standalone: false
 })
 export class JoltTransformJsonUi implements OnDestroy {
+    private formBuilder = inject(FormBuilder);
+    private store = inject<Store<NiFiJoltTransformJsonUiState>>(Store);
+    private mapTableHelperService = inject(MapTableHelperService);
+
     private processorId$ = this.store.selectSignal(selectProcessorIdFromRoute);
     private revision$ = this.store.selectSignal(selectRevisionFromRoute);
     private clientId$ = this.store.selectSignal(selectClientIdFromRoute);
@@ -163,11 +167,7 @@ export class JoltTransformJsonUi implements OnDestroy {
     createNew: (existingEntries: string[]) => Observable<MapTableEntry> =
         this.mapTableHelperService.createNewEntry('Attribute');
 
-    constructor(
-        private formBuilder: FormBuilder,
-        private store: Store<NiFiJoltTransformJsonUiState>,
-        private mapTableHelperService: MapTableHelperService
-    ) {
+    constructor() {
         // Select the processor id from the query params and GET processor details
         this.store
             .select(selectProcessorIdFromRoute)

diff --git a/...ansform-ui/src/app/pages/jolt-transform-json-ui/service/jolt-transform-json-ui.service.ts b/...ansform-ui/src/app/pages/jolt-transform-json-ui/service/jolt-transform-json-ui.service.ts
@@ -15,17 +15,17 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SavePropertiesRequest } from '../state/jolt-transform-json-property';
 import { ValidateJoltSpecRequest } from '../state/jolt-transform-json-validate';
 
 @Injectable({ providedIn: 'root' })
 export class JoltTransformJsonUiService {
-    private static readonly API: string = 'api';
+    private httpClient = inject(HttpClient);
 
-    constructor(private httpClient: HttpClient) {}
+    private static readonly API: string = 'api';
 
     getProcessorDetails(id: string): Observable<any> {
         return this.httpClient.get(`${JoltTransformJsonUiService.API}/standard/processor/details?processorId=${id}`);

diff --git a/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.effects.ts b/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.effects.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as JoltTransformJsonUiActions from './jolt-transform-json-processor-details.actions';
 import { JoltTransformJsonUiService } from '../../service/jolt-transform-json-ui.service';
@@ -26,10 +26,8 @@ import { ProcessorDetails } from './index';
 
 @Injectable()
 export class JoltTransformJsonProcessorDetailsEffects {
-    constructor(
-        private actions$: Actions,
-        private joltTransformJsonUiService: JoltTransformJsonUiService
-    ) {}
+    private actions$ = inject(Actions);
+    private joltTransformJsonUiService = inject(JoltTransformJsonUiService);
 
     loadProcessorDetails$ = createEffect(() =>
         this.actions$.pipe(

diff --git a/...nsform-json-ui/state/jolt-transform-json-property/jolt-transform-json-property.effects.ts b/...nsform-json-ui/state/jolt-transform-json-property/jolt-transform-json-property.effects.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as JoltTransformJsonUiActions from './jolt-transform-json-property.actions';
 import { JoltTransformJsonUiService } from '../../service/jolt-transform-json-ui.service';
@@ -29,11 +29,9 @@ import { NiFiJoltTransformJsonUiState } from '../../../../state';
 
 @Injectable()
 export class JoltTransformJsonPropertyEffects {
-    constructor(
-        private actions$: Actions,
-        private store: Store<NiFiJoltTransformJsonUiState>,
-        private joltTransformJsonUiService: JoltTransformJsonUiService
-    ) {}
+    private actions$ = inject(Actions);
+    private store = inject<Store<NiFiJoltTransformJsonUiState>>(Store);
+    private joltTransformJsonUiService = inject(JoltTransformJsonUiService);
 
     saveProperties$ = createEffect(() =>
         this.actions$.pipe(

diff --git a/...form-json-ui/state/jolt-transform-json-transform/jolt-transform-json-transform.effects.ts b/...form-json-ui/state/jolt-transform-json-transform/jolt-transform-json-transform.effects.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as JoltTransformJsonUiActions from './jolt-transform-json-transform.actions';
 import { JoltTransformJsonUiService } from '../../service/jolt-transform-json-ui.service';
@@ -26,10 +26,8 @@ import { TransformJoltSpecRequest } from './index';
 
 @Injectable()
 export class JoltTransformJsonTransformEffects {
-    constructor(
-        private actions$: Actions,
-        private joltTransformJsonUiService: JoltTransformJsonUiService
-    ) {}
+    private actions$ = inject(Actions);
+    private joltTransformJsonUiService = inject(JoltTransformJsonUiService);
 
     transformJoltSpec$ = createEffect(() =>
         this.actions$.pipe(

diff --git a/...nsform-json-ui/state/jolt-transform-json-validate/jolt-transform-json-validate.effects.ts b/...nsform-json-ui/state/jolt-transform-json-validate/jolt-transform-json-validate.effects.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as JoltTransformJsonUiActions from './jolt-transform-json-validate.actions';
 import { JoltTransformJsonUiService } from '../../service/jolt-transform-json-ui.service';
@@ -29,11 +29,9 @@ import { resetJoltTransformJsonPropertyState } from '../jolt-transform-json-prop
 
 @Injectable()
 export class JoltTransformJsonValidateEffects {
-    constructor(
-        private actions$: Actions,
-        private store: Store<NiFiJoltTransformJsonUiState>,
-        private joltTransformJsonUiService: JoltTransformJsonUiService
-    ) {}
+    private actions$ = inject(Actions);
+    private store = inject<Store<NiFiJoltTransformJsonUiState>>(Store);
+    private joltTransformJsonUiService = inject(JoltTransformJsonUiService);
 
     validateJoltSpec$ = createEffect(() =>
         this.actions$.pipe(

diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/tsconfig.app.json b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/tsconfig.app.json
@@ -1,9 +1,9 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../out-tsc/app",
-        "types": []
+        "types": [],
+        "moduleResolution": "bundler"
     },
     "files": ["src/main.ts"],
     "include": ["src/**/*.d.ts"]

diff --git a/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-registry/src/app/app.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ThemingService, Storage } from '@nifi/shared';
 
 @Component({
@@ -25,12 +25,12 @@ import { ThemingService, Storage } from '@nifi/shared';
     standalone: false
 })
 export class AppComponent {
+    private storage = inject(Storage);
+    private themingService = inject(ThemingService);
+
     title = 'nifi-registry';
 
-    constructor(
-        private storage: Storage,
-        private themingService: ThemingService
-    ) {
+    constructor() {
         let theme = this.storage.getItem('theme');
 
         // Initially check if dark mode is enabled on system

diff --git a/...c/main/frontend/apps/nifi-registry/src/app/pages/resources/feature/resources.component.ts b/...c/main/frontend/apps/nifi-registry/src/app/pages/resources/feature/resources.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
     selectDropletIdFromRoute,
     selectDroplets,
@@ -45,6 +45,9 @@ import { ErrorContextKey } from '../../../state/error';
     standalone: false
 })
 export class ResourcesComponent implements OnInit {
+    private store = inject(Store);
+    private nifiCommon = inject(NiFiCommon);
+
     droplets$: Observable<Droplet[]> = this.store.select(selectDroplets).pipe(takeUntilDestroyed());
     buckets$: Observable<Bucket[]> = this.store.select(selectBuckets).pipe(takeUntilDestroyed());
     buckets: Bucket[] = [];
@@ -77,11 +80,6 @@ export class ResourcesComponent implements OnInit {
     dropletsState$ = this.store.select(selectDropletState);
     selectedDropletId$ = this.store.select(selectDropletIdFromRoute);
 
-    constructor(
-        private store: Store,
-        private nifiCommon: NiFiCommon
-    ) {}
-
     ngOnInit(): void {
         this.store.dispatch(loadDroplets());
         this.store.dispatch(loadBuckets());

diff --git a/...c/app/pages/resources/feature/ui/delete-droplet-dialog/delete-droplet-dialog.component.ts b/...c/app/pages/resources/feature/ui/delete-droplet-dialog/delete-droplet-dialog.component.ts
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, Inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, inject } from '@angular/core';
+
 import { CloseOnEscapeDialog } from '@nifi/shared';
 import { Store } from '@ngrx/store';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -32,19 +32,21 @@ interface DeleteDropletDialogData {
 
 @Component({
     selector: 'app-delete-droplet-dialog',
-    imports: [CommonModule, MatDialogModule, MatButtonModule, ContextErrorBanner],
+    imports: [MatDialogModule, MatButtonModule, ContextErrorBanner],
     templateUrl: './delete-droplet-dialog.component.html',
     styleUrl: './delete-droplet-dialog.component.scss'
 })
 export class DeleteDropletDialogComponent extends CloseOnEscapeDialog {
+    data = inject<DeleteDropletDialogData>(MAT_DIALOG_DATA);
+    private store = inject(Store);
+
     protected readonly ErrorContextKey = ErrorContextKey;
     droplet: Droplet;
 
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: DeleteDropletDialogData,
-        private store: Store
-    ) {
+    constructor() {
         super();
+        const data = this.data;
+
         this.droplet = data.droplet;
     }
 

diff --git a/...src/app/pages/resources/feature/ui/droplet-table-filter/droplet-table-filter.component.ts b/...src/app/pages/resources/feature/ui/droplet-table-filter/droplet-table-filter.component.ts
@@ -16,7 +16,6 @@
  */
 
 import { AfterViewInit, Component, DestroyRef, EventEmitter, inject, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -43,11 +42,13 @@ export interface DropletTableFilterContext extends DropletTableFilterArgs {
 
 @Component({
     selector: 'droplet-table-filter',
-    imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatInputModule, MatButtonModule],
+    imports: [ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatInputModule, MatButtonModule],
     templateUrl: './droplet-table-filter.component.html',
     styleUrl: './droplet-table-filter.component.scss'
 })
 export class DropletTableFilterComponent implements AfterViewInit {
+    private formBuilder = inject(FormBuilder);
+
     filterForm: FormGroup;
     private _initialFilterColumn = 'name';
     private _filterableColumns: DropletTableFilterColumn[] = [];
@@ -94,7 +95,7 @@ export class DropletTableFilterComponent implements AfterViewInit {
 
     @Output() filterChanged: EventEmitter<DropletTableFilterContext> = new EventEmitter<DropletTableFilterContext>();
 
-    constructor(private formBuilder: FormBuilder) {
+    constructor() {
         this.filterForm = this.formBuilder.group({
             filterTerm: '',
             filterColumn: this._initialFilterColumn || 'name',

diff --git a/...fi-registry/src/app/pages/resources/feature/ui/droplet-table/droplet-table.component.html b/...fi-registry/src/app/pages/resources/feature/ui/droplet-table/droplet-table.component.html
@@ -126,9 +126,11 @@
                         (click)="select(row)"
                         [class.selected]="isSelected(row)"></tr>
                 </table>
-                <div class="py-5" *ngIf="dataSource.data.length === 0 && buckets.length !== 0">
-                    <p class="text-center">There are no resources to display.</p>
-                </div>
+                @if (dataSource.data.length === 0 && buckets.length !== 0) {
+                    <div class="py-5">
+                        <p class="text-center">There are no resources to display.</p>
+                    </div>
+                }
             </div>
         </div>
     </div>

diff --git a/...nifi-registry/src/app/pages/resources/feature/ui/droplet-table/droplet-table.component.ts b/...nifi-registry/src/app/pages/resources/feature/ui/droplet-table/droplet-table.component.ts
@@ -15,8 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Droplet } from 'apps/nifi-registry/src/app/state/droplets';
 import { MatSortModule, Sort } from '@angular/material/sort';
@@ -34,11 +33,14 @@ import {
 
 @Component({
     selector: 'droplet-table',
-    imports: [CommonModule, MatTableModule, MatSortModule, MatMenuModule, MatButtonModule, MatButtonModule],
+    imports: [MatTableModule, MatSortModule, MatMenuModule, MatButtonModule, MatButtonModule],
     templateUrl: './droplet-table.component.html',
     styleUrl: './droplet-table.component.scss'
 })
 export class DropletTableComponent implements OnInit {
+    private nifiCommon = inject(NiFiCommon);
+    private store = inject(Store);
+
     @Input() buckets: Bucket[] = [];
     @Input() dataSource: MatTableDataSource<Droplet> = new MatTableDataSource<Droplet>();
     @Input() selectedId: string | null = null;
@@ -59,11 +61,6 @@ export class DropletTableComponent implements OnInit {
         direction: 'asc'
     };
 
-    constructor(
-        private nifiCommon: NiFiCommon,
-        private store: Store
-    ) {}
-
     ngOnInit(): void {
         this.sortData(this.sort);
     }