Updated project to angular v19 (#793)

Author: lindolo25

angular.json

@@ -9,13 +9,16 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
@@ -24,12 +27,11 @@
               "src/styles.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -44,8 +46,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",

package.json

@@ -14,41 +14,35 @@
     "ng": "ng",
     "start": "ng serve --configuration production",
     "build": "ng build --configuration production",
-    "test": "npm run build && cypress-runner run",
-    "test:open": "npm run build && cypress-runner open",
+    "test": "npm run build && cypress-runner run --path=dist/browser",
+    "test:open": "npm run build && cypress-runner open --path=dist/browser",
     "e2e": "npm run test",
-    "gh-pages": "ng build --base-href=/sample-app-angular/ && shx rm -rf pages && shx mkdir pages && cd pages && git init && git remote add pages [email protected]:ui-router/sample-app-angular.git && git fetch pages && git checkout gh-pages && git rm -rf * && shx mv ../dist/* . && git add . && git commit -m 'Update gh-pages' . && git push && cd .. && shx rm -rf pages"
+    "gh-pages": "ng build --base-href=/sample-app-angular/ && shx rm -rf pages && shx mkdir pages && cd pages && git init && git remote add pages [email protected]:ui-router/sample-app-angular.git && git fetch pages && git checkout gh-pages && git rm -rf * && shx mv ../dist/browser/* . && git add . && git commit -m 'Update gh-pages' . && git push && cd .. && shx rm -rf pages"
   },
   "private": true,
   "dependencies": {
-    "@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/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",
     "@uirouter/angular": "^14.0.0",
     "@uirouter/core": "6.1.0",
     "@uirouter/rx": "1.0.0",
     "@uirouter/visualizer": "^7.2.1",
-    "core-js": "^2.5.7",
     "rxjs": "^7.4.0",
-    "rxjs-compat": "^6.6.7",
-    "ts-helpers": "^1.1.2",
-    "tslib": "^2.3.1",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular/animations": "^18.0.6",
-    "@angular/cli": "^18.0.7",
-    "@angular/compiler-cli": "^18.0.6",
+    "@angular-devkit/build-angular": "^19.0.6",
+    "@angular/animations": "^19.0.5",
+    "@angular/cli": "^19.0.6",
+    "@angular/compiler-cli": "^19.0.5",
     "@types/jasmine": "~3.10.2",
     "@uirouter/cypress-runner": "^3.0.0",
-    "html-webpack-plugin": "5.5.0",
-    "shx": "^0.3.3",
     "tslint": "6.1.3",
-    "typescript": "~5.4.5"
+    "typescript": "~5.6.3"
   },
   "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

src/app/app.component.ts

@@ -12,8 +12,8 @@ import { AppConfigService } from './global/app-config.service';
  * It has a `ui-view` viewport for nested states to fill in.
  */
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <div #dialogdiv></div>
     <div class="navheader">
       <ul *ngIf="isAuthenticated" class="nav nav-tabs">
@@ -42,9 +42,9 @@ import { AppConfigService } from './global/app-config.service';
     </div>
 
     <ui-view></ui-view>
