NIFI-15700, NIFI-15701, NIFI-15702, NIFI-15703: Upgrade Nx 22, Angular 21, NgRx 21, TypeScript (#11018)

Upgrade the nifi-frontend workspace to Nx 22.5.4, Angular 21.1.6,
Angular Material/CDK 21.1.6, and NgRx 21.0.1. This combines the Nx,
Angular, and NgRx upgrades as the Nx migration required all framework
upgrades to land together.

Key changes:
- Nx 21 -> 22.5.4, Angular 20 -> 21.1.6, NgRx 20 -> 21.0.1
- TypeScript 5.9.2 -> 5.9.3, Jest 29 -> 30.3.0, Zone.js 0.15 -> 0.16.1
- Third-party upgrades: ngx-markdown 21, ngx-skeleton-loader 12, marked 17
- Fix @HostListener type signatures for Angular 21 stricter typing
- Remove emitDecoratorMetadata (unused, all DI uses inject())
- Fix migration-introduced lint issues (prettier formatting, require -> import type)
- Add eslint-disable for resizable component attribute selector
- Add ng-mocks Angular 21 peer dep override
- Remove redundant lodash-es override

s

Author: rfellows

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/jest.config.ts

@@ -48,4 +48,4 @@ const config: Config = {
     transformIgnorePatterns: []
 };
 
-export default config;
+module.exports = config;

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/main.ts

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
+import { provideZoneChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic()
-    .bootstrapModule(AppModule)
+    .bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()] })
     .catch((err) => console.error(err));

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/tsconfig.json

@@ -7,7 +7,9 @@
         "noPropertyAccessFromIndexSignature": true,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
-        "useDefineForClassFields": false
+        "useDefineForClassFields": false,
+        "module": "preserve",
+        "moduleResolution": "bundler"
     },
     "angularCompilerOptions": {
         "enableI18nLegacyMessageIdFormat": false,

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/tsconfig.spec.json

@@ -1,11 +1,12 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../out-tsc/spec",
         "types": ["jest"],
-        "module": "ES2022",
-        "esModuleInterop": true
+        "module": "preserve",
+        "esModuleInterop": true,
+        "moduleResolution": "bundler",
+        "isolatedModules": true
     },
     "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

nifi-frontend/src/main/frontend/apps/nifi-registry/jest.config.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-export default {
+module.exports = {
     displayName: 'NiFi Registry',
     clearMocks: true,
     coverageDirectory: '../../coverage/apps/nifi-registry',

nifi-frontend/src/main/frontend/apps/nifi-registry/src/main.ts

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
+import { provideZoneChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 
 platformBrowserDynamic()
-    .bootstrapModule(AppModule)
+    .bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()] })
     .catch((err) => console.error(err));

nifi-frontend/src/main/frontend/apps/nifi-registry/tsconfig.json

@@ -7,7 +7,9 @@
         "noPropertyAccessFromIndexSignature": true,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
-        "useDefineForClassFields": false
+        "useDefineForClassFields": false,
+        "module": "preserve",
+        "moduleResolution": "bundler"
     },
     "extends": "../../tsconfig.base.json",
     "angularCompilerOptions": {

nifi-frontend/src/main/frontend/apps/nifi-registry/tsconfig.spec.json

@@ -1,11 +1,12 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
         "outDir": "../../out-tsc/spec",
         "types": ["jest"],
-        "module": "ES2022",
-        "esModuleInterop": true
+        "module": "preserve",
+        "esModuleInterop": true,
+        "moduleResolution": "bundler",
+        "isolatedModules": true
     },
     "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }

nifi-frontend/src/main/frontend/apps/nifi/jest.config.ts

@@ -48,4 +48,4 @@ const config: Config = {
     transformIgnorePatterns: []
 };
 
-export default config;
+module.exports = config;

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts

@@ -648,7 +648,7 @@ export class Canvas implements OnInit, OnDestroy {
         this.canvasView.destroy();
     }
 
