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,15 +43,11 @@ 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,
+@NgModule({ exports: [], imports: [CommonModule,
         FlexLayoutModule.withConfig({ addFlexToParent: false }),
         MatDialogModule,
         MatButtonModule,
         MatSnackBarModule,
-
         // ngx-translate
         TranslateModule.forRoot({
             loader: {
@@ -72,25 +68,21 @@ import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.in
             }
         }),
         HotkeyModule.forRoot(),
-
         // ngrx
-    StoreModule.forRoot(reducers,
-      { metaReducers,
+        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: [
+                name: env.appTitle,
+                connectInZone: true
+            })], providers: [
         {
             provide: HTTP_INTERCEPTORS,
             useClass: GlobalHttpInterceptor,
@@ -108,9 +100,8 @@ import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.in
                 restoreFocus: false
             }
         },
-    WINDOW_PROVIDERS
-  ],
-  exports: []
-})
+        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",