-`
-  ,
-  styles: []
+`,
+    styles: [],
+    standalone: false
 })
 export class AppComponent implements OnInit {
   @ViewChild('dialogdiv', { read: ViewContainerRef, static: true }) dialogdiv;

src/app/contacts/contact-detail.component.ts

@@ -4,8 +4,8 @@ import { Component, Input } from '@angular/core';
  * This component renders a read only view of the details for a single contact.
  */
 @Component({
-  selector: 'app-contact-detail',
-  template: `
+    selector: 'app-contact-detail',
+    template: `
   <div class="flex-h">
     <div class="details">
       <h3>{{contact.name.first}} {{contact.name.last}}</h3>
@@ -25,9 +25,9 @@ import { Component, Input } from '@angular/core';
       <img [src]="contact.picture"/>
     </div>
   </div>
-`
-  ,
-  styles: []
+`,
+    styles: [],
+    standalone: false
 })
 export class ContactDetailComponent {
   @Input() contact;

src/app/contacts/contact-list.component.ts

@@ -7,8 +7,8 @@ import { Component, Input } from '@angular/core';
  * Each list item is a clickable link to the `contacts.contact` details substate
  */
 @Component({
-  selector: 'app-contact-list',
-  template: `
+    selector: 'app-contact-list',
+    template: `
   <ul class="selectlist list-unstyled">
     <li>
       <!-- This link is a relative ui-sref to the contacts.new state. -->
@@ -31,7 +31,8 @@ import { Component, Input } from '@angular/core';
     </li>
   </ul>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class ContactListComponent {
   @Input() contacts;

src/app/contacts/contact.component.ts

@@ -7,8 +7,8 @@ import { Component, Input } from '@angular/core';
  * Another button edits the contact by linking to `contacts.contact.edit` state.
  */
 @Component({
-  selector: 'app-contact',
-  template: `
+    selector: 'app-contact',
+    template: `
     <div class="contact">
       <app-contact-detail [contact]="contact"></app-contact-detail>
     
@@ -25,7 +25,8 @@ import { Component, Input } from '@angular/core';
       <ui-view></ui-view>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class ContactComponent {
   @Input() contact;

src/app/contacts/contacts.component.ts

@@ -7,8 +7,8 @@ import { Component, Input } from '@angular/core';
  * On the right is the ui-view viewport where contact details appear.
  */
 @Component({
-  selector: 'app-contacts',
-  template: `
+    selector: 'app-contacts',
+    template: `
     <div class="my-contacts flex-h">
     
       <app-contact-list [contacts]="contacts" class="flex nogrow"></app-contact-list>
@@ -19,7 +19,8 @@ import { Component, Input } from '@angular/core';
       </ui-view>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class ContactsComponent {
   @Input() contacts;

src/app/contacts/edit-contact.component.ts

@@ -28,8 +28,8 @@ import { copy } from '../util/util';
  *   the `reload: true` option re-fetches the contacts resolve data from the server
  */
 @Component({
-  selector: 'app-edit-contact',
-  template: `
+    selector: 'app-edit-contact',
+    template: `
     <div class="contact">
       <div class="details">
         <div><label>First</label><input type="text" [(ngModel)]="contact.name.first"></div>
@@ -55,7 +55,8 @@ import { copy } from '../util/util';
       </div>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class EditContactComponent implements OnInit {
   @Input() pristineContact;

src/app/global/dialog.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit, HostBinding } from '@angular/core';
 import { wait } from '../util/util';
 
 @Component({
-  selector: 'app-dialog',
-  template: `
+    selector: 'app-dialog',
+    template: `
       <div class="backdrop" [class.active]="visible"></div>
       <div class='wrapper'>
         <div class="content">
@@ -17,7 +17,8 @@ import { wait } from '../util/util';
         </div>
       </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class DialogComponent implements OnInit {
   @HostBinding('class.dialog') dialog = true;

src/app/home.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 // This is a home component for authenticated users.
 // It shows giant buttons which activate their respective submodules: Messages, Contacts, Preferences
 @Component({
-  selector: 'app-home',
-  template: `
+    selector: 'app-home',
+    template: `
     <div class="home buttons">
       <button uiSref="mymessages" class="btn btn-primary">
         <h1><i class="fa fa-envelope"></i></h1>
@@ -21,7 +21,8 @@ import { Component, OnInit } from '@angular/core';
       </button>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class HomeComponent {
   constructor() { }

src/app/login.component.ts

@@ -10,8 +10,8 @@ import { AppConfigService } from './global/app-config.service';
  * It shows errors if the authentication failed for any reason.
  */
 @Component({
-  selector: 'app-login',
-  template: `
+    selector: 'app-login',
+    template: `
     <div class="container">
       <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
         <h3>Log In</h3>
@@ -53,7 +53,8 @@ import { AppConfigService } from './global/app-config.service';
       </div>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class LoginComponent {
   @Input() returnTo: TargetState;

src/app/main.component.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-main',
-  template: `<ui-view>Loading...</ui-view>`
+    selector: 'app-main',
+    template: `<ui-view>Loading...</ui-view>`,
+    standalone: false
 })
 export class MainComponent {}

src/app/mymessages/compose.component.ts

@@ -14,8 +14,8 @@ import { copy } from '../util/util';
  * A Send button sends the message
  */
 @Component({
-  selector: 'app-compose',
-  template: `
+    selector: 'app-compose',
+    template: `
     <div class="compose">
       <div class="header">
         <div class="flex-h"> <label>Recipient</label> <input type="text" id="to" name="to" [(ngModel)]="message.to"> </div>
@@ -34,7 +34,8 @@ import { copy } from '../util/util';
       </div>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class ComposeComponent implements OnInit {
   // data

src/app/mymessages/folder-list.component.ts

@@ -4,8 +4,8 @@ import { Component, Input } from '@angular/core';
  * Renders a list of folders
  */
 @Component({
-  selector: 'app-folder-list',
-  template: `
+    selector: 'app-folder-list',
+    template: `
     <!-- Renders a list of folders -->
     <div class="folderlist">
       <ul class="selectlist list-unstyled">
@@ -20,7 +20,8 @@ import { Component, Input } from '@angular/core';
       </ul>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class FolderListComponent {
   @Input() folders: any[];

src/app/mymessages/format-message.pipe.ts

@@ -1,7 +1,8 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'formatMessage'
+    name: 'formatMessage',
+    standalone: false
 })
 export class FormatMessagePipe implements PipeTransform {
   transform(value: string, args?: any): string {

src/app/mymessages/message-list.component.ts

@@ -6,13 +6,14 @@ import { Message } from './interface';
  * This component renders a list of messages using the `messageTable` component
  */
 @Component({
-  selector: 'app-message-list',
-  template: `
+    selector: 'app-message-list',
+    template: `
     <div class="messages">
       <app-message-table [columns]="folder.columns" [messages]="messages$ | async"></app-message-table>
     </div>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class MessageListComponent {
   @Input() folder;

src/app/mymessages/message-table.component.ts

@@ -10,8 +10,8 @@ import { Component, Input } from '@angular/core';
  * Shows/hides specific columns based on the `columns` input binding.
  */
 @Component({
-  selector: 'app-message-table',
-  template: `
+    selector: 'app-message-table',
+    template: `
     <table>
       <thead>
         <tr>
@@ -36,7 +36,8 @@ import { Component, Input } from '@angular/core';
   
     </table>
 `,
-  styles: []
+    styles: [],
+    standalone: false
 })
 export class MessageTableComponent {
   @Input() columns: any[];