NIFI-15700, NIFI-15701, NIFI-15702, NIFI-15703: Upgrade Nx 22, Angular 21, NgRx 21, TypeScript

[rfellows]

Summary: Upgrade Nx 22, Angular 21, NgRx 21, TypeScript

NIFI-15700
NIFI-15701
NIFI-15702
NIFI-15703

Description

Upgrades the NiFi frontend monorepo to Angular 21, Nx 22, NgRx 21, and related tooling to keep dependencies current, improve performance, and align with the latest Angular ecosystem. The work includes dependency bumps, Angular 21 migration steps, control flow migration, TypeScript and Jest config updates, and security-related dependency changes.

What's Changed

Dependency upgrades

• Angular 20.3.17 → 21.2.4 (core, CDK, Material, CLI, ESLint)
• NgRx 20.0.1 → 21.0.1 (effects, operators, router-store, store, store-devtools)
• Nx 21.6.10 → 22.5.4 (angular, eslint, jest, workspace)
• TypeScript 5.9.2 → 5.9.3
• Jest 29.7.0 → 30.3.0, jest-preset-angular 14.6.1 → 16.0.0
• zone.js 0.15.0 → 0.16.1
• marked ^15.0.0 → ^17.0.0, ngx-markdown ^20.1.0 → ^21.1.0
• ngx-skeleton-loader ^10.0.0 → ^12.0.0
• ng-packagr 20.3.2 → 21.1.0
• Added jest-util 30.3.0
• Removed lodash-es override
• Added undici override (>=7.24.0) for CVE fix

Angular 21 migration

• Added provideZoneChangeDetection() to all 5 app bootstrap files (nifi, nifi-registry, nifi-jolt-transform-ui, standard-content-viewer, update-attribute)
• Migrated 5 templates from *ngIf/*ngFor to @if/@for (import-from-registry, flowfile-dialog, fetch-parameter-provider-parameters, combo-editor, provenance-event-dialog)
• Simplified @let usage in import-from-registry and fetch-parameter-provider-parameters
• Widened @HostListener handler types in canvas.component.ts for Angular 21 type-checking (strictDomEventTypes uses incorrect types for keyup.Enter style outputs angular/angular#40778)
• Updated ResizableComponent with provideZoneChangeDetection import

TypeScript configuration

• tsconfig.base.json: target → es2023, module → esnext, removed emitDecoratorMetadata
• App/lib tsconfig.json: added "module": "preserve" and "moduleResolution": "bundler"
• tsconfig.spec.json: module → preserve, added moduleResolution: bundler and isolatedModules: true

Jest configuration

• Switched all jest.config.ts files from export default to module.exports for Jest 30 compatibility

Nx configuration

• nx.json: removed duplicate defaultBase entry

Key Features

• Angular 21: Uses provideZoneChangeDetection() and new control flow syntax (@if, @for, @let) for better performance and DX.
• Control flow migration: Manually migrated templates where the schematic failed due to duplicate ng-template names; inlined @else content to avoid duplicate refs.
• TypeScript: Updated to ES2023 target and bundler-oriented module settings for modern tooling.
• Jest 30: Updated Jest config to module.exports for compatibility with the new Jest/ts-node setup.
• Security: Added undici override (>=7.24.0) to address CVE.
• Type widening workaround: @HostListener handlers in canvas.component.ts use Event instead of KeyboardEvent/ClipboardEvent to satisfy Angular 21's stricter host binding type-checking (strictDomEventTypes uses incorrect types for keyup.Enter style outputs angular/angular#40778).

[scottyaslan]

Reviewing...