Upgrade web-ui Angular to v19 and update zone.js

web-ui/package.json

@@ -13,31 +13,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "18.2.13",
-    "@angular/cdk": "18.2.13",
-    "@angular/common": "18.2.13",
-    "@angular/compiler": "18.2.13",
-    "@angular/core": "18.2.13",
-    "@angular/forms": "18.2.13",
-    "@angular/material": "18.2.13",
-    "@angular/platform-browser": "18.2.13",
-    "@angular/platform-browser-dynamic": "18.2.13",
-    "@angular/platform-server": "18.2.13",
-    "@angular/router": "18.2.13",
-    "@angular/ssr": "18.2.13",
+    "@angular/animations": "19.2.18",
+    "@angular/cdk": "^19.2.19",
+    "@angular/common": "19.2.18",
+    "@angular/compiler": "19.2.18",
+    "@angular/core": "19.2.18",
+    "@angular/forms": "19.2.18",
+    "@angular/material": "^19.2.19",
+    "@angular/platform-browser": "19.2.18",
+    "@angular/platform-browser-dynamic": "19.2.18",
+    "@angular/platform-server": "19.2.18",
+    "@angular/router": "19.2.18",
+    "@angular/ssr": "19.2.19",
     "@conversationai/sensemaker-visualizations": "^1.0.46",
     "@sinclair/typebox": "^0.34.27",
     "express": "^4.18.2",
-    "ngx-markdown": "^18.0.0",
+    "ngx-markdown": "^19.1.1",
     "papaparse": "^5.4.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.13",
-    "@angular/cli": "18.2.13",
-    "@angular/compiler-cli": "18.2.13",
+    "@angular-devkit/build-angular": "19.2.19",
+    "@angular/cli": "19.2.19",
+    "@angular/compiler-cli": "19.2.18",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",

web-ui/server.ts

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import { CommonEngine } from '@angular/ssr/node';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';

web-ui/src/app/app.component.ts

@@ -3,13 +3,12 @@ import { MatIconRegistry } from "@angular/material/icon";
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    RouterOutlet,
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
+    selector: 'app-root',
+    imports: [
+        RouterOutlet,
+    ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss'
 })
 export class AppComponent {
   constructor(private matIconRegistry: MatIconRegistry) {

web-ui/src/app/app.config.ts

@@ -14,6 +14,5 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes),
     provideClientHydration(),
     provideAnimationsAsync(),
-    provideAnimationsAsync(),
   ],
 };

web-ui/src/app/components/dialog/dialog.component.ts

@@ -12,16 +12,15 @@ type DialogData = {
 };
 
 @Component({
-  selector: 'app-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatIconModule,
-  ],
-  templateUrl: './dialog.component.html',
-  styleUrl: './dialog.component.scss'
+    selector: 'app-dialog',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+    ],
+    templateUrl: './dialog.component.html',
+    styleUrl: './dialog.component.scss'
 })
 export class DialogComponent {
   constructor(

web-ui/src/app/components/sensemaking-chart-wrapper/sensemaking-chart-wrapper.component.ts

@@ -10,11 +10,10 @@ import {
 import '@conversationai/sensemaker-visualizations';
 
 @Component({
-  selector: 'app-sensemaking-chart-wrapper',
-  standalone: true,
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
+    selector: 'app-sensemaking-chart-wrapper',
+    imports: [CommonModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
     <div class="chart-container">
       <sensemaker-chart
         #sensemakingChartEl
@@ -26,14 +25,14 @@ import '@conversationai/sensemaker-visualizations';
       ></sensemaker-chart>
     </div>
   `,
-  styles: [
-    `
+    styles: [
+        `
       .chart-container {
         width: 100%;
         height: 100%;
       }
     `,
-  ],
+    ]
 })
 export class SensemakingChartWrapperComponent implements AfterViewInit {
   @ViewChild('sensemakingChartEl') chartElementRef!: ElementRef<

web-ui/src/app/components/statement-card/statement-card.component.ts

@@ -6,15 +6,14 @@ import { CustomTooltipDirective } from "../../directives/custom-tooltip/custom-t
 import { VoteGroup, Statement } from "../../models/report.model";
 
 @Component({
-  selector: 'app-statement-card',
-  standalone: true,
-  imports: [
-    CommonModule,
-    CustomTooltipDirective,
-    OverlayModule,
-  ],
-  templateUrl: './statement-card.component.html',
-  styleUrl: './statement-card.component.scss'
+    selector: 'app-statement-card',
+    imports: [
+        CommonModule,
+        CustomTooltipDirective,
+        OverlayModule,
+    ],
+    templateUrl: './statement-card.component.html',
+    styleUrl: './statement-card.component.scss'
 })
 export class StatementCardComponent implements OnInit {
   @Input() data?: Statement;

web-ui/src/app/directives/custom-tooltip/custom-tooltip.directive.spec.ts

@@ -6,10 +6,11 @@ import { CustomTooltipDirective } from './custom-tooltip.directive';
 
 // test host component
 @Component({
-  template: `
+    template: `
     <div [customTooltip]="tooltipTemplate">Host element</div>
     <ng-template #tooltipTemplate>Tooltip content</ng-template>
   `,
+    standalone: false
 })
 class TestComponent {
   @ViewChild('tooltipTemplate') tooltipTemplate!: TemplateRef<any>;

web-ui/src/app/pages/report/report.component.ts

@@ -65,25 +65,24 @@ importedTopicData.forEach((t: Topic) => {
 });
 
 @Component({
-  selector: 'app-report',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MarkdownModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatIconModule,
-    MatSidenavModule,
-    MatTooltipModule,
-    SensemakingChartWrapperComponent,
-    StatementCardComponent,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  templateUrl: './report.component.html',
-  styleUrl: './report.component.scss'
+    selector: 'app-report',
+    imports: [
+        CommonModule,
+        FormsModule,
+        MarkdownModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatIconModule,
+        MatSidenavModule,
+        MatTooltipModule,
+        SensemakingChartWrapperComponent,
+        StatementCardComponent,
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    templateUrl: './report.component.html',
+    styleUrl: './report.component.scss'
 })
 export class ReportComponent {
   // data sources

web-ui/src/main.server.ts

@@ -1,7 +1,7 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;