Chore: Angular 19 (#919)

* Apply angular 19 dependencies in package.json

* Add missing standalone false doe the angular components.

* chore: update dependencies

* chore: update dependencies

---------

Co-authored-by: Egor Boaghi <[email protected]>
Co-authored-by: wawyed <[email protected]>

angular.json

@@ -60,18 +60,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-cli-app:build"
+            "buildTarget": "angular-cli-app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-cli-app:build:production"
+              "buildTarget": "angular-cli-app:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-cli-app:build"
+            "buildTarget": "angular-cli-app:build"
           }
         },
         "test": {
@@ -121,4 +121,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

package.json

@@ -19,35 +19,35 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "^18.0.6",
-    "@angular/common": "^18.0.6",
-    "@angular/compiler": "^18.0.6",
-    "@angular/core": "^18.0.6",
-    "@angular/forms": "^18.0.6",
-    "@angular/platform-browser": "^18.0.6",
-    "@angular/platform-browser-dynamic": "^18.0.6",
-    "@angular/router": "^18.0.6",
-    "@angular/upgrade": "^18.0.6",
-    "@uirouter/angular": "^14.0.0",
+    "@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",
+    "@angular/upgrade": "^19.0.5",
+    "@uirouter/angular": "^16.0.0",
     "@uirouter/angular-hybrid": "^18.0.0",
-    "@uirouter/angularjs": "^1.1.0",
-    "@uirouter/core": "^6.1.0",
+    "@uirouter/angularjs": "^1.1.1",
+    "@uirouter/core": "^6.1.1",
     "@uirouter/rx": "1.0.0",
     "@uirouter/visualizer": "^7.2.1",
     "angular": "1.8.3",
     "core-js": "^2.4.1",
     "postcss": "8.4.4",
-    "rxjs": "^7.4.0",
+    "rxjs": "~7.8.0",
     "rxjs-compat": "^6.6.7",
-    "tslib": "2.6.2",
-    "zone.js": "~0.14.4"
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular/cli": "^18.0.7",
-    "@angular/compiler-cli": "^18.0.6",
-    "@angular/language-service": "^18.0.6",
-    "@types/angular": "^1.8.3",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.5",
+    "@angular/language-service": "^19.0.5",
+    "@types/angular": "^1.8.9",
     "@types/jasmine": "~3.10.2",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^16.11.11",
@@ -64,7 +64,7 @@
     "shx": "0.3.3",
     "ts-node": "~10.9.2",
     "tslint": "~6.1.0",
-    "typescript": "5.4.5",
+    "typescript": "~5.6.3",
     "wait-on": "6.0.0"
   },
   "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"

src/app/contacts/contact.component.ts

@@ -8,16 +8,17 @@ import {Component, Input} from "@angular/core";
  */
 @Component({
   selector: 'contact',
+  standalone: false,
   template: `
     <div class="contact">
       <contact-detail [contact]="contact"></contact-detail>
-    
+
       <!-- This button has an ui-sref to the mymessages.compose state. The ui-sref provides the mymessages.compose
            state with an non-url parameter, which is used as the initial message model -->
       <button class="btn btn-primary" uiSref="mymessages.compose" [uiParams]="{ message: { to: contact.email } }">
         <i class="fa fa-envelope"></i><span>Message</span>
       </button>
-    
+
       <!-- This button has a relative ui-sref to the contacts.contact.edit state. -->
       <button class="btn btn-primary" uiSref=".edit">
         <i class="fa fa-pencil"></i><span>Edit Contact</span>

src/app/contacts/contactDetail.component.ts

@@ -5,6 +5,7 @@ import {Component, Input} from "@angular/core";
  */
 @Component({
   selector: 'contact-detail',
+  standalone: false,
   template: `
   <div class="flex-h">
     <div class="details">

src/app/contacts/contactList.component.ts

@@ -2,12 +2,13 @@ import {Component, Input} from "@angular/core";
 
 /**
  * This component renders a list of contacts.
- * 
+ *
  * At the top is a "new contact" button.
  * Each list item is a clickable link to the `contacts.contact` details substate
  */
 @Component({
   selector: 'contact-list',
+  standalone: false,
   template: `
   <ul class="selectlist list-unstyled">
     <li>

src/app/contacts/contacts.component.ts

@@ -8,11 +8,12 @@ import {Component, Input} from "@angular/core";
  */
 @Component({
   selector: 'contacts',
+  standalone: false,
   template: `
     <div class="my-contacts flex-h">
-    
+
       <contact-list [contacts]="contacts" class="flex nogrow"></contact-list>
-    
+
       <div ui-view>
         <!-- This default content is displayed when the ui-view is not filled in by a child state -->
         <h4 style="margin: 1em 2em;">Select a contact</h4>

src/app/contacts/editContact.component.ts

@@ -28,6 +28,7 @@ import {Component, Input, Inject, Optional} from "@angular/core";
  */
 @Component({
   selector: 'edit-contact',
+  standalone: false,
   template: `
     <div class="contact">
       <div class="details">
@@ -43,9 +44,9 @@ import {Component, Input, Inject, Optional} from "@angular/core";
         <div><label>Zip</label><input type="text" [(ngModel)]="contact.address.zip"></div>
         <div><label>Image</label><input type="text" [(ngModel)]="contact.picture"></div>
       </div>
-    
+
       <hr>
-    
+
       <div>
         <!-- This button's ui-sref relatively targets the parent state, i.e., contacts.contact -->
         <button class="btn btn-primary" uiSref="^"><i class="fa fa-close"></i><span>Cancel</span></button>

src/app/prefs/prefs.component.ts

@@ -13,6 +13,7 @@ import { Component, Inject } from '@angular/core';
           <button class="btn btn-primary" (click)="savePrefs()">Save</button>
       </div>
   `,
+  standalone: false,
 })
 export class PrefsComponent {
   prefs;