Merge pull request #39 from MarshMapper/upgrade-angular-18

Upgrade to Angular and Angular Material 18

README.md

@@ -1,7 +1,7 @@
 # ngx-arcgis-demo
 Demo project integrating [ArcGIS Maps SDK for JavaScript (4.30)](https://developers.arcgis.com/javascript/latest/) 
 and [Calcite Web Comoponents](https://developers.arcgis.com/javascript/latest/calcite-design-system/) with Angular 
-and Angular Material 17.x for navigation and layout.  An inital goal was to integrate real-time data from external 
+and Angular Material 18.x for navigation and layout.  An inital goal was to integrate real-time data from external 
 APIs with the high-level components provided in the SDK. These include the 
 [eBird API](https://documenter.getpostman.com/view/664302/S1ENwy59) for observation data and NOAA APIs
 for weather and tides.
@@ -11,7 +11,7 @@ The project is automatically deployed to Azure using GitHub Actions each time ch
 Static Web App that uses the Azure CDN for caching and delivery:  
 [https://icy-wave-0bf8df410.5.azurestaticapps.net/](https://icy-wave-0bf8df410.5.azurestaticapps.net/)
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.3 and can
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) and can
 be built and deployed using the standard Angular CLI commands.  It uses the "application" build target.  Addtionally,
 it uses the dotenv-run wrapper around the dotenv package to access environment variables.  A required environment variable
 for the eBird API is the API key.  This can be obtained by creating an account at the eBird website and generating a key.

package.json

@@ -10,41 +10,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.0",
-    "@angular/cdk": "^17.3.3",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/material": "^17.3.3",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/router": "^17.3.0",
+    "@angular/animations": "^18.2.3",
+    "@angular/cdk": "^18.2.3",
+    "@angular/common": "^18.2.3",
+    "@angular/compiler": "^18.2.3",
+    "@angular/core": "^18.2.3",
+    "@angular/forms": "^18.2.3",
+    "@angular/material": "^18.2.3",
+    "@angular/platform-browser": "^18.2.3",
+    "@angular/platform-browser-dynamic": "^18.2.3",
+    "@angular/router": "^18.2.3",
     "@arcgis/core": "4.30.8",
     "@arcgis/map-components-angular": "4.30.5",
     "@esri/calcite-components": "2.10.1",
     "@esri/calcite-components-angular": "2.10.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.10"
   },
   "resolutions": {
     "braces": "3.0.3",
     "ws": "^8.17.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular/cli": "^17.3.3",
-    "@angular/compiler-cli": "^17.3.0",
-    "@ngx-env/builder": "17.3.0",
+    "@angular-devkit/build-angular": "^18.2.3",
+    "@angular/build": "^18.2.3",
+    "@angular/cli": "^18.2.3",
+    "@angular/compiler-cli": "^18.2.3",
+    "@ngx-env/builder": "18.0.1",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.2"
+    "typescript": "~5.5.4"
   },
   "engines": {
     "node": ">=18.0.0"

src/app/components/about/about.component.html

@@ -2,7 +2,7 @@
     <h1>About this Site</h1>
     <h2>Demo site leveraging the following technologies:</h2>
     <ul>
-        <li>Angular 17.3 Standalone Components, "application" build</li>
+        <li>Angular 18.2 Standalone Components, "application" build</li>
         <li>Angular Material Navigation, Responsive Layout</li>
         <li>ArcGIS Maps SDK for JavaScript 4.30, including Widgets and Calcite Components</li>
         <li>Sass CSS Preprocessor, CSS Grid Layout</li>

src/app/components/arc-map/arc-map.component.spec.ts

@@ -1,17 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ArcMapComponent } from './arc-map.component';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ArcMapComponent', () => {
   let component: ArcMapComponent;
   let fixture: ComponentFixture<ArcMapComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ArcMapComponent, HttpClientModule, NoopAnimationsModule]
-    })
+    await TestBed.configureTestingModule({
+    imports: [ArcMapComponent, NoopAnimationsModule],
+    providers: [provideHttpClient(withInterceptorsFromDi())]
+})
     .compileComponents();
 
     fixture = TestBed.createComponent(ArcMapComponent);

src/app/services/ebird.service.spec.ts

@@ -1,15 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 
 import { EbirdService } from './ebird.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('EbirdService', () => {
   let service: EbirdService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientModule ]
-    });
+    TestBed.configureTestingModule({
+    imports: [],
+    providers: [provideHttpClient(withInterceptorsFromDi())]
+});
     service = TestBed.inject(EbirdService);
   });
 

src/app/services/protected-areas.service.spec.ts

@@ -1,19 +1,20 @@
 import { TestBed } from '@angular/core/testing';
 
 import { ProtectedAreasService } from './protected-areas.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideRouter } from '@angular/router';
 
 describe('ProtectedAreasService', () => {
   let service: ProtectedAreasService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientModule ],
-      providers: [
-        provideRouter([{path:'', component: ProtectedAreasService}])
-      ]
-    });
+    TestBed.configureTestingModule({
+    imports: [],
+    providers: [
+        provideRouter([{ path: '', component: ProtectedAreasService }]),
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+});
     service = TestBed.inject(ProtectedAreasService);
   });
 

src/app/services/tide-current.service.spec.ts

@@ -1,15 +1,16 @@
 import { TestBed } from '@angular/core/testing';
 
 import { TideCurrentService } from './tide-current.service';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('TideCurrentService', () => {
   let service: TideCurrentService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientModule ]
-    });
+    TestBed.configureTestingModule({
+    imports: [],
+    providers: [provideHttpClient(withInterceptorsFromDi())]
+});
     service = TestBed.inject(TideCurrentService);
   });
 

src/app/services/unprotected-areas.service.spec.ts

@@ -1,15 +1,16 @@
 // Other imports
 import { TestBed } from '@angular/core/testing';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { UnprotectedAreasService } from './unprotected-areas.service';
 
 describe('UnprotectedAreasService', () => {
   let service: UnprotectedAreasService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [ HttpClientModule ]
-    });
+    TestBed.configureTestingModule({
+    imports: [],
+    providers: [provideHttpClient(withInterceptorsFromDi())]
+});
     service = TestBed.inject(UnprotectedAreasService);
   });
 

src/styles.scss

@@ -13,21 +13,21 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$ngx-arcgis-demo-primary: mat.define-palette($gh-blue-palette, 800, 700, 900);
-$ngx-arcgis-demo-accent: mat.define-palette(mat.$amber-palette, 800, 700, 900);
+$ngx-arcgis-demo-primary: mat.m2-define-palette($gh-blue-palette, 800, 700, 900);
+$ngx-arcgis-demo-accent: mat.m2-define-palette(mat.$m2-amber-palette, 800, 700, 900);
 
 // The warn palette is optional (defaults to red).
-$ngx-arcgis-demo-warn: mat.define-palette(mat.$red-palette);
+$ngx-arcgis-demo-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$ngx-arcgis-demo-theme: mat.define-light-theme((
+$ngx-arcgis-demo-theme: mat.m2-define-light-theme((
   color: (
     primary: $ngx-arcgis-demo-primary,
     accent: $ngx-arcgis-demo-accent,
     warn: $ngx-arcgis-demo-warn,
   ),
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
   density: 0
 ));