Angular 18 migration

ui-ngx/package.json

@@ -14,22 +14,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.12",
+    "@angular/animations": "^18.2.6",
     "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
+    "@angular/common": "^18.2.6",
+    "@angular/compiler": "^18.2.6",
+    "@angular/core": "^18.2.6",
     "@angular/flex-layout": "^15.0.0-beta.42",
-    "@angular/forms": "^17.3.12",
+    "@angular/forms": "^18.2.6",
     "@angular/material": "^17.3.10",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
+    "@angular/platform-browser": "^18.2.6",
+    "@angular/platform-browser-dynamic": "^18.2.6",
+    "@angular/router": "^18.2.6",
     "@auth0/angular-jwt": "^5.1.2",
     "@date-io/core": "1.3.7",
     "@date-io/date-fns": "1.3.7",
     "@flowjs/flow.js": "^2.14.1",
-    "@flowjs/ngx-flow": "~0.7.2",
+    "@flowjs/ngx-flow": "~0.8.1",
     "@geoman-io/leaflet-geoman-free": "2.14.2",
     "@iplab/ngx-color-picker": "^17.2.2",
     "@mat-datetimepicker/core": "~13.0.2",
@@ -111,18 +111,18 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~17.0.2",
-    "@angular-devkit/build-angular": "^17.3.10",
+    "@angular-devkit/build-angular": "^18.2.6",
     "@angular-devkit/core": "^18.2.6",
     "@angular-devkit/schematics": "^18.2.6",
-    "@angular-eslint/builder": "17.5.2",
-    "@angular-eslint/eslint-plugin": "17.5.2",
-    "@angular-eslint/eslint-plugin-template": "17.5.2",
-    "@angular-eslint/schematics": "17.5.2",
-    "@angular-eslint/template-parser": "17.5.2",
-    "@angular/cli": "^17.3.10",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/language-service": "^17.3.12",
-    "@ngtools/webpack": "17.3.10",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/cli": "^18.2.6",
+    "@angular/compiler-cli": "^18.2.6",
+    "@angular/language-service": "^18.2.6",
+    "@ngtools/webpack": "18.2.6",
     "@types/ace-diff": "^2.1.1",
     "@types/canvas-gauges": "^2.1.4",
     "@types/flot": "^0.0.32",
@@ -167,7 +167,7 @@
     "protractor": "~7.0.0",
     "raw-loader": "^4.0.2",
     "ts-node": "^10.9.1",
-    "typescript": "~5.2.2",
+    "typescript": "~5.5.4",
     "webpack": "5.77.0"
   },
   "resolutions": {

ui-ngx/src/app/core/core.module.ts

@@ -16,7 +16,7 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -43,74 +43,65 @@ import { TranslateDefaultParser } from '@core/translate/translate-default-parser
 import { TranslateDefaultLoader } from '@core/translate/translate-default-loader';
 import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.interceptor';
 
-@NgModule({
-  imports: [
-    CommonModule,
-    HttpClientModule,
-    FlexLayoutModule.withConfig({addFlexToParent: false}),
-    MatDialogModule,
-    MatButtonModule,
-    MatSnackBarModule,
-
-    // ngx-translate
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useClass: TranslateDefaultLoader
-      },
-      missingTranslationHandler: {
-        provide: MissingTranslationHandler,
-        useClass: TbMissingTranslationHandler
-      },
-      compiler: {
-        provide: TranslateCompiler,
-        useClass: TranslateDefaultCompiler
-      },
-      parser: {
-        provide: TranslateParser,
-        useClass: TranslateDefaultParser
-      }
-    }),
-    HotkeyModule.forRoot(),
-
-    // ngrx
-    StoreModule.forRoot(reducers,
-      { metaReducers,
-        runtimeChecks: {
-          strictStateImmutability: true,
-          strictActionImmutability: true,
-          strictStateSerializability: true,
-          strictActionSerializability: true
-        }}
-    ),
-    EffectsModule.forRoot(effects),
-    env.production
-      ? []
-      : StoreDevtoolsModule.instrument({
-        name: env.appTitle
-      , connectInZone: true})
-  ],
-  providers: [
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: GlobalHttpInterceptor,
-      multi: true
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: EntityConflictInterceptor,
-      multi: true
-    },
-    {
-      provide: MAT_DIALOG_DEFAULT_OPTIONS,
-      useValue: {
-        ...new MatDialogConfig(),
-        restoreFocus: false
-      }
-    },
-    WINDOW_PROVIDERS
-  ],
-  exports: []
-})
+@NgModule({ exports: [], imports: [CommonModule,
+        FlexLayoutModule.withConfig({ addFlexToParent: false }),
+        MatDialogModule,
+        MatButtonModule,
+        MatSnackBarModule,
+        // ngx-translate
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useClass: TranslateDefaultLoader
+            },
+            missingTranslationHandler: {
+                provide: MissingTranslationHandler,
+                useClass: TbMissingTranslationHandler
+            },
+            compiler: {
+                provide: TranslateCompiler,
+                useClass: TranslateDefaultCompiler
+            },
+            parser: {
+                provide: TranslateParser,
+                useClass: TranslateDefaultParser
+            }
+        }),
+        HotkeyModule.forRoot(),
+        // ngrx
+        StoreModule.forRoot(reducers, { metaReducers,
+            runtimeChecks: {
+                strictStateImmutability: true,
+                strictActionImmutability: true,
+                strictStateSerializability: true,
+                strictActionSerializability: true
+            } }),
+        EffectsModule.forRoot(effects),
+        env.production
+            ? []
+            : StoreDevtoolsModule.instrument({
+                name: env.appTitle,
+                connectInZone: true
+            })], providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: GlobalHttpInterceptor,
+            multi: true
+        },
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: EntityConflictInterceptor,
+            multi: true
+        },
+        {
+            provide: MAT_DIALOG_DEFAULT_OPTIONS,
+            useValue: {
+                ...new MatDialogConfig(),
+                restoreFocus: false
+            }
+        },
+        WINDOW_PROVIDERS,
+        provideHttpClient(withInterceptorsFromDi())
+    ] })
 export class CoreModule {
 }

ui-ngx/src/app/core/interceptors/entity-conflict.interceptor.ts

@@ -15,15 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import {
-  HttpErrorResponse,
-  HttpEvent,
-  HttpHandler,
-  HttpInterceptor,
-  HttpParams,
-  HttpRequest,
-  HttpStatusCode
-} from '@angular/common/http';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpParams, HttpRequest, HttpStatusCode } from '@angular/common/http';
 import { Observable, of, throwError } from 'rxjs';
 import { catchError, switchMap } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';

ui-ngx/tsconfig.json

@@ -6,15 +6,14 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
+    "esModuleInterop": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
     "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
     "jsx": "react",
     "typeRoots": [
       "node_modules/@types",