-    private processKeyboardEvents(event: KeyboardEvent | ClipboardEvent): boolean {
+    private processKeyboardEvents(event: Event): boolean {
         const source = event.target as any;
         let searchFieldIsEventSource = false;
         if (source) {
@@ -658,7 +658,7 @@ export class Canvas implements OnInit, OnDestroy {
         return this.dialog.openDialogs.length === 0 && !searchFieldIsEventSource;
     }
 
-    private executeAction(actionId: string, event: KeyboardEvent, bypassCondition?: boolean): boolean {
+    private executeAction(actionId: string, event: Event, bypassCondition?: boolean): boolean {
         if (this.processKeyboardEvents(event)) {
             const selection = this.canvasUtils.getSelection();
             const canvasAction = this.canvasActionsService.getAction(actionId);
@@ -672,37 +672,39 @@ export class Canvas implements OnInit, OnDestroy {
         return false;
     }
 
+    // Typed as Event (not KeyboardEvent) because Angular 21's typeCheckHostBindings
+    // infers $event as Event for key-specific bindings (angular/angular#40778).
     @HostListener('window:keydown.delete', ['$event'])
-    handleKeyDownDelete(event: KeyboardEvent) {
+    handleKeyDownDelete(event: Event) {
         this.executeAction('delete', event);
     }
 
     @HostListener('window:keydown.backspace', ['$event'])
-    handleKeyDownBackspace(event: KeyboardEvent) {
+    handleKeyDownBackspace(event: Event) {
         this.executeAction('delete', event);
     }
 
     @HostListener('window:keydown.control.r', ['$event'])
-    handleKeyDownCtrlR(event: KeyboardEvent) {
+    handleKeyDownCtrlR(event: Event) {
         if (this.executeAction('refresh', event, true)) {
             event.preventDefault();
         }
     }
 
     @HostListener('window:keydown.meta.r', ['$event'])
-    handleKeyDownMetaR(event: KeyboardEvent) {
+    handleKeyDownMetaR(event: Event) {
         if (this.executeAction('refresh', event, true)) {
             event.preventDefault();
         }
     }
 
     @HostListener('window:keydown.escape', ['$event'])
-    handleKeyDownEsc(event: KeyboardEvent) {
+    handleKeyDownEsc(event: Event) {
         this.executeAction('leaveGroup', event);
     }
 
     @HostListener('window:keydown.control.c', ['$event'])
-    handleKeyDownCtrlC(event: KeyboardEvent) {
+    handleKeyDownCtrlC(event: Event) {
         if (!this.canvasUtils.isClipboardAvailable()) {
             return;
         }
@@ -713,20 +715,20 @@ export class Canvas implements OnInit, OnDestroy {
     }
 
     @HostListener('window:keydown.meta.c', ['$event'])
-    handleKeyDownMetaC(event: KeyboardEvent) {
+    handleKeyDownMetaC(event: Event) {
         if (this.executeAction('copy', event)) {
             event.preventDefault();
         }
     }
 
     @HostListener('window:paste', ['$event'])
-    handlePasteEvent(event: ClipboardEvent) {
+    handlePasteEvent(event: Event) {
         if (!this.processKeyboardEvents(event) || !this.canvasUtils.isPastable()) {
             // don't attempt to paste flow content
             return;
         }
 
-        const textToPaste = event.clipboardData?.getData('text/plain');
+        const textToPaste = (event as ClipboardEvent).clipboardData?.getData('text/plain');
         if (textToPaste) {
             const copyResponse: CopyResponseEntity | null = this.toCopyResponseEntity(textToPaste);
             if (copyResponse) {
@@ -743,14 +745,14 @@ export class Canvas implements OnInit, OnDestroy {
     }
 
     @HostListener('window:keydown.control.a', ['$event'])
-    handleKeyDownCtrlA(event: KeyboardEvent) {
+    handleKeyDownCtrlA(event: Event) {
         if (this.executeAction('selectAll', event)) {
             event.preventDefault();
         }
     }
 
     @HostListener('window:keydown.meta.a', ['$event'])
-    handleKeyDownMetaA(event: KeyboardEvent) {
+    handleKeyDownMetaA(event: Event) {
         if (this.executeAction('selectAll', event)) {
             event.preventDefault();
         }