feat(angular): update to Angular 20 (#1828)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: ShaneK <shane@shanessite.net>

Author: 3 people

.eslintrc.json

@@ -42,7 +42,6 @@
           }
         ],
         "@angular-eslint/component-class-suffix": "off",
-        "@angular-eslint/no-host-metadata-property": "error",
         "@angular-eslint/no-inputs-metadata-property": "error",
         "@angular-eslint/no-output-rename": "error",
         "@angular-eslint/use-lifecycle-interface": "error",

package-lock.json

@@ -18,14 +18,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.1.6",
-    "@angular/core": "^19.1.6",
-    "@angular/forms": "^19.1.6",
-    "@angular/platform-browser": "^19.1.6",
-    "@angular/platform-browser-dynamic": "^19.1.6",
-    "@angular/pwa": "^19.1.7",
-    "@angular/router": "^19.1.6",
-    "@angular/service-worker": "^19.1.6",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/pwa": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@angular/service-worker": "^20.0.0",
     "@awesome-cordova-plugins/core": "6.3.0",
     "@awesome-cordova-plugins/in-app-browser": "6.3.0",
     "@capacitor/android": "^6.0.0",
@@ -51,49 +51,48 @@
   },
   "devDependencies": {
     "@angular-devkit/architect": "^0.1901.7",
-    "@angular-devkit/build-angular": "^19.1.7",
-    "@angular-devkit/core": "^19.1.7",
-    "@angular-devkit/schematics": "^19.1.0",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^19.1.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^19.1.7",
-    "@angular/compiler": "^19.1.6",
-    "@angular/compiler-cli": "^19.1.6",
-    "@angular/language-service": "^19.1.6",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular-devkit/core": "^20.0.0",
+    "@angular-devkit/schematics": "^20.0.0",
+    "@angular-eslint/builder": "^20.0.0",
+    "@angular-eslint/eslint-plugin": "^20.0.0",
+    "@angular-eslint/eslint-plugin-template": "^20.0.0",
+    "@angular-eslint/schematics": "^20.0.0",
+    "@angular-eslint/template-parser": "^20.0.0",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/language-service": "^20.0.0",
     "@capacitor/cli": "^6.0.0",
     "@ionic/angular-toolkit": "12.1.1",
     "@ionic/cli": "7.2.0",
     "@ionic/storage": "^3.0.6",
-    "@types/jasmine": "~3.6.0",
+    "@types/jasmine": "~5.1.0",
     "@types/leaflet": "^1.9.17",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
     "cordova-res": "0.15.4",
     "eslint": "^9.20.0",
-    "jasmine-core": "~3.8.0",
+    "jasmine-core": "~5.7.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.7",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
     "puppeteer": "^11.0.0",
     "stylelint": "15.3.0",
     "stylelint-config-standard-scss": "7.0.1",
     "stylelint-order": "6.0.3",
     "ts-node": "8.5.0",
-    "typescript": "~5.7.3"
+    "typescript": "~5.8.0"
   },
   "browserslist": [
-    "Chrome >=79",
-    "ChromeAndroid >=79",
-    "Firefox >=70",
-    "Edge >=79",
-    "Safari >=14",
-    "iOS >=14"
+    "Chrome >=107",
+    "Firefox >=106",
+    "Edge >=107",
+    "Safari >=16.1",
+    "iOS >=16.1"
   ]
 }

package.json

@@ -14,11 +14,15 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     menuSpy = jasmine.createSpyObj('MenuController', ['toggle', 'enable']);
-    userDataSpy = jasmine.createSpyObj('UserData', ['isLoggedIn', 'logout']);
+    userDataSpy = jasmine.createSpyObj('UserService', ['isLoggedIn', 'logout']);
+    userDataSpy.isLoggedIn.and.returnValue(Promise.resolve(false));
     swUpdateSpy = jasmine.createSpyObj('SwUpdate', [
       'available',
       'activateUpdate',
     ]);
