upgrade to v19 angular and ionic latest

Signed-off-by: Douglas White <[email protected]>

package.json

@@ -14,45 +14,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.10",
-    "@angular/common": "^18.2.10",
-    "@angular/compiler": "^18.2.10",
-    "@angular/core": "^18.2.10",
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
     "@angular/fire": "^18.0.1",
-    "@angular/forms": "^18.2.10",
-    "@angular/platform-browser": "^18.2.10",
-    "@angular/platform-browser-dynamic": "^18.2.10",
-    "@angular/router": "^18.2.10",
-    "@angular/service-worker": "^18.2.10",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
+    "@angular/service-worker": "^19.0.5",
     "@capacitor/android": "6.1.0",
     "@capacitor/app": "6.0.0",
     "@capacitor/core": "6.1.0",
     "@capacitor/haptics": "6.0.0",
     "@capacitor/ios": "6.1.0",
     "@capacitor/keyboard": "6.0.0",
     "@capacitor/status-bar": "6.0.0",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.1",
     "@ionic/angular-server": "^8.0.0",
-    "@ionic/core": "^7.8.0",
-    "apexcharts": "^3.54.1",
+    "@ionic/core": "^8.4.1",
+    "apexcharts": "^4.3.0",
     "ionicons": "^7.2.0",
-    "ng-apexcharts": "^1.12.0",
+    "ng-apexcharts": "^1.15.0",
     "ngx-extended-pdf-viewer": "^22.0.0-alpha.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.6.3",
     "vite-plugin-pwa": "^0.20.5",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.5",
+    "@angular-devkit/build-angular": "^19.0.6",
     "@angular-eslint/builder": "^18.4.0",
     "@angular-eslint/eslint-plugin": "^18.4.0",
     "@angular-eslint/eslint-plugin-template": "^18.4.0",
     "@angular-eslint/schematics": "^18.4.0",
     "@angular-eslint/template-parser": "^18.4.0",
-    "@angular/cli": "^18.2.11",
-    "@angular/compiler-cli": "^18.2.10",
-    "@angular/language-service": "^18.2.10",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/language-service": "^19.0.5",
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "6.1.0",
     "@ionic/angular-toolkit": "^9.0.0",
