(#262) Upgrade Angular 19

Author: phongnguyend

src/UIs/angular/package-lock.json

@@ -11,49 +11,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.5",
-    "@angular/common": "^18.0.5",
-    "@angular/compiler": "^18.0.5",
-    "@angular/core": "^18.0.5",
-    "@angular/forms": "^18.0.5",
-    "@angular/platform-browser": "^18.0.5",
-    "@angular/platform-browser-dynamic": "^18.0.5",
-    "@angular/router": "^18.0.5",
-    "@microsoft/signalr": "^7.0.14",
-    "@ngrx/effects": "^18.0.1",
-    "@ngrx/store": "^18.0.1",
-    "@ngrx/store-devtools": "^18.0.1",
+    "@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",
+    "@microsoft/signalr": "^8.0.7",
+    "@ngrx/effects": "^19.0.0",
+    "@ngrx/store": "^19.0.0",
+    "@ngrx/store-devtools": "^19.0.0",
     "bootstrap": "^5.3.3",
     "font-awesome": "^4.7.0",
-    "ngx-bootstrap": "^18.0.0",
+    "ngx-bootstrap": "^19.0.1",
     "ngx-toastr": "^19.0.0",
     "oidc-client": "^1.11.5",
-    "oidc-client-ts": "^3.0.1",
+    "oidc-client-ts": "^3.1.0",
     "rxjs": "^7.8.0",
     "tslib": "^2.6.3",
-    "zone.js": "^0.14.7",
-    "@ngrx/operators": "^18.0.0"
+    "zone.js": "^0.15.0",
+    "@ngrx/operators": "^19.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.6",
-    "@angular/cli": "^18.0.6",
-    "@angular/compiler-cli": "^18.0.5",
-    "@angular/language-service": "^18.0.5",
-    "@types/jasmine": "^5.1.4",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/language-service": "^19.0.5",
+    "@types/jasmine": "^5.1.5",
     "@types/jasminewd2": "^2.0.13",
-    "@types/node": "^20.14.9",
+    "@types/node": "^22.10.2",
     "codelyzer": "^6.0.2",
-    "jasmine-core": "~5.1.2",
+    "jasmine-core": "~5.5.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.4.3",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "3.3.2",
+    "prettier": "3.4.2",
     "protractor": "~7.0.0",
     "ts-node": "~10.9.2",
     "tslint": "~6.1.0",
-    "typescript": "~5.4.5"
+    "typescript": "~5.6.3"
   }
 }

src/UIs/angular/package.json

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

src/UIs/angular/src/app/app.component.ts

