AW6241 Migrate main to ng-18

package.json

@@ -1,7 +1,7 @@
 {
   "name": "farmmaps-lib-app",
   "version": "4.10.0",
-  "scripts":   {
+  "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
@@ -10,16 +10,16 @@
     "e2e": "ng e2e"
   },
   "private": true,
-  "dependencies":   {
+  "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":   {
+  "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,79 +126,73 @@ export {
   GradientSelectComponent
 };
 
-@NgModule({
+@NgModule({ declarations: [
-  imports: [
+        AppComponent,
-    CommonModule,
+        AuthCallbackComponent,
-    HttpClientModule,
+        SidePanelComponent,
-    AppCommonRoutingModule,
+        SafePipe,
-    StoreModule.forFeature(MODULE_NAME, commonReducers.reducer),
+        NotFoundComponent,
-    EffectsModule.forFeature([commonEffects.AppCommonEffects]),
+        NotImplementedComponent,
-    OAuthModule.forRoot(),
+        ResumableFileUploadComponent,
-    NgbModule,
+        TimespanComponent,
-    FormsModule,
+        TagInputComponent,
-    UploadxModule,
+        SessionClearedComponent,
-    ClipboardModule,
+        MenuBackgroundComponent,
-    AvatarModule,
+        HasPackageDirective,
-    ImageCropperModule
+        PackageExistsDirective,
-  ],
+        HasClaimDirective,
-  declarations: [
+        HasRoleDirective,
-    AppComponent,
+        UserMenuComponent,
-    AuthCallbackComponent,
+        GradientComponent,
-    SidePanelComponent,
+        GradientSelectComponent,
-    SafePipe,
+        AppMenuComponent,
-    NotFoundComponent,
+        NotificationMenuComponent,
-    NotImplementedComponent,
+        HelpMenuComponent,
-    ResumableFileUploadComponent,
+        BackButtonComponent,
-    TimespanComponent,
+        ThumbnailComponent,
-    TagInputComponent,
+        EditImageModalComponent,
-    SessionClearedComponent,
+        AvatarComponent,
-    MenuBackgroundComponent,
+        ItemLinkComponent
-    HasPackageDirective,
+    ],
-    PackageExistsDirective,
+    exports: [
-    HasClaimDirective,
+        NgbModule,
-    HasRoleDirective,
+        UploadxModule,
-    UserMenuComponent,
+        ClipboardModule,
-    GradientComponent,
+        CommonModule,
-    GradientSelectComponent,
+        AppComponent,
-    AppMenuComponent,
+        ResumableFileUploadComponent,
-    NotificationMenuComponent,
+        AuthCallbackComponent,
-    HelpMenuComponent,
+        SidePanelComponent,
-    BackButtonComponent,
+        SafePipe,
-    ThumbnailComponent,
+        NotFoundComponent,
-    EditImageModalComponent,
+        NotImplementedComponent,
-    AvatarComponent,
+        ResumableFileUploadComponent,
-    ItemLinkComponent
+        TimespanComponent,
-  ],
+        TagInputComponent,
-  exports: [
+        SessionClearedComponent,
-    NgbModule,
+        MenuBackgroundComponent,
-    UploadxModule,
+        HasPackageDirective,
-    ClipboardModule,
+        PackageExistsDirective,
-    CommonModule,
+        HasClaimDirective,
-    AppComponent,
+        HasRoleDirective,
-    ResumableFileUploadComponent,
+        UserMenuComponent,
-    AuthCallbackComponent,
+        GradientComponent,
-    SidePanelComponent,
+        GradientSelectComponent,
-    SafePipe,
+        BackButtonComponent,
-    NotFoundComponent,
+        ThumbnailComponent,
-    NotImplementedComponent,
+        AvatarComponent,
-    ResumableFileUploadComponent,
+        ItemLinkComponent,
-    TimespanComponent,
+        EditImageModalComponent
-    TagInputComponent,
+    ], imports: [CommonModule,
-    SessionClearedComponent,
+        AppCommonRoutingModule,
-    MenuBackgroundComponent,
+        StoreModule.forFeature(MODULE_NAME, commonReducers.reducer),
-    HasPackageDirective,
+        EffectsModule.forFeature([commonEffects.AppCommonEffects]),
-    PackageExistsDirective,
+        OAuthModule.forRoot(),
-    HasClaimDirective,
+        NgbModule,
-    HasRoleDirective,
+        FormsModule,
-    UserMenuComponent,
+        UploadxModule,
-    GradientComponent,
+        ClipboardModule,
-    GradientSelectComponent,
+        AvatarModule,
-    BackButtonComponent,
+        ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
-    ThumbnailComponent,
-    AvatarComponent,
-    ItemLinkComponent,
-    EditImageModalComponent
-  ]
-})
 export class AppCommonModule {
 }

projects/common/src/fm/components/edit-image-modal/edit-image-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit,ViewChild,ElementRef,EventEmitter, Output } from '@angular/core';
-import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
 import { ImageCroppedEvent,LoadedImage } from 'ngx-image-cropper';
 import {ImageService } from '../../services/image.service';

projects/common/src/fm/services/folder.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
 import {IListItem} from '../models/list.item';
 import {IItem} from '../models/item';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {AppConfig} from '../shared/app.config';
 import {ItemService} from './item.service';
 

projects/common/src/fm/services/geolocator.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IUser } from '../models/user';
-import { HttpClient,HttpHeaders } from "@angular/common/http";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/image.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IUser } from '../models/user';
-import { HttpClient,HttpHeaders } from "@angular/common/http";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/item.service.ts

@@ -7,7 +7,7 @@ import { IUrlType } from '../models/url.type';
 import { IItem } from '../models/item';
 import { IJsonline } from '../models/json-line';
 import { IItemTask } from '../models/itemTask';
-import { HttpClient, HttpParams,HttpHeaders } from "@angular/common/http";
+import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 import {ItemTypeService} from './itemtype.service';
 import {IListItem} from '../models/list.item';

projects/common/src/fm/services/itemtype.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import {IItemTypes} from '../models/item.types'
 import {IItem} from '../models/item'
 import {AppConfig} from '../shared/app.config';
-import {HttpClient, HttpXhrBackend} from '@angular/common/http';
+import { HttpClient, HttpXhrBackend } from '@angular/common/http';
 
 @Injectable()
 export class ItemTypeService {

projects/common/src/fm/services/package.service.ts

@@ -5,7 +5,7 @@ import {IPackage, IPackages} from '../models/package';
 
 import {IItem} from '../models/item';
 import {IItemTask} from '../models/itemTask';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {AppConfig} from '../shared/app.config';
 import {Observable,iif,of} from 'rxjs';
 import {switchMap} from 'rxjs/operators';

projects/common/src/fm/services/schema.service.ts

@@ -1,5 +1,5 @@
 import {Inject, Injectable, LOCALE_ID} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {AppConfig} from '../shared/app.config';
 import {Observable, of} from 'rxjs';
 import {catchError, switchMap} from 'rxjs/operators';

projects/common/src/fm/services/typeahead.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable ,  Observer } from 'rxjs';
 import { ITypeaheadItem } from '../models/typeahead.item';
-import { HttpClient, HttpParams  } from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
 import { AppConfig } from "../shared/app.config";
 
 @Injectable({

projects/common/src/fm/services/weather.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {GeoJSON} from 'ol/format';
 import {map, switchMap} from 'rxjs/operators';

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';
 

projects/common/src/fm/shared/app.config.ts

@@ -1,6 +1,6 @@
 import {Inject, Injectable} from '@angular/core';
 import { Location,PathLocationStrategy,LocationStrategy } from '@angular/common';
-import {HttpClient, HttpXhrBackend} from '@angular/common/http';
+import { HttpClient, HttpXhrBackend } from '@angular/common/http';
 import {Observable} from 'rxjs';
 
 @Injectable()