Update Angular

Author: danielpalme

src/AngularComponents/package-lock.json

@@ -10,22 +10,22 @@
   "private": true,
   "dependencies": {
     "@angular-slider/ngx-slider": "^18.0.0",
-    "@angular/animations": "^18.2.12",
-    "@angular/common": "^18.2.12",
-    "@angular/compiler": "^18.2.12",
-    "@angular/core": "^18.2.12",
-    "@angular/forms": "^18.2.12",
-    "@angular/platform-browser": "^18.2.12",
-    "@angular/platform-browser-dynamic": "^18.2.12",
-    "@angular/router": "^18.2.12",
+    "@angular/animations": "^19.0.5",
+    "@angular/common": "^19.0.5",
+    "@angular/compiler": "^19.0.5",
+    "@angular/core": "^19.0.5",
+    "@angular/forms": "^19.0.5",
+    "@angular/platform-browser": "^19.0.5",
+    "@angular/platform-browser-dynamic": "^19.0.5",
+    "@angular/router": "^19.0.5",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.12",
-    "@angular/cli": "^18.2.12",
-    "@angular/compiler-cli": "^18.2.12",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
     "@types/node": "^12.11.1",
     "typescript": "~5.5.3"
   }

src/AngularComponents/package.json

@@ -3,8 +3,8 @@ import { Metric } from "./data/metric.class";
 import { ClassViewModel } from "./viewmodels/class-viewmodel.class";
 
 @Component({
-  selector: "[class-row]",
-  template: `
+    selector: "[class-row]",
+    template: `
 <td>
   <a [href]="clazz.reportPath" *ngIf="clazz.reportPath !== ''">{{clazz.name}}</a>
   <ng-container *ngIf="clazz.reportPath === ''">{{clazz.name}}</ng-container>
@@ -151,7 +151,8 @@ import { ClassViewModel } from "./viewmodels/class-viewmodel.class";
 </td>
 <td class="right" *ngIf="methodCoverageAvailable"><coverage-bar [percentage]="clazz.methodCoverage"></coverage-bar></td>
 <td class="right" *ngFor="let metric of visibleMetrics">{{ clazz.metrics[metric.abbreviation] }}</td>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class ClassRow {
     @Input() clazz!: ClassViewModel;

src/AngularComponents/src/app/components/coverageinfo/class-row.component.ts

@@ -3,8 +3,8 @@ import { Metric } from "./data/metric.class";
 import { CodeElementViewModel } from "./viewmodels/codelement-viewmodel.class";
 
 @Component({
-  selector: "[codeelement-row]",
-  template: `
+    selector: "[codeelement-row]",
+    template: `
 <th><a href="#" (click)="element.toggleCollapse($event)">
   <i [ngClass]="{'icon-plus': element.collapsed, 'icon-minus': !element.collapsed}"></i>
   {{element.name}}</a>
@@ -28,7 +28,8 @@ import { CodeElementViewModel } from "./viewmodels/codelement-viewmodel.class";
   <coverage-bar [percentage]="element.methodCoverage"></coverage-bar>
 </th>
 <th class="right" *ngFor="let metric of visibleMetrics"></th>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class CodeElementRow {
     @Input() element!: CodeElementViewModel;

src/AngularComponents/src/app/components/coverageinfo/codeelement-row.component.ts

@@ -1,14 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
 
 @Component({
-  selector: "coverage-bar",
-  template: `
+    selector: "coverage-bar",
+    template: `
   <table class="coverage">
     <td class="gray covered100" *ngIf="grayVisible"> </td>
     <td class="green {{greenClass}}" *ngIf="greenVisible"> </td>
     <td class="red {{redClass}}" *ngIf="redVisible"> </td>
   </table>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class CoverageBarComponent {
     grayVisible: boolean = true;

src/AngularComponents/src/app/components/coverageinfo/coverage-bar.component.ts

@@ -2,14 +2,15 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
 import { Helper } from './viewmodels/helper.class';
 
 @Component({
-  selector: "[coverage-history-chart]",
-  template: `
+    selector: "[coverage-history-chart]",
+    template: `
   <svg width="30" height="18" class="ct-chart-line">
     <g class="ct-series ct-series-a">
         <path [attr.d]="path" class="ct-line"></path>
     </g>
   </svg>`,
-  changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
 })
 export class CoverageHistoryChartComponent {
     path: string|null = null;

src/AngularComponents/src/app/components/coverageinfo/coverage-history-chart.component.ts

@@ -10,8 +10,8 @@ import { CodeElementViewModel } from "./viewmodels/codelement-viewmodel.class";
 import { Helper } from "./viewmodels/helper.class";
 
 @Component({
-  selector: "coverage-info",
-  template: `
+    selector: "coverage-info",
+    template: `
   <div *ngIf="codeElements.length > 0">
     <popup *ngIf="popupVisible"
       [(visible)]="popupVisible"
@@ -234,7 +234,8 @@ import { Helper } from "./viewmodels/helper.class";
         </tbody>
       </table>
     </div>
-  </div>`
+  </div>`,
+    standalone: false
 })
 export class CoverageInfoComponent {
   window: Window;

src/AngularComponents/src/app/components/coverageinfo/coverage-info.component.ts

@@ -2,8 +2,8 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { Metric } from "./data/metric.class";
 
 @Component({
-  selector: "popup",
-  template: `
+    selector: "popup",
+    template: `
 <div class="popup-container" (click)="close()">
   <div class="popup" (click)="cancelEvent($event)">
     <div class="close" (click)="close()">X</div>
@@ -26,7 +26,8 @@ import { Metric } from "./data/metric.class";
       </div>
     </ng-container>
   </div>
-</div>`
+</div>`,
+    standalone: false
 })
 export class PopupComponent {
     @Input() visible: boolean = false;

src/AngularComponents/src/app/components/coverageinfo/popup.component.ts

@@ -1,8 +1,9 @@
 import { Component, Input } from "@angular/core";
 
 @Component({
-  selector: "pro-button",
-  template: `&nbsp;<a href="https://reportgenerator.io/pro" class="pro-button pro-button-tiny" target="_blank" title="{{ translations.methodCoverageProVersion}}">PRO</a>`
+    selector: "pro-button",
+    template: `&nbsp;<a href="https://reportgenerator.io/pro" class="pro-button pro-button-tiny" target="_blank" title="{{ translations.methodCoverageProVersion}}">PRO</a>`,
+    standalone: false
 })
 export class ProButton {
   @Input() translations: any = { };

src/AngularComponents/src/app/components/coverageinfo/pro-button.component.ts

@@ -6,8 +6,8 @@ import { RiskHotspot } from "./data/riskhotspot.class";
 import { RiskHotspotsSettings } from "./data/riskhotspots-settings.class";
 
 @Component({
-  selector: "risk-hotspots",
-  template: `
+    selector: "risk-hotspots",
+    template: `
     <div *ngIf="totalNumberOfRiskHotspots > 0">
       <div class="customizebox">
         <div>
@@ -81,7 +81,8 @@ import { RiskHotspotsSettings } from "./data/riskhotspots-settings.class";
       </div>
     </div>
   `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class RiskHotspotsComponent implements OnInit {
   window: Window;