@@ -5,9 +5,10 @@ import { AuditLogState } from "./audit-log.reducer";
 import * as actions from "./audit-log.actions";
 
 @Component({
-  selector: "app-audit-log-list",
-  templateUrl: "./audit-log-list.component.html",
-  styleUrls: ["./audit-log-list.component.css"],
+    selector: "app-audit-log-list",
+    templateUrl: "./audit-log-list.component.html",
+    styleUrls: ["./audit-log-list.component.css"],
+    standalone: false
 })
 export class AuditLogListComponent implements OnInit {
   auditLogs: IAuditLogEntry[] = [];

src/UIs/angular/src/app/auditlogs/audit-log-list.component.ts

@@ -5,7 +5,8 @@ import { ActivatedRoute } from "@angular/router";
 import { environment } from "src/environments/environment";
 
 @Component({
-  template: "<div>Loading ...</div>",
+    template: "<div>Loading ...</div>",
+    standalone: false
 })
 export class OidcLoginRedirect implements OnInit {
   constructor(private route: ActivatedRoute) {}

src/UIs/angular/src/app/auth/oidc-login-redirect.component.ts

@@ -2,9 +2,10 @@ import { Component, OnInit } from "@angular/core";
 import { AuthService } from "../auth/auth.service";
 
 @Component({
-  selector: "app-nav",
-  templateUrl: "./nav.component.html",
-  styleUrls: ["./nav.component.css"]
+    selector: "app-nav",
+    templateUrl: "./nav.component.html",
+    styleUrls: ["./nav.component.css"],
+    standalone: false
 })
 export class NavComponent implements OnInit {
   pageTitle = "ClassifiedAds.Angular";

src/UIs/angular/src/app/core/nav.component.ts

@@ -6,8 +6,9 @@ import { AuthService } from "../auth/auth.service";
 import { environment } from "src/environments/environment";
 
 @Component({
-  selector: "app-notification",
-  template: "",
+    selector: "app-notification",
+    template: "",
+    standalone: false
 })
 export class NotificationComponent implements OnInit {
   constructor(public auth: AuthService, private toastr: ToastrService) {}

src/UIs/angular/src/app/core/notification.component.ts

@@ -2,7 +2,8 @@ import { Component, VERSION } from "@angular/core";
 import { Title } from "@angular/platform-browser";
 
 @Component({
-  templateUrl: "./welcome.component.html"
+    templateUrl: "./welcome.component.html",
+    standalone: false
 })
 export class WelcomeComponent {
   public pageTitle = "Welcome ClassifiedAds Angular";

src/UIs/angular/src/app/core/welcome.component.ts

@@ -8,9 +8,10 @@ import { BsModalService } from "ngx-bootstrap/modal";
 import { GuidEmpty } from "src/app/shared/constants";
 
 @Component({
-  selector: "app-edit-file",
-  templateUrl: "./edit-file.component.html",
-  styleUrls: ["./edit-file.component.css"],
+    selector: "app-edit-file",
+    templateUrl: "./edit-file.component.html",
+    styleUrls: ["./edit-file.component.css"],
+    standalone: false
 })
 export class EditFileComponent implements OnInit {
   file: IFile = {

src/UIs/angular/src/app/files/edit-file/edit-file.component.ts

@@ -5,9 +5,10 @@ import { BsModalService, BsModalRef } from "ngx-bootstrap/modal";
 import { IAuditLogEntry } from "src/app/auditlogs/audit-log";
 
 @Component({
-  selector: "app-list-files",
-  templateUrl: "./list-files.component.html",
-  styleUrls: ["./list-files.component.css"],
+    selector: "app-list-files",
+    templateUrl: "./list-files.component.html",
+    styleUrls: ["./list-files.component.css"],
+    standalone: false
 })
 export class ListFilesComponent implements OnInit {
   files: IFile[] = [];

src/UIs/angular/src/app/files/list-files/list-files.component.ts

@@ -6,9 +6,10 @@ import { NgModel, NgForm } from "@angular/forms";
 import { GuidEmpty } from "src/app/shared/constants";
 
 @Component({
-  selector: "app-upload-file",
-  templateUrl: "./upload-file.component.html",
-  styleUrls: ["./upload-file.component.css"],
+    selector: "app-upload-file",
+    templateUrl: "./upload-file.component.html",
+    styleUrls: ["./upload-file.component.css"],
+    standalone: false
 })
 export class UploadFileComponent implements OnInit {
   file: IFile = {

src/UIs/angular/src/app/files/upload-file/upload-file.component.ts

@@ -6,8 +6,9 @@ import { Router } from "@angular/router";
 import { GuidEmpty } from "src/app/shared/constants";
 
 @Component({
-  templateUrl: "./add-product.component.html",
-  styleUrls: ["./add-product.component.css"],
+    templateUrl: "./add-product.component.html",
+    styleUrls: ["./add-product.component.css"],
+    standalone: false
 })
 export class AddProductComponent implements OnInit {
   product: IProduct = {

src/UIs/angular/src/app/products/add-product/add-product.component.ts

@@ -10,9 +10,10 @@ import { BsModalService, BsModalRef } from "ngx-bootstrap/modal";
 import { IProduct } from "../product";
 
 @Component({
-  selector: "app-delete-product",
-  templateUrl: "./delete-product.component.html",
-  styleUrls: ["./delete-product.component.css"]
+    selector: "app-delete-product",
+    templateUrl: "./delete-product.component.html",
+    styleUrls: ["./delete-product.component.css"],
+    standalone: false
 })
 export class DeleteProductComponent implements OnInit {
   @Input() product: IProduct;

src/UIs/angular/src/app/products/delete-product/delete-product.component.ts

@@ -7,9 +7,10 @@ import { IProduct } from "../product";
 import { ProductService } from "../product.service";
 
 @Component({
-  selector: "app-edit-product",
-  templateUrl: "./edit-product.component.html",
-  styleUrls: ["./edit-product.component.css"]
+    selector: "app-edit-product",
+    templateUrl: "./edit-product.component.html",
+    styleUrls: ["./edit-product.component.css"],
+    standalone: false
 })
 export class EditProductComponent implements OnInit {
   product: IProduct;

src/UIs/angular/src/app/products/edit-product/edit-product.component.ts

@@ -8,8 +8,9 @@ import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
 import { NgForm } from "@angular/forms";
 
 @Component({
-  templateUrl: "./list-products.component.html",
-  styleUrls: ["./list-products.component.css"],
+    templateUrl: "./list-products.component.html",
+    styleUrls: ["./list-products.component.css"],
+    standalone: false
 })
 export class ListProductsComponent implements OnInit {
   pageTitle = "Product List";

src/UIs/angular/src/app/products/list-products/list-products.component.ts

@@ -7,8 +7,9 @@ import { BsModalService } from "ngx-bootstrap/modal";
 import { IAuditLogEntry } from "../../auditlogs/audit-log";
 
 @Component({
-  templateUrl: "./product-detail.component.html",
-  styleUrls: ["./product-detail.component.css"],
+    templateUrl: "./product-detail.component.html",
+    styleUrls: ["./product-detail.component.css"],
+    standalone: false
 })
 export class ProductDetailComponent implements OnInit {
   pageTitle = "Product Detail";

src/UIs/angular/src/app/products/view-product-details/product-detail.component.ts

@@ -6,9 +6,10 @@ import { NgForm } from "@angular/forms";
 import { GuidEmpty } from "../shared/constants";
 
 @Component({
-  selector: "app-configuration-entry-list",
-  templateUrl: "./configuration-entry-list.component.html",
-  styleUrls: ["./configuration-entry-list.component.css"],
+    selector: "app-configuration-entry-list",
+    templateUrl: "./configuration-entry-list.component.html",
+    styleUrls: ["./configuration-entry-list.component.css"],
+    standalone: false
 })
 export class ConfigurationEntryListComponent implements OnInit {
   GuidEmpty = GuidEmpty;

src/UIs/angular/src/app/settings/configuration-entry-list.component.ts

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from "@angular/core";
 
 @Pipe({
-  name: "appendCurrentDateTime"
+    name: "appendCurrentDateTime",
+    standalone: false
 })
 export class AppendCurrentDateTimePipe implements PipeTransform {
   transform(value: string, prefix: string = " "): string {

src/UIs/angular/src/app/shared/append-current-datetime.pipe.ts

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform, VERSION } from "@angular/core";
 
 @Pipe({
-  name: "appendVersion"
+    name: "appendVersion",
+    standalone: false
 })
 export class AppendVersionPipe implements PipeTransform {
   transform(value: string, prefix: string = " v"): string {

src/UIs/angular/src/app/shared/append-version.pipe.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
 
 @Component({
-  selector: "app-pagination",
-  templateUrl: "./pagination.component.html",
-  styleUrls: ["./pagination.component.css"],
+    selector: "app-pagination",
+    templateUrl: "./pagination.component.html",
+    styleUrls: ["./pagination.component.css"],
+    standalone: false
 })
 export class PaginationComponent implements OnChanges {
   pageNumbers: Array<number> = [];

src/UIs/angular/src/app/shared/pagination.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
 
 @Component({
-  selector: 'pm-star',
-  templateUrl: './star.component.html',
-  styleUrls: ['./star.component.css']
+    selector: 'pm-star',
+    templateUrl: './star.component.html',
+    styleUrls: ['./star.component.css'],
+    standalone: false
 })
 export class StarComponent implements OnChanges {
   @Input() rating = 0;

src/UIs/angular/src/app/shared/star.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
 
 @Component({
-  selector: "app-timer",
-  templateUrl: "./timer.component.html",
-  styleUrls: [],
+    selector: "app-timer",
+    templateUrl: "./timer.component.html",
+    styleUrls: [],
+    standalone: false
 })
 export class TimerComponent implements OnInit, OnDestroy {
   interval: any;

src/UIs/angular/src/app/shared/timer.component.ts

@@ -6,9 +6,10 @@ import { NgModel, NgForm } from "@angular/forms";
 import { GuidEmpty } from "src/app/shared/constants";
 
 @Component({
-  selector: "app-add-edit-user",
-  templateUrl: "./add-edit-user.component.html",
-  styleUrls: ["./add-edit-user.component.css"],
+    selector: "app-add-edit-user",
+    templateUrl: "./add-edit-user.component.html",
+    styleUrls: ["./add-edit-user.component.css"],
+    standalone: false
 })
 export class AddEditUserComponent implements OnInit {
   formMode: string = "add";

src/UIs/angular/src/app/users/add-edit-user/add-edit-user.component.ts

@@ -5,9 +5,10 @@ import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
 import { UserService } from "../user.service";
 
 @Component({
-  selector: "app-list-users",
-  templateUrl: "./list-users.component.html",
-  styleUrls: ["./list-users.component.css"],
+    selector: "app-list-users",
+    templateUrl: "./list-users.component.html",
+    styleUrls: ["./list-users.component.css"],
+    standalone: false
 })
 export class ListUsersComponent implements OnInit {
   users: IUser[] = [];

src/UIs/angular/src/app/users/list-users/list-users.component.ts

@@ -6,9 +6,10 @@ import { BsModalService, BsModalRef } from "ngx-bootstrap/modal";
 import { NgForm } from "@angular/forms";
 
 @Component({
-  selector: "app-view-user-details",
-  templateUrl: "./view-user-details.component.html",
-  styleUrls: ["./view-user-details.component.css"],
+    selector: "app-view-user-details",
+    templateUrl: "./view-user-details.component.html",
+    styleUrls: ["./view-user-details.component.css"],
+    standalone: false
 })
 export class ViewUserDetailsComponent implements OnInit {
   user: IUser = null;