Upgrade Angular from v18 to v19

Co-authored-by: manekinekko <1699357+manekinekko@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -21,30 +21,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.13",
+    "@angular/animations": "^19.2.14",
     "@angular/cdk": "^18.2.14",
-    "@angular/common": "^18.2.13",
-    "@angular/compiler": "^18.2.13",
-    "@angular/core": "^18.2.13",
-    "@angular/forms": "^18.2.13",
+    "@angular/common": "^19.2.14",
+    "@angular/compiler": "^19.2.14",
+    "@angular/core": "^19.2.14",
+    "@angular/forms": "^19.2.14",
     "@angular/material": "^18.2.14",
-    "@angular/platform-browser": "^18.2.13",
-    "@angular/platform-browser-dynamic": "^18.2.13",
-    "@angular/router": "^18.2.13",
+    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/router": "^19.2.14",
     "@types/web-bluetooth": "0.0.6",
     "rxjs": "~7.8.0",
     "smoothie": "^1.35.0",
     "ts-jest": "^29.0.5",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.2.20",
-    "@angular-devkit/core": "^18.2.20",
-    "@angular/cli": "^18.2.20",
-    "@angular/compiler-cli": "^18.2.13",
-    "@angular/language-service": "^18.2.13",
+    "@angular-builders/jest": "^19.0.0",
+    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-devkit/core": "^19.2.15",
+    "@angular/cli": "^19.2.15",
+    "@angular/compiler-cli": "^19.2.14",
+    "@angular/language-service": "^19.2.14",
     "@compodoc/compodoc": "^1.1.11",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.8",
@@ -59,7 +59,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.2.1",
+    "ng-packagr": "^19.2.2",
     "release-it": "^17.0.3",
     "typescript": "~5.5.4"
   }

package.json

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ble-root',
-  template: `
+    selector: 'ble-root',
+    template: `
    <ble-dashboard></ble-dashboard>
-  `
+  `,
+    standalone: false
 })
 export class AppComponent {}

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ble-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.css'],
+    selector: 'ble-dashboard',
+    templateUrl: './dashboard.component.html',
+    styleUrls: ['./dashboard.component.css'],
+    standalone: false
 })
 export class DashboardComponent {
 

src/app/dashboard/dashboard.component.ts

@@ -28,8 +28,8 @@ const PROVIDERS = [
 ];
 
 @Component({
-  selector: 'ble-battery-level',
-  template: `
+    selector: 'ble-battery-level',
+    template: `
     <span data-testid="value">{{ value || '000' }}<sup>%</sup></span>
     <mat-progress-spinner
       [color]="color"
@@ -41,8 +41,8 @@ const PROVIDERS = [
     </mat-progress-spinner>
     <mat-icon>battery_charging_full</mat-icon>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: flex;
         justify-content: center;
@@ -69,8 +69,9 @@ const PROVIDERS = [
         bottom: 255px;
       }
     `,
-  ],
-  providers: PROVIDERS,
+    ],
+    providers: PROVIDERS,
+    standalone: false
 })
 export class BatteryLevelComponent implements OnInit, OnDestroy {
   value = 0;

src/app/thingy52/battery-level.component.ts

@@ -21,18 +21,19 @@ const PROVIDERS = [{
 }];
 
 @Component({
-  selector: 'ble-humidity',
-  template: `
+    selector: 'ble-humidity',
+    template: `
     <canvas #chart width="549" height="200"></canvas>
   `,
-  styles: [`
+    styles: [`
   :host {
     display: block;
   }
   canvas {
     margin-left: -16px;
   }`],
-  providers: PROVIDERS
+    providers: PROVIDERS,
+    standalone: false
 })
 export class HumidityComponent implements OnInit, OnDestroy {
   series: TimeSeries | null = null;

src/app/thingy52/humidity.component.ts

@@ -20,12 +20,12 @@ const PROVIDERS = [{
 }];
 
 @Component({
-  selector: 'ble-stepcounter',
-  template: `
+    selector: 'ble-stepcounter',
+    template: `
   <span>{{ value || "000" }}</span>
   <mat-icon>directions_walk</mat-icon>
   `,
-  styles: [`
+    styles: [`
   :host {
     display: block;
   }
@@ -43,7 +43,8 @@ const PROVIDERS = [{
     width: 100%;
     height: 100%;
   }`],
-  providers: PROVIDERS
+    providers: PROVIDERS,
+    standalone: false
 })
 export class StepCounterComponent implements OnInit, OnDestroy {
   valuesSubscription: Subscription | null = null;

src/app/thingy52/stepcounter.component.ts

@@ -34,19 +34,20 @@ const PROVIDERS = [
 ];
 
 @Component({
-  selector: 'ble-temperature',
-  template: ` <canvas #chart width="549" height="180"></canvas> `,
-  styles: [
-    `
+    selector: 'ble-temperature',
+    template: ` <canvas #chart width="549" height="180"></canvas> `,
+    styles: [
+        `
       :host {
         display: block;
       }
       canvas {
         margin-left: -16px;
       }
     `,
-  ],
-  providers: PROVIDERS,
+    ],
+    providers: PROVIDERS,
+    standalone: false
 })
 export class TemperatureComponent implements OnInit, OnDestroy {
   series: TimeSeries | null = null;