@@ -72,7 +72,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.6.3"
   },
   "overrides": {
     "ng-apexcharts": {

src/app/app.component.ts

@@ -4,9 +4,10 @@ import { Platform, ToastController } from "@ionic/angular";
 import { ThemeService } from "./services/theme/theme.service";
 
 @Component({
-  selector: "app-root",
-  templateUrl: "app.component.html",
-  styleUrls: ["app.component.scss"],
+    selector: "app-root",
+    templateUrl: "app.component.html",
+    styleUrls: ["app.component.scss"],
+    standalone: false
 })
 export class AppComponent implements OnInit {
   angular = "Angular " + VERSION.major;

src/app/components/experience/experience.component.ts

@@ -5,9 +5,10 @@ import { jobsData } from "./jobs-data";
 import { DetailsPage } from "src/app/details/details.page";
 
 @Component({
-  selector: "app-experience",
-  templateUrl: "./experience.component.html",
-  styleUrls: ["./experience.component.scss"],
+    selector: "app-experience",
+    templateUrl: "./experience.component.html",
+    styleUrls: ["./experience.component.scss"],
+    standalone: false
 })
 export class ExperienceComponent implements OnInit {
   jobs: Job[] = [];

src/app/components/gauges/gauges.component.ts

@@ -26,9 +26,10 @@ export type ChartOptions = {
 };
 
 @Component({
-  selector: "app-gauges",
-  templateUrl: "./gauges.component.html",
-  styleUrls: ["./gauges.component.scss"],
+    selector: "app-gauges",
+    templateUrl: "./gauges.component.html",
+    styleUrls: ["./gauges.component.scss"],
+    standalone: false
 })
 export class GaugesComponent implements OnInit {
   @ViewChild("chart") chart!: ChartComponent;

src/app/components/hero-devices/hero-devices.component.ts

@@ -1,8 +1,9 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "app-hero-devices",
-  templateUrl: "./hero-devices.component.html",
-  styleUrls: ["./hero-devices.component.scss"],
+    selector: "app-hero-devices",
+    templateUrl: "./hero-devices.component.html",
+    styleUrls: ["./hero-devices.component.scss"],
+    standalone: false
 })
 export class HeroDevicesComponent {}

src/app/components/radar/radar.component.ts

@@ -17,9 +17,10 @@ export type ChartOptions = {
 };
 
 @Component({
-  selector: "app-radar",
-  templateUrl: "./radar.component.html",
-  styleUrls: ["./radar.component.scss"],
+    selector: "app-radar",
+    templateUrl: "./radar.component.html",
+    styleUrls: ["./radar.component.scss"],
+    standalone: false
 })
 export class RadarComponent {
   @ViewChild("chart") chart!: ChartComponent;

src/app/components/skills/skills.component.ts

@@ -3,9 +3,10 @@ import { SkillsData } from "./skills-data";
 import { ThemeService } from "src/app/services/theme/theme.service";
 
 @Component({
-  selector: "app-skills",
-  templateUrl: "./skills.component.html",
-  styleUrls: ["./skills.component.scss"],
+    selector: "app-skills",
+    templateUrl: "./skills.component.html",
+    styleUrls: ["./skills.component.scss"],
+    standalone: false
 })
 export class SkillsComponent implements OnInit {
   skillsData = SkillsData;

src/app/contact/contact.page.ts

@@ -9,9 +9,10 @@ interface MessageResult {
 }
 
 @Component({
-  selector: "app-contact",
-  templateUrl: "contact.page.html",
-  styleUrls: ["contact.page.scss"],
+    selector: "app-contact",
+    templateUrl: "contact.page.html",
+    styleUrls: ["contact.page.scss"],
+    standalone: false
 })
 export class ContactPage {
   emailForm = new FormGroup({

src/app/details/details.page.ts

@@ -4,9 +4,10 @@ import { ModalController } from "@ionic/angular";
 import { jobsData } from "../components/experience/jobs-data";
 
 @Component({
-  selector: "app-details",
-  templateUrl: "./details.page.html",
-  styleUrls: ["./details.page.scss"],
+    selector: "app-details",
+    templateUrl: "./details.page.html",
+    styleUrls: ["./details.page.scss"],
+    standalone: false
 })
 export class DetailsPage {
   @Input() selectedJob!: Job;

src/app/home/home.page.ts

@@ -2,9 +2,10 @@ import { Component, ViewChild } from "@angular/core";
 import { IonContent, ScrollCustomEvent } from "@ionic/angular";
 
 @Component({
-  selector: "app-home",
-  templateUrl: "./home.page.html",
-  styleUrls: ["./home.page.scss"],
+    selector: "app-home",
+    templateUrl: "./home.page.html",
+    styleUrls: ["./home.page.scss"],
+    standalone: false
 })
 export class HomePage {
   showBackToTopFab = false;

src/app/resume/resume.page.ts

@@ -3,9 +3,10 @@ import { ThemeService } from "../services/theme/theme.service";
 import { Subscription } from "rxjs";
 
 @Component({
-  selector: "app-resume",
-  templateUrl: "./resume.page.html",
-  styleUrls: ["./resume.page.scss"],
+    selector: "app-resume",
+    templateUrl: "./resume.page.html",
+    styleUrls: ["./resume.page.scss"],
+    standalone: false
 })
 export class ResumePage implements OnInit, OnDestroy {
   isDark!: boolean | undefined;

src/app/shared/footer/footer.component.ts

@@ -1,9 +1,10 @@
 import { Component } from "@angular/core";
 
 @Component({
-  selector: "app-footer",
-  templateUrl: "./footer.component.html",
-  styleUrls: ["./footer.component.scss"],
+    selector: "app-footer",
+    templateUrl: "./footer.component.html",
+    styleUrls: ["./footer.component.scss"],
+    standalone: false
 })
 export class FooterComponent {
   yearDate: number = Date.now();

src/app/tabs/tabs.component.ts

@@ -4,9 +4,10 @@ import { ThemeService } from "../services/theme/theme.service";
 import { AppComponent } from "../app.component";
 
 @Component({
-  selector: "app-tabs",
-  templateUrl: "./tabs.component.html",
-  styleUrls: ["./tabs.component.scss"],
+    selector: "app-tabs",
+    templateUrl: "./tabs.component.html",
+    styleUrls: ["./tabs.component.scss"],
+    standalone: false
 })
 export class TabsComponent implements OnInit {
   isDesktop!: boolean;

tsconfig.json

@@ -5,14 +5,14 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,