+    swUpdateSpy.versionUpdates = {
+      subscribe: jasmine.createSpy('subscribe').and.returnValue({ unsubscribe: () => {} })
+    };
 
     await TestBed.configureTestingModule({
       imports: [AppComponent],

src/app/app.component.spec.ts

@@ -100,7 +100,6 @@ export class AppComponent implements OnInit {
   dark = false;
 
   constructor() {
-    this.initializeApp();
     addIcons({
       calendarOutline,
       peopleOutline,
@@ -117,6 +116,7 @@ export class AppComponent implements OnInit {
   }
 
   async ngOnInit() {
+    this.initializeApp();
     await this.storage.create();
     this.checkLoginStatus();
     this.listenForLoginEvents();

src/app/app.component.ts

@@ -1,12 +1,14 @@
-import { DOCUMENT } from '@angular/common';
+
 import {
   AfterViewInit,
   Component,
+  DOCUMENT,
+  DestroyRef,
   ElementRef,
-  OnDestroy,
   ViewChild,
-  inject,
+  inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   IonButtons,
   IonContent,
@@ -15,10 +17,10 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone';
-import { LocationService } from '../../providers/location.service';
-import { Location } from '../../interfaces/conference.interfaces';
 import * as L from 'leaflet';
-import { Subscription, firstValueFrom } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
+import { Location } from '../../interfaces/conference.interfaces';
+import { LocationService } from '../../providers/location.service';
 
 @Component({
   selector: 'page-map',
@@ -47,37 +49,39 @@ import { Subscription, firstValueFrom } from 'rxjs';
   ],
   standalone: true,
 })
-export class MapPage implements AfterViewInit, OnDestroy {
+export class MapPage implements AfterViewInit {
   private doc = inject(DOCUMENT);
   private locationService = inject(LocationService);
+  private destroyRef = inject(DestroyRef);
   private map: L.Map | null = null;
   private markers: L.Marker[] = [];
-  private subscription: Subscription;
 
   @ViewChild('mapCanvas', { static: true }) mapElement!: ElementRef;
 
   ngAfterViewInit() {
-    this.locationService.loadLocations().subscribe(() => {
-      this.initializeMap();
-    });
+    this.locationService.loadLocations()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.initializeMap();
+      });
 
     // Subscribe to location changes
-    this.subscription = this.locationService.getLocations().subscribe(() => {
+    this.locationService.getLocations()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        if (this.map) {
+          this.initializeMap();
+        }
+      });
+
+    // Clean up map on destroy
+    this.destroyRef.onDestroy(() => {
       if (this.map) {
-        this.initializeMap();
+        this.map.remove();
       }
     });
   }
 
-  ngOnDestroy() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-    if (this.map) {
-      this.map.remove();
-    }
-  }
-
   private async initializeMap() {
     const mapEle = this.mapElement.nativeElement;
 

src/app/pages/map/map.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, inject } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 
 import { addIcons } from 'ionicons';
@@ -89,6 +89,16 @@ import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
     ]
 })
 export class SchedulePage implements OnInit {
+  alertCtrl = inject(AlertController);
+  confService = inject(ConferenceService);
+  loadingCtrl = inject(LoadingController);
+  modalCtrl = inject(ModalController);
+  router = inject(Router);
+  routerOutlet = inject(IonRouterOutlet);
+  toastCtrl = inject(ToastController);
+  user = inject(UserService);
+  config = inject(Config);
+
   // Gets a reference to the list element
   @ViewChild('scheduleList', { static: true }) scheduleList: IonList;
 
@@ -102,17 +112,7 @@ export class SchedulePage implements OnInit {
   confDate: string;
   showSearchbar: boolean;
 
-  constructor(
-    public alertCtrl: AlertController,
-    public confService: ConferenceService,
-    public loadingCtrl: LoadingController,
-    public modalCtrl: ModalController,
-    public router: Router,
-    public routerOutlet: IonRouterOutlet,
-    public toastCtrl: ToastController,
-    public user: UserService,
-    public config: Config
-  ) {
+  constructor() {
     addIcons({
       search,
       options,
@@ -126,7 +126,6 @@ export class SchedulePage implements OnInit {
 
   ngOnInit() {
     this.updateSchedule();
-
     this.ios = this.config.get('mode') === 'ios';
   }
 

src/app/pages/schedule/schedule.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import {
@@ -37,11 +37,12 @@ import { UserOptions } from '../../interfaces/user-options';
   ]
 })
 export class SignupPage {
+  router = inject(Router);
+  userService = inject(UserService);
+
   signup: UserOptions = { username: '', password: '' };
   submitted = false;
 
-  constructor(public router: Router, public userService: UserService) {}
-
   onSignup(form: NgForm) {
     this.submitted = true;
 

src/app/pages/signup/signup.ts

@@ -9,13 +9,7 @@
 
 <ion-content>
   <div class="support-logo">
-    <img
-      ngSrc="assets/img/appicon.svg"
-      alt="Ionic Logo"
-      width="200"
-      height="200"
-      priority
-    />
+    <img src="assets/img/appicon.svg" alt="Ionic Logo" />
   </div>
 
   <div class="support-form">

src/app/pages/support/support.html

@@ -1,6 +1,8 @@
 .support-logo {
   min-height: 200px;
 
+  padding: 20px 0;
+
   text-align: center;
 }