frontend: Updated to Angular 19

This commit is contained in:
Carlos Santos 2025-10-03 13:41:46 +02:00
parent 893952c6c4
commit 4bd66fc53a
39 changed files with 21441 additions and 18715 deletions

File diff suppressed because it is too large Load Diff

View File

@ -23,34 +23,34 @@
"format:code": "prettier --ignore-path ../gitignore . --write" "format:code": "prettier --ignore-path ../gitignore . --write"
}, },
"dependencies": { "dependencies": {
"@angular/animations": "18.2.5", "@angular/animations": "19.2.15",
"@angular/cdk": "18.2.5", "@angular/cdk": "19.2.19",
"@angular/common": "18.2.5", "@angular/common": "19.2.15",
"@angular/compiler": "18.2.5", "@angular/compiler": "19.2.15",
"@angular/core": "18.2.5", "@angular/core": "19.2.15",
"@angular/forms": "18.2.5", "@angular/forms": "19.2.15",
"@angular/material": "18.2.5", "@angular/material": "19.2.19",
"@angular/platform-browser": "18.2.5", "@angular/platform-browser": "19.2.15",
"@angular/platform-browser-dynamic": "18.2.5", "@angular/platform-browser-dynamic": "19.2.15",
"@angular/router": "18.2.5", "@angular/router": "19.2.15",
"core-js": "3.38.1", "core-js": "3.38.1",
"jwt-decode": "4.0.0", "jwt-decode": "4.0.0",
"openvidu-components-angular": "3.4.0", "openvidu-components-angular": "3.4.0",
"rxjs": "7.8.1", "rxjs": "7.8.1",
"tslib": "2.3.0", "tslib": "2.3.0",
"unique-names-generator": "4.7.1", "unique-names-generator": "4.7.1",
"zone.js": "0.14.10" "zone.js": "0.15.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-builders/custom-webpack": "18.0.0", "@angular-builders/custom-webpack": "18.0.0",
"@angular-devkit/build-angular": "18.2.6", "@angular-devkit/build-angular": "19.2.17",
"@angular-eslint/builder": "18.3.1", "@angular-eslint/builder": "18.3.1",
"@angular-eslint/eslint-plugin": "18.3.1", "@angular-eslint/eslint-plugin": "18.3.1",
"@angular-eslint/eslint-plugin-template": "18.3.1", "@angular-eslint/eslint-plugin-template": "18.3.1",
"@angular-eslint/schematics": "18.3.1", "@angular-eslint/schematics": "18.3.1",
"@angular-eslint/template-parser": "18.3.1", "@angular-eslint/template-parser": "18.3.1",
"@angular/cli": "18.2.5", "@angular/cli": "19.2.17",
"@angular/compiler-cli": "18.2.5", "@angular/compiler-cli": "19.2.15",
"@types/chai": "4.3.19", "@types/chai": "4.3.19",
"@types/fluent-ffmpeg": "2.1.27", "@types/fluent-ffmpeg": "2.1.27",
"@types/jasmine": "5.1.7", "@types/jasmine": "5.1.7",
@ -75,11 +75,11 @@
"karma-jasmine": "5.1.0", "karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.1.0", "karma-jasmine-html-reporter": "2.1.0",
"mocha": "10.7.3", "mocha": "10.7.3",
"ng-packagr": "18.2.1", "ng-packagr": "19.2.2",
"prettier": "3.3.3", "prettier": "3.3.3",
"selenium-webdriver": "4.25.0", "selenium-webdriver": "4.25.0",
"ts-node": "10.9.2", "ts-node": "10.9.2",
"tslib": "2.6.3", "tslib": "2.6.3",
"typescript": "5.4.5" "typescript": "5.8.3"
} }
} }

View File

@ -12,7 +12,6 @@ import { AppDataService, ThemeService } from '@lib/services';
@Component({ @Component({
selector: 'ov-console-nav', selector: 'ov-console-nav',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
MatToolbarModule, MatToolbarModule,

View File

@ -14,7 +14,6 @@ import type { DialogOptions } from '@lib/models';
@Component({ @Component({
selector: 'ov-dialog', selector: 'ov-dialog',
standalone: true,
imports: [ imports: [
FormsModule, FormsModule,
MatButtonModule, MatButtonModule,

View File

@ -15,7 +15,6 @@ import { MeetRoomDeletionPolicyWithMeeting, MeetRoomDeletionPolicyWithRecordings
@Component({ @Component({
selector: 'ov-delete-room-dialog', selector: 'ov-delete-room-dialog',
standalone: true,
imports: [ imports: [
FormsModule, FormsModule,
MatButtonModule, MatButtonModule,

View File

@ -19,7 +19,6 @@ import { RecordingService } from '@lib/services';
@Component({ @Component({
selector: 'ov-share-recording-dialog', selector: 'ov-share-recording-dialog',
standalone: true,
imports: [ imports: [
FormsModule, FormsModule,
MatRadioModule, MatRadioModule,

View File

@ -5,7 +5,6 @@ import { ProFeatureBadgeComponent } from '@lib/components';
@Component({ @Component({
selector: 'ov-logo-selector', selector: 'ov-logo-selector',
standalone: true,
imports: [MatButtonModule, MatIconModule, ProFeatureBadgeComponent], imports: [MatButtonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './logo-selector.component.html', templateUrl: './logo-selector.component.html',
styleUrl: './logo-selector.component.scss' styleUrl: './logo-selector.component.scss'

View File

@ -3,7 +3,6 @@ import { MatIconModule } from '@angular/material/icon';
@Component({ @Component({
selector: 'ov-pro-feature-badge', selector: 'ov-pro-feature-badge',
standalone: true,
imports: [MatIconModule], imports: [MatIconModule],
templateUrl: './pro-feature-badge.component.html', templateUrl: './pro-feature-badge.component.html',
styleUrl: './pro-feature-badge.component.scss' styleUrl: './pro-feature-badge.component.scss'

View File

@ -48,7 +48,6 @@ export interface RecordingTableAction {
@Component({ @Component({
selector: 'ov-recording-lists', selector: 'ov-recording-lists',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -68,7 +68,6 @@ export interface RoomTableAction {
@Component({ @Component({
selector: 'ov-rooms-lists', selector: 'ov-rooms-lists',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -29,7 +29,6 @@ export interface SelectionEvent {
@Component({ @Component({
selector: 'ov-selectable-card', selector: 'ov-selectable-card',
standalone: true,
imports: [CommonModule, MatIconModule, ProFeatureBadgeComponent], imports: [CommonModule, MatIconModule, ProFeatureBadgeComponent],
templateUrl: './selectable-card.component.html', templateUrl: './selectable-card.component.html',
styleUrl: './selectable-card.component.scss' styleUrl: './selectable-card.component.scss'

View File

@ -4,7 +4,6 @@ import { MatIconModule } from '@angular/material/icon';
@Component({ @Component({
selector: 'ov-share-meeting-link', selector: 'ov-share-meeting-link',
standalone: true,
imports: [MatButtonModule, MatIconModule], imports: [MatButtonModule, MatIconModule],
templateUrl: './share-meeting-link.component.html', templateUrl: './share-meeting-link.component.html',
styleUrl: './share-meeting-link.component.scss' styleUrl: './share-meeting-link.component.scss'

View File

@ -3,7 +3,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@Component({ @Component({
selector: 'ov-spinner', selector: 'ov-spinner',
standalone: true,
imports: [MatProgressSpinnerModule], imports: [MatProgressSpinnerModule],
template: `<mat-spinner></mat-spinner>`, template: `<mat-spinner></mat-spinner>`,
styleUrl: './spinner.component.scss' styleUrl: './spinner.component.scss'

View File

@ -10,7 +10,6 @@ import { map } from 'rxjs/operators';
@Component({ @Component({
selector: 'ov-step-indicator', selector: 'ov-step-indicator',
standalone: true,
imports: [CommonModule, MatStepperModule, ReactiveFormsModule], imports: [CommonModule, MatStepperModule, ReactiveFormsModule],
templateUrl: './step-indicator.component.html', templateUrl: './step-indicator.component.html',
styleUrl: './step-indicator.component.scss' styleUrl: './step-indicator.component.scss'

View File

@ -5,7 +5,6 @@ import type { WizardNavigationConfig, WizardNavigationEvent } from '@lib/models'
@Component({ @Component({
selector: 'ov-wizard-nav', selector: 'ov-wizard-nav',
standalone: true,
imports: [MatButton, MatIcon], imports: [MatButton, MatIcon],
templateUrl: './wizard-nav.component.html', templateUrl: './wizard-nav.component.html',
styleUrl: './wizard-nav.component.scss' styleUrl: './wizard-nav.component.scss'

View File

@ -2,7 +2,6 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ov-about', selector: 'ov-about',
standalone: true,
imports: [], imports: [],
templateUrl: './about.component.html', templateUrl: './about.component.html',
styleUrl: './about.component.scss' styleUrl: './about.component.scss'

View File

@ -26,7 +26,6 @@ interface ThemeColors {
@Component({ @Component({
selector: 'ov-config', selector: 'ov-config',
standalone: true,
imports: [ imports: [
MatCardModule, MatCardModule,
MatButtonModule, MatButtonModule,

View File

@ -5,7 +5,6 @@ import { AuthService } from '@lib/services';
@Component({ @Component({
selector: 'ov-console', selector: 'ov-console',
standalone: true,
imports: [ConsoleNavComponent], imports: [ConsoleNavComponent],
templateUrl: './console.component.html', templateUrl: './console.component.html',
styleUrl: './console.component.scss' styleUrl: './console.component.scss'

View File

@ -14,7 +14,6 @@ import { MeetApiKey } from '@lib/typings/ce';
@Component({ @Component({
selector: 'ov-embedded', selector: 'ov-embedded',
standalone: true,
imports: [ imports: [
MatCardModule, MatCardModule,
MatButtonModule, MatButtonModule,

View File

@ -18,7 +18,6 @@ interface OverviewStats {
@Component({ @Component({
selector: 'ov-overview', selector: 'ov-overview',
standalone: true,
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatGridListModule], imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatGridListModule],
templateUrl: './overview.component.html', templateUrl: './overview.component.html',
styleUrl: './overview.component.scss' styleUrl: './overview.component.scss'

View File

@ -9,7 +9,6 @@ import { ILogger, LoggerService } from 'openvidu-components-angular';
@Component({ @Component({
selector: 'ov-recordings', selector: 'ov-recordings',
standalone: true,
imports: [RecordingListsComponent, MatIconModule, MatProgressSpinnerModule], imports: [RecordingListsComponent, MatIconModule, MatProgressSpinnerModule],
templateUrl: './recordings.component.html', templateUrl: './recordings.component.html',
styleUrl: './recordings.component.scss' styleUrl: './recordings.component.scss'

View File

@ -11,7 +11,6 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-room-basic-creation', selector: 'ov-room-basic-creation',
standalone: true,
imports: [ imports: [
ReactiveFormsModule, ReactiveFormsModule,
MatButtonModule, MatButtonModule,

View File

@ -18,7 +18,6 @@ import { RoomWizardRoomDetailsComponent } from './steps/room-details/room-detail
@Component({ @Component({
selector: 'ov-room-wizard', selector: 'ov-room-wizard',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
StepIndicatorComponent, StepIndicatorComponent,

View File

@ -19,7 +19,6 @@ interface RecordingAccessOption {
@Component({ @Component({
selector: 'ov-recording-config', selector: 'ov-recording-config',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -11,7 +11,6 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-recording-layout', selector: 'ov-recording-layout',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -11,7 +11,6 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-recording-trigger', selector: 'ov-recording-trigger',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -8,7 +8,6 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-room-config', selector: 'ov-room-config',
standalone: true,
imports: [ReactiveFormsModule, MatCardModule, MatIconModule, MatSlideToggleModule], imports: [ReactiveFormsModule, MatCardModule, MatIconModule, MatSlideToggleModule],
templateUrl: './room-config.component.html', templateUrl: './room-config.component.html',
styleUrl: './room-config.component.scss' styleUrl: './room-config.component.scss'

View File

@ -19,7 +19,6 @@ import { Subject, takeUntil } from 'rxjs';
@Component({ @Component({
selector: 'ov-room-details', selector: 'ov-room-details',
standalone: true,
imports: [ imports: [
ReactiveFormsModule, ReactiveFormsModule,
MatButtonModule, MatButtonModule,

View File

@ -32,7 +32,6 @@ import { ILogger, LoggerService } from 'openvidu-components-angular';
@Component({ @Component({
selector: 'ov-rooms', selector: 'ov-rooms',
standalone: true,
imports: [ imports: [
MatListModule, MatListModule,
MatCardModule, MatCardModule,

View File

@ -23,7 +23,6 @@ import { AuthMode } from '@lib/typings/ce';
@Component({ @Component({
selector: 'ov-users-permissions', selector: 'ov-users-permissions',
standalone: true,
imports: [ imports: [
MatCardModule, MatCardModule,
MatButtonModule, MatButtonModule,

View File

@ -8,7 +8,6 @@ import { AppDataService, AuthService, NavigationService, WebComponentManagerServ
@Component({ @Component({
selector: 'ov-error', selector: 'ov-error',
standalone: true,
imports: [MatCardModule, MatIconModule, MatButtonModule], imports: [MatCardModule, MatIconModule, MatButtonModule],
templateUrl: './error.component.html', templateUrl: './error.component.html',
styleUrl: './error.component.scss' styleUrl: './error.component.scss'

View File

@ -12,7 +12,6 @@ import { AuthService, NavigationService } from '@lib/services';
@Component({ @Component({
selector: 'ov-login', selector: 'ov-login',
standalone: true,
imports: [ imports: [
MatFormFieldModule, MatFormFieldModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -9,7 +9,6 @@ import { LeftEventReason } from '@lib/typings/ce';
@Component({ @Component({
selector: 'ov-end-meeting', selector: 'ov-end-meeting',
standalone: true,
imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule], imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule],
templateUrl: './end-meeting.component.html', templateUrl: './end-meeting.component.html',
styleUrl: './end-meeting.component.scss' styleUrl: './end-meeting.component.scss'

View File

@ -67,7 +67,6 @@ import { combineLatest, Subject, takeUntil } from 'rxjs';
selector: 'ov-meeting', selector: 'ov-meeting',
templateUrl: './meeting.component.html', templateUrl: './meeting.component.html',
styleUrls: ['./meeting.component.scss'], styleUrls: ['./meeting.component.scss'],
standalone: true,
imports: [ imports: [
OpenViduComponentsUiModule, OpenViduComponentsUiModule,
// ApiDirectiveModule, // ApiDirectiveModule,

View File

@ -13,7 +13,6 @@ import { ILogger, LoggerService } from 'openvidu-components-angular';
selector: 'ov-room-recordings', selector: 'ov-room-recordings',
templateUrl: './room-recordings.component.html', templateUrl: './room-recordings.component.html',
styleUrls: ['./room-recordings.component.scss'], styleUrls: ['./room-recordings.component.scss'],
standalone: true,
imports: [MatToolbarModule, MatButtonModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule] imports: [MatToolbarModule, MatButtonModule, RecordingListsComponent, MatIconModule, MatProgressSpinnerModule]
}) })
export class RoomRecordingsComponent implements OnInit { export class RoomRecordingsComponent implements OnInit {

View File

@ -16,7 +16,6 @@ import { ViewportService } from 'openvidu-components-angular';
selector: 'ov-view-recording', selector: 'ov-view-recording',
templateUrl: './view-recording.component.html', templateUrl: './view-recording.component.html',
styleUrls: ['./view-recording.component.scss'], styleUrls: ['./view-recording.component.scss'],
standalone: true,
imports: [ imports: [
MatCardModule, MatCardModule,
MatButtonModule, MatButtonModule,

View File

@ -7,7 +7,6 @@ import packageInfo from '../../package.json';
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
standalone: true,
imports: [RouterOutlet] imports: [RouterOutlet]
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {

View File

@ -1,6 +1,6 @@
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper'; import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core'; import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection, inject, provideAppInitializer } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import { routes } from '@app/app.routes'; import { routes } from '@app/app.routes';
@ -17,13 +17,10 @@ const ovComponentsconfig: OpenViduComponentsConfig = {
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
{ provideAppInitializer(() => {
provide: APP_INITIALIZER, const initializerFn = ((themeService: ThemeService) => () => themeService.initializeTheme())(inject(ThemeService));
// Ensure the theme is initialized before the app starts return initializerFn();
useFactory: (themeService: ThemeService) => () => themeService.initializeTheme(), }),
deps: [ThemeService],
multi: true
},
importProvidersFrom(OpenViduComponentsModule.forRoot(ovComponentsconfig)), importProvidersFrom(OpenViduComponentsModule.forRoot(ovComponentsconfig)),
provideZoneChangeDetection({ eventCoalescing: true }), provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideRouter(routes),

View File

@ -2,11 +2,13 @@
@use './assets/styles/openvidu-theme.scss'; @use './assets/styles/openvidu-theme.scss';
@import './assets/styles/design-tokens'; @import './assets/styles/design-tokens';
@include mat.core(); @include mat.elevation-classes();
@include mat.app-background();
// Light theme by default // Light theme by default
html { html {
@include mat.core-theme(openvidu-theme.$light-theme); @include mat.elevation-classes();
@include mat.app-background();
@include mat.all-component-bases(openvidu-theme.$light-theme); @include mat.all-component-bases(openvidu-theme.$light-theme);
@include mat.all-component-colors(openvidu-theme.$light-theme); @include mat.all-component-colors(openvidu-theme.$light-theme);
@include mat.all-component-typographies(openvidu-theme.$light-theme); @include mat.all-component-typographies(openvidu-theme.$light-theme);