AW6241 Migrate main to ng-18

package.json

@@ -11,15 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.3",
+    "@angular/animations": "^18.2.3",
-    "@angular/common": "^17.3.3",
+    "@angular/common": "^18.2.3",
-    "@angular/compiler": "^17.3.3",
+    "@angular/compiler": "^18.2.3",
-    "@angular/core": "^17.3.3",
+    "@angular/core": "^18.2.3",
     "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular/forms": "^17.3.3",
+    "@angular/forms": "^18.2.3",
-    "@angular/platform-browser": "^17.3.3",
+    "@angular/platform-browser": "^18.2.3",
-    "@angular/platform-browser-dynamic": "^17.3.3",
+    "@angular/platform-browser-dynamic": "^18.2.3",
-    "@angular/router": "^17.3.3",
+    "@angular/router": "^18.2.3",
     "@farmmaps/common": "file:dist/common",
     "@farmmaps/common-map": "file:dist/common-map",
     "@farmmaps/common-map3d": "file:dist/common-map3d",
@@ -54,15 +54,15 @@
     "tslib": "^2.4.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "zone.js": "~0.14.4"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^17",
-    "@angular-devkit/build-angular": "^17.3.3",
+    "@angular-devkit/build-angular": "^18.2.3",
-    "@angular/cli": "^17.3.3",
+    "@angular/cli": "^18.2.3",
-    "@angular/compiler-cli": "^17.3.3",
+    "@angular/compiler-cli": "^18.2.3",
-    "@angular/language-service": "^17.3.3",
+    "@angular/language-service": "^18.2.3",
-    "@angular/localize": "^17.3.3",
+    "@angular/localize": "^18.2.3",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.9",
@@ -81,7 +81,7 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^17.3.0",
+    "ng-packagr": "^18.2.1",
     "protractor": "~7.0.0",
     "ts-node": "^8.8.1",
     "typescript": "~5.4.4"

projects/common/src/fm/common.module.ts

@@ -1,7 +1,7 @@
 // angular modules
 import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector, Optional, SkipSelf,InjectionToken } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
-import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClient, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 
 // external modules
@@ -126,22 +126,7 @@ export {
   GradientSelectComponent
 };
 
-@NgModule({
+@NgModule({ declarations: [
-  imports: [
-    CommonModule,
-    HttpClientModule,
-    AppCommonRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, commonReducers.reducer),
-    EffectsModule.forFeature([commonEffects.AppCommonEffects]),
-    OAuthModule.forRoot(),
-    NgbModule,
-    FormsModule,
-    UploadxModule,
-    ClipboardModule,
-    AvatarModule,
-    ImageCropperModule
-  ],
-  declarations: [
         AppComponent,
         AuthCallbackComponent,
         SidePanelComponent,
@@ -198,7 +183,16 @@ export {
         AvatarComponent,
         ItemLinkComponent,
         EditImageModalComponent
-  ]
+    ], imports: [CommonModule,
-})
+        AppCommonRoutingModule,
+        StoreModule.forFeature(MODULE_NAME, commonReducers.reducer),
+        EffectsModule.forFeature([commonEffects.AppCommonEffects]),
+        OAuthModule.forRoot(),
+        NgbModule,
+        FormsModule,
+        UploadxModule,
+        ClipboardModule,
+        AvatarModule,
+        ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppCommonModule {
 }

projects/common/src/fm/shared/accesstoken.interceptor.ts

@@ -1,12 +1,7 @@
 import { Injectable, Injector, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common'
 import { AppConfig } from "./app.config";
-import {
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptor
-} from '@angular/common/http';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';