Bump Angular to 18

package.json

@@ -28,17 +28,17 @@
     }
   ],
   "dependencies": {
-    "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/material": "^17.3.10",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/platform-server": "^17.3.12",
-    "@angular/router": "^17.3.12",
+    "@angular/animations": "^18.2.13",
+    "@angular/cdk": "^18.2.14",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/material": "^18.2.14",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/platform-server": "^18.2.13",
+    "@angular/router": "^18.2.13",
     "@mapbox/point-geometry": "^0.1.0",
     "@maplibre/ngx-maplibre-gl": "^17.4.3",
     "@turf/bbox": "^7.1.0",
@@ -46,17 +46,17 @@
     "@turf/helpers": "^7.1.0",
     "angular-plotly.js": "^5.2.2",
     "maplibre-gl": "^4.7.1",
-    "ngx-flexible-layout": "~17.0.4",
+    "ngx-flexible-layout": "~18.0.2",
     "plotly.js-basic-dist-min": "2.31.1",
     "rxjs": "^7.8.1",
     "ts-helpers": "^1.1.2",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.11",
-    "@angular/cli": "^17.3.11",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/language-service": "^17.3.12",
+    "@angular-devkit/build-angular": "^18.2.12",
+    "@angular/cli": "^18.2.12",
+    "@angular/compiler-cli": "^18.2.13",
+    "@angular/language-service": "^18.2.13",
     "@hey-api/openapi-ts": "^0.45.1",
     "@types/geojson": "^7946.0.15",
     "@types/jasmine": "~5.1.5",

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { NgModule, LOCALE_ID } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { HttpClientModule } from '@angular/common/http'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 import { MatButtonModule } from '@angular/material/button'
 import { MatIconModule } from '@angular/material/icon'
@@ -32,34 +32,26 @@ import { HtmlSnackbarComponent } from './custom-snackbar/custom-snackbar.compone
 
 import { AppRoutingModule } from './app-routing.module'
 
-@NgModule({
-    declarations: [
+@NgModule({ declarations: [
         AppComponent,
         PageNotFoundComponent,
         HtmlSnackbarComponent,
     ],
-    imports: [
+    bootstrap: [
+        AppComponent
+    ], imports: [
         // ApolloModule,
-
         BrowserModule,
         BrowserAnimationsModule,
-
         FormsModule,
-        HttpClientModule,
-
         MatToolbarModule,
         MatButtonModule,
         MatIconModule,
         MatSnackBarModule,
-
         MatTooltipModule,
-
         FlexLayoutModule,
-
         AppRoutingModule,
-        LoginModule,
-    ],
-    providers: [
+        LoginModule], providers: [
         ActionsService,
         AuthenticationService,
         BootstrapService,
@@ -75,9 +67,6 @@ import { AppRoutingModule } from './app-routing.module'
             provide: LOCALE_ID,
             useValue: "en-IN"
         },
-    ],
-    bootstrap: [
-        AppComponent
-    ]
-})
+        provideHttpClient(withInterceptorsFromDi()),
+    ] })
 export class AppModule {}

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "importHelpers": true,
     "module": "es2020",
+    "esModuleInterop": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
@@ -18,7 +19,6 @@
       "dom",
       "esnext.asynciterable"
     ],
-    "allowSyntheticDefaultImports": true,
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {