openvidu-testapp: upgrade dependencies, including Angular 22

openvidu-testapp/angular.json

@@ -81,6 +81,7 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
+            "externalDependencies": ["node:crypto"],
             "polyfills": [
               "zone.js",
               "zone.js/testing",

openvidu-testapp/package.json

@@ -18,22 +18,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.14",
+    "@angular/animations": "^22.0.6",
-    "@angular/cdk": "^21.2.12",
+    "@angular/cdk": "^22.0.4",
-    "@angular/common": "^21.2.14",
+    "@angular/common": "^22.0.6",
-    "@angular/compiler": "^21.2.14",
+    "@angular/compiler": "^22.0.6",
-    "@angular/core": "^21.2.14",
+    "@angular/core": "^22.0.6",
-    "@angular/forms": "^21.2.14",
+    "@angular/forms": "^22.0.6",
-    "@angular/material": "^21.2.12",
+    "@angular/material": "^22.0.4",
-    "@angular/platform-browser": "^21.2.14",
+    "@angular/platform-browser": "^22.0.6",
-    "@angular/router": "^21.2.14",
+    "@angular/router": "^22.0.6",
-    "@livekit/protocol": "^1.46.0",
+    "@livekit/protocol": "^1.49.0",
     "@livekit/track-processors": "^0.7.2",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.1",
     "json-stringify-safe": "5.0.1",
-    "livekit-client": "2.19.0",
+    "livekit-client": "2.20.1",
-    "livekit-server-sdk": "^2.15.3",
+    "livekit-server-sdk": "^2.17.0",
     "rxjs": "~7.8.2",
     "stream-browserify": "^3.0.0",
     "tslib": "^2.8.1",
@@ -41,21 +41,22 @@
     "zone.js": "~0.16.2"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.12",
+    "@angular/build": "^22.0.6",
-    "@angular/cli": "~21.2.12",
+    "@angular/cli": "~22.0.6",
-    "@angular/compiler-cli": "^21.2.14",
+    "@angular/compiler-cli": "^22.0.6",
-    "@types/dom-mediacapture-transform": "^0.1.11",
+    "@types/dom-mediacapture-transform": "^0.1.12",
     "@types/events": "^3.0.3",
     "@types/jasmine": "~6.0.0",
     "@types/json-stringify-safe": "^5.0.3",
-    "@types/node": "^25.9.1",
+    "@types/node": "^26.1.1",
     "http-server": "^14.1.1",
-    "jasmine-core": "~6.2.0",
+    "istanbul-lib-instrument": "^6.0.3",
+    "jasmine-core": "~6.3.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.2.0",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3"
   }
 }

openvidu-testapp/src/app/app.component.spec.ts

@@ -1,29 +1,18 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideRouter } from '@angular/router';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
+  beforeEach(() =>
-    imports: [RouterTestingModule],
+    TestBed.configureTestingModule({
-    declarations: [AppComponent]
+      imports: [AppComponent],
-  }));
+      providers: [provideRouter([])],
+    })
+  );
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'openvidu-testapp-livekit'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('openvidu-testapp-livekit');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('openvidu-testapp-livekit app is running!');
-  });
 });

openvidu-testapp/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterOutlet, RouterLink } from '@angular/router';
 import { LogLevel, setLogLevel } from 'livekit-client';
@@ -13,6 +13,7 @@ import { MatButtonModule } from '@angular/material/button';
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormsModule, RouterOutlet, RouterLink, MatSidenavModule, MatToolbarModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class AppComponent {

openvidu-testapp/src/app/components/audio-track/audio-track.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TrackPublication } from 'livekit-client';
 
 import { AudioTrackComponent } from './audio-track.component';
 
@@ -8,10 +9,14 @@ describe('AudioTrackComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [AudioTrackComponent]
+      imports: [AudioTrackComponent]
     });
     fixture = TestBed.createComponent(AudioTrackComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('trackPublication', {
+      source: 'microphone',
+    } as unknown as TrackPublication);
+    fixture.componentRef.setInput('index', 0);
     fixture.detectChanges();
   });
 

openvidu-testapp/src/app/components/audio-track/audio-track.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { LocalTrack } from 'livekit-client';
 import { MatIconModule } from '@angular/material/icon';
@@ -9,6 +9,7 @@ import { TrackComponent } from '../track/track.component';
     selector: 'app-audio-track',
     templateUrl: './audio-track.component.html',
     styleUrl: './audio-track.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [NgClass, MatIconModule, MatTooltipModule],
 })
 export class AudioTrackComponent extends TrackComponent {

openvidu-testapp/src/app/components/data-track/data-track.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectorRef } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import {
@@ -15,6 +15,7 @@ import {
   selector: 'app-data-track',
   templateUrl: './data-track.component.html',
   styleUrl: './data-track.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [MatIconModule, MatTooltipModule],
 })
 export class DataTrackComponent {

openvidu-testapp/src/app/components/dialogs/events-dialog/events-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { SlicePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -81,6 +81,7 @@ export interface EventGroup {
         '.group-label:first-child { margin-top: 0; }',
         '.extra-toggle { margin-top: 5px; }'
     ],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [SlicePipe, FormsModule, MatDialogModule, MatSlideToggleModule, MatDividerModule, MatButtonModule],
 })
 export class EventsDialogComponent {

openvidu-testapp/src/app/components/dialogs/info-dialog/info-dialog.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { InfoDialogComponent } from './info-dialog.component';
 
 describe('InfoDialogComponent', () => {
@@ -8,7 +9,8 @@ describe('InfoDialogComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [InfoDialogComponent]
+      imports: [InfoDialogComponent],
+      providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }]
     });
     fixture = TestBed.createComponent(InfoDialogComponent);
     component = fixture.componentInstance;

openvidu-testapp/src/app/components/dialogs/info-dialog/info-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnDestroy, ViewChild, inject } from '@angular/core';
+import { Component, NgZone, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { take } from 'rxjs/operators';
@@ -11,6 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
   selector: 'app-info-dialog',
   templateUrl: './info-dialog.component.html',
   styleUrl: './info-dialog.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [FormsModule, CdkTextareaAutosize, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class InfoDialogComponent implements OnDestroy {

openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { OptionsDialogComponent } from './options-dialog.component';
 
 describe('OptionsDialogComponent', () => {
@@ -8,7 +9,11 @@ describe('OptionsDialogComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [OptionsDialogComponent]
+      imports: [OptionsDialogComponent],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ]
     });
     fixture = TestBed.createComponent(OptionsDialogComponent);
     component = fixture.componentInstance;

openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { NgClass, UpperCasePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@@ -27,6 +27,7 @@ import {
     selector: 'app-options-dialog',
     templateUrl: './options-dialog.component.html',
     styleUrl: './options-dialog.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [NgClass, UpperCasePipe, FormsModule, MatDialogModule, MatRadioModule, MatDividerModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, VideoResolutionComponent],
 })
 export class OptionsDialogComponent {

openvidu-testapp/src/app/components/dialogs/options-dialog/video-resolution/video-resolution.component.spec.ts

@@ -8,7 +8,7 @@ describe('VideoResolutionComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [VideoResolutionComponent]
+      imports: [VideoResolutionComponent]
     });
     fixture = TestBed.createComponent(VideoResolutionComponent);
     component = fixture.componentInstance;

openvidu-testapp/src/app/components/dialogs/options-dialog/video-resolution/video-resolution.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -7,6 +7,7 @@ import { MatInputModule } from '@angular/material/input';
     selector: 'app-video-resolution',
     templateUrl: './video-resolution.component.html',
     styleUrl: './video-resolution.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormsModule, MatFormFieldModule, MatInputModule],
 })
 export class VideoResolutionComponent {

openvidu-testapp/src/app/components/dialogs/processor-dialog/processor-dialog.component.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy,
   ViewChild,
   inject,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@@ -28,6 +29,7 @@ import {
   selector: 'app-processor-dialog',
   templateUrl: './processor-dialog.component.html',
   styleUrl: './processor-dialog.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [FormsModule, MatDialogModule, MatSlideToggleModule, MatFormFieldModule, MatSelectModule, MatSliderModule, MatButtonModule, MatTooltipModule, MatDividerModule, MatIconModule, MatInputModule],
 })
 export class ProcessorDialogComponent implements AfterViewInit, OnDestroy {

openvidu-testapp/src/app/components/dialogs/room-api-dialog/room-api-dialog.component.ts

@@ -1,6 +1,6 @@
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -40,6 +40,7 @@ import {
     selector: 'app-room-api-dialog',
     templateUrl: './room-api-dialog.component.html',
     styleUrl: './room-api-dialog.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatCheckboxModule, MatDividerModule, MatSelectModule, MatChipsModule, MatIconModule, MatTooltipModule, MatSlideToggleModule],
 })
 export class RoomApiDialogComponent {

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { RoomConf } from '../test-sessions/test-sessions.component';
 import { OpenviduInstanceComponent } from './openvidu-instance.component';
 
 describe('OpenviduInstanceComponent', () => {
@@ -8,10 +9,18 @@ describe('OpenviduInstanceComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [OpenviduInstanceComponent]
+      imports: [OpenviduInstanceComponent]
     });
     fixture = TestBed.createComponent(OpenviduInstanceComponent);
     component = fixture.componentInstance;
+    const roomConf: RoomConf = {
+      uid: 0,
+      subscriber: true,
+      publisher: true,
+      startSession: false,
+    };
+    fixture.componentRef.setInput('roomConf', roomConf);
+    fixture.componentRef.setInput('index', 0);
     fixture.detectChanges();
   });
 

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -5,6 +5,7 @@ import {
   Input,
   Output,
   inject,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import { NgClass, KeyValuePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -77,6 +78,7 @@ import {
   selector: 'app-openvidu-instance',
   templateUrl: './openvidu-instance.component.html',
   styleUrl: './openvidu-instance.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [NgClass, KeyValuePipe, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatExpansionModule, ParticipantComponent],
 })
 export class OpenviduInstanceComponent {

openvidu-testapp/src/app/components/participant/participant.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Room } from 'livekit-client';
 
 import { ParticipantComponent } from './participant.component';
 
@@ -8,10 +9,14 @@ describe('ParticipantComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [ParticipantComponent]
+      imports: [ParticipantComponent]
     });
     fixture = TestBed.createComponent(ParticipantComponent);
     component = fixture.componentInstance;
+    const room = new Room();
+    fixture.componentRef.setInput('room', room);
+    fixture.componentRef.setInput('participant', room.localParticipant);
+    fixture.componentRef.setInput('index', 0);
     fixture.detectChanges();
   });
 

openvidu-testapp/src/app/components/participant/participant.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject, ChangeDetectionStrategy } from '@angular/core';
 import { NgClass, KeyValuePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -47,6 +47,7 @@ import {
     selector: 'app-participant',
     templateUrl: './participant.component.html',
     styleUrl: './participant.component.css',
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [NgClass, KeyValuePipe, MatIconModule, MatTooltipModule, MatExpansionModule, VideoTrackComponent, AudioTrackComponent, DataTrackComponent],
 })
 export class ParticipantComponent {

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.spec.ts

@@ -8,7 +8,7 @@ describe('TestScenariosComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ TestScenariosComponent ]
+      imports: [TestScenariosComponent]
     })
     .compileComponents();
   }));

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
@@ -49,6 +49,7 @@ export interface User {
   selector: 'app-test-scenarios',
   templateUrl: './test-scenarios.component.html',
   styleUrl: './test-scenarios.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, UsersTableComponent],
 })
 export class TestScenariosComponent implements OnInit, OnDestroy {

openvidu-testapp/src/app/components/test-sessions/test-sessions.component.spec.ts

@@ -8,7 +8,7 @@ describe('TestSessionsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TestSessionsComponent]
+      imports: [TestSessionsComponent]
     });
     fixture = TestBed.createComponent(TestSessionsComponent);
     component = fixture.componentInstance;

openvidu-testapp/src/app/components/test-sessions/test-sessions.component.ts

@@ -1,5 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { TestFeedService } from 'src/app/services/test-feed.service';
@@ -30,6 +30,7 @@ export interface RoomConf {
             ]),
         ]),
     ],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, OpenviduInstanceComponent],
 })
 export class TestSessionsComponent {

openvidu-testapp/src/app/components/track/track.component.ts

@@ -5,6 +5,7 @@ import {
   Input,
   Output,
   ViewChild,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import {
   TrackPublication,
@@ -28,6 +29,7 @@ import {
 
 @Component({
     selector: 'app-track',
+    changeDetection: ChangeDetectionStrategy.Eager,
     template: '',
 })
 export class TrackComponent {

openvidu-testapp/src/app/components/users-table/table-video.component.ts

@@ -4,6 +4,7 @@ import {
   AfterViewInit,
   ViewChild,
   ElementRef,
+  ChangeDetectionStrategy
 } from '@angular/core';
 import { AudioTrack, VideoTrack } from 'livekit-client';
 
@@ -12,6 +13,7 @@ import { AudioTrack, VideoTrack } from 'livekit-client';
     template: `
     <video #mediaElement [id]="videoId" autoplay playsinline></video>
   `,
+    changeDetection: ChangeDetectionStrategy.Eager,
     styles: [
         `
       video {

openvidu-testapp/src/app/components/users-table/users-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { AudioTrack, VideoTrack } from 'livekit-client';
 import { MatBadgeModule } from '@angular/material/badge';
 import { CallbackPipe } from 'src/app/pipes/callback.pipe';
@@ -9,6 +9,7 @@ import { User } from '../test-scenarios/test-scenarios.component';
   selector: 'app-users-table',
   styleUrl: 'users-table.component.css',
   templateUrl: 'users-table.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [MatBadgeModule, CallbackPipe, TableVideoComponent],
 })
 export class UsersTableComponent {

openvidu-testapp/src/app/components/video-track/video-track.component.spec.ts

@@ -8,7 +8,7 @@ describe('VideoTrackComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [VideoTrackComponent]
+      imports: [VideoTrackComponent]
     });
     fixture = TestBed.createComponent(VideoTrackComponent);
     component = fixture.componentInstance;

openvidu-testapp/src/app/components/video-track/video-track.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { NgClass } from '@angular/common';
 import {
   LocalTrack,
@@ -20,6 +20,7 @@ import { MatSelectModule } from '@angular/material/select';
   selector: 'app-video-track',
   templateUrl: './video-track.component.html',
   styleUrl: './video-track.component.css',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [NgClass, MatIconModule, MatTooltipModule, MatFormFieldModule, MatSelectModule],
 })
 export class VideoTrackComponent extends TrackComponent {

openvidu-testapp/src/main.ts

@@ -2,7 +2,7 @@ import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withXhr } from '@angular/common/http';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 import { AppComponent } from './app/app.component';
@@ -12,7 +12,7 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideZoneChangeDetection(),provideRouter(routes, withHashLocation()),
     provideAnimationsAsync(),
-    provideHttpClient(),
+    provideHttpClient(withXhr()),
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },

openvidu-testapp/tsconfig.app.json

@@ -14,5 +14,13 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

openvidu-testapp/tsconfig.json

@@ -2,7 +2,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
@@ -22,6 +21,8 @@
     "strictPropertyInitialization": false,
     "skipLibCheck": true,
     "paths": {
+      "src/*": ["./src/*"],
+      "node_modules/*": ["./node_modules/*"],
       "crypto": ["./node_modules/crypto-browserify"],
       "node:crypto": ["./node_modules/crypto-browserify"],
       "stream": ["./node_modules/stream-browserify"],

openvidu-testapp/tsconfig.spec.json

@@ -10,5 +10,13 @@
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }