From 264db1facc317b1d5e170cb2374b0aa71bf936b4 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 11 Dec 2025 15:00:42 +0100
Subject: [PATCH] feat: convert components, directives, and pipes to standalone

- Updated LangSelectorComponent, ParticipantNameInputComponent, ThemeSelectorComponent, VideoDevicesComponent, StreamComponent, ToolbarMediaButtonsComponent, ToolbarPanelButtonsComponent, ToolbarComponent, VideoPosterComponent, VideoconferenceComponent to be standalone components.
- Converted directives (ActivitiesPanelRecordingActivityDirective, AdminDashboardRecordingsListDirective, etc.) to standalone.
- Updated pipes (LinkifyPipe, RemoteParticipantTracksPipe, DurationFromSecondsPipe, etc.) to standalone.
- Adjusted imports in OpenViduComponentsAngularUiModule to include necessary modules for standalone components.
---
 .../admin-dashboard.component.ts              | 14 ++++++-
 .../admin-login/admin-login.component.ts      |  8 +++-
 .../audio-wave/audio-wave.component.ts        |  2 +-
 .../dialogs/delete-recording.component.ts     |  6 ++-
 .../components/dialogs/dialog.component.ts    |  5 ++-
 .../dialogs/pro-feature-dialog.component.ts   |  6 ++-
 .../dialogs/recording-dialog.component.ts     |  8 +++-
 .../landscape-warning.component.ts            |  6 ++-
 .../lib/components/layout/layout.component.ts |  6 ++-
 .../media-element/media-element.component.ts  |  5 ++-
 .../activities-panel.component.ts             |  8 +++-
 .../broadcasting-activity.component.ts        |  7 +++-
 .../recording-activity.component.ts           | 12 +++++-
 .../background-effects-panel.component.ts     |  6 ++-
 .../panel/chat-panel/chat-panel.component.ts  |  8 +++-
 .../lib/components/panel/panel.component.ts   |  4 +-
 .../participant-panel-item.component.ts       |  7 +++-
 .../participants-panel.component.ts           |  7 +++-
 .../settings-panel.component.ts               | 20 +++++++++-
 .../components/pre-join/pre-join.component.ts | 24 +++++++++++-
 .../components/session/session.component.ts   |  7 +++-
 .../audio-devices/audio-devices.component.ts  |  6 ++-
 .../lang-selector/lang-selector.component.ts  |  5 ++-
 .../participant-name-input.component.ts       |  7 +++-
 .../theme-selector.component.ts               |  5 ++-
 .../video-devices/video-devices.component.ts  |  6 ++-
 .../lib/components/stream/stream.component.ts |  7 +++-
 .../toolbar-media-buttons.component.ts        |  6 ++-
 .../toolbar-panel-buttons.component.ts        |  6 ++-
 .../components/toolbar/toolbar.component.ts   | 14 ++++++-
 .../video-poster/video-poster.component.ts    |  5 ++-
 .../videoconference.component.ts              | 38 ++++++++++++++++++-
 .../api/activities-panel.directive.ts         |  4 +-
 .../src/lib/directives/api/admin.directive.ts |  8 ++--
 .../directives/api/api.directive.module.ts    |  2 +-
 .../lib/directives/api/internals.directive.ts | 26 ++++++-------
 .../api/participant-panel-item.directive.ts   |  2 +-
 .../lib/directives/api/stream.directive.ts    |  6 +--
 .../lib/directives/api/toolbar.directive.ts   | 30 +++++++--------
 .../api/videoconference.directive.ts          | 24 ++++++------
 .../template/internals.directive.ts           | 14 +++----
 ...idu-components-angular.directive.module.ts |  2 +-
 .../openvidu-components-angular.directive.ts  | 26 ++++++-------
 .../openvidu-components-angular-ui.module.ts  | 18 ++++-----
 .../src/lib/pipes/linkify.pipe.ts             |  2 +-
 .../src/lib/pipes/participant.pipe.ts         |  4 +-
 .../src/lib/pipes/recording.pipe.ts           |  6 +--
 .../src/lib/pipes/translate.pipe.ts           |  2 +-
 48 files changed, 334 insertions(+), 123 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts
index b6ffb8f83..9675bb0a6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+import { SearchByStringPropertyPipe } from '../../pipes/recording.pipe';
 import { Subscription } from 'rxjs';
 import { RecordingDeleteRequestedEvent, RecordingInfo, RecordingStatus } from '../../models/recording.model';
 import { ActionService } from '../../services/action/action.service';
@@ -9,7 +14,14 @@ import { RecordingService } from '../../services/recording/recording.service';
 	selector: 'ov-admin-dashboard',
 	templateUrl: './admin-dashboard.component.html',
 	styleUrls: ['./admin-dashboard.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [
+		CommonModule,
+		FormsModule,
+		AppMaterialModule,
+		TranslatePipe,
+		SearchByStringPropertyPipe
+	]
 })
 export class AdminDashboardComponent implements OnInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts
index 8918a061f..29b4efa46 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.ts
@@ -1,5 +1,8 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 import { Subscription } from 'rxjs';
 import { ActionService } from '../../services/action/action.service';
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
@@ -8,7 +11,8 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
 	selector: 'ov-admin-login',
 	templateUrl: './admin-login.component.html',
 	styleUrls: ['./admin-login.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, ReactiveFormsModule, AppMaterialModule, TranslatePipe]
 })
 export class AdminLoginComponent implements OnInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts
index 9e47bd9ea..130225eef 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.ts
@@ -13,6 +13,6 @@ import { Component } from '@angular/core';
 		</div>
 	`,
 	styleUrls: ['./audio-wave.component.scss'],
-	standalone: false
+	standalone: true
 })
 export class AudioWaveComponent {}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
index 0ffc23630..5d45544d7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 import { MatDialogRef } from '@angular/material/dialog';
 
 /**
@@ -37,7 +40,8 @@ import { MatDialogRef } from '@angular/material/dialog';
 			}
 		`
     ],
-    standalone: false
+    standalone: true,
+    imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class DeleteDialogComponent {
 	constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
index d22dc73bf..cbe16250e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
@@ -1,4 +1,7 @@
 import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
@@ -34,7 +37,7 @@ import { DialogData } from '../../models/dialog.model';
 			}
 		`
     ],
-    standalone: false
+    standalone: true
 })
 export class DialogTemplateComponent {
 	constructor(
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
index 64f2d7242..4b60e128a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/pro-feature-dialog.component.ts
@@ -1,4 +1,7 @@
 import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { DialogData } from '../../models/dialog.model';
 
@@ -20,7 +23,8 @@ import { DialogData } from '../../models/dialog.model';
 			<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button>
 		</div>
 	`,
-    standalone: false
+    standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class ProFeatureDialogTemplateComponent {
 	constructor(public dialogRef: MatDialogRef<ProFeatureDialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
index 92f896199..b52324ed7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
@@ -1,4 +1,7 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { RecordingDialogData } from '../../models/dialog.model';
 
@@ -39,10 +42,11 @@ import { RecordingDialogData } from '../../models/dialog.model';
 			}
 		`
     ],
-    standalone: false
+    standalone: true,
+    imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class RecordingDialogComponent {
-	@ViewChild('videoElement', { static: true }) videoElement: ElementRef<HTMLVideoElement>;
+	@ViewChild('videoElement', { static: true }) videoElement!: ElementRef<HTMLVideoElement>;
 
 	src: string;
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/landscape-warning/landscape-warning.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/landscape-warning/landscape-warning.component.ts
index de64e7676..ed727c065 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/landscape-warning/landscape-warning.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/landscape-warning/landscape-warning.component.ts
@@ -1,5 +1,8 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 
 /**
  * Component to display a landscape orientation warning on mobile devices.
@@ -9,7 +12,8 @@ import { Component } from '@angular/core';
 	selector: 'ov-landscape-warning',
 	templateUrl: './landscape-warning.component.html',
 	styleUrl: './landscape-warning.component.scss',
-	standalone: false,
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe],
 	animations: [
 		trigger('inOutAnimation', [
 			transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts
index 097dd9db8..660b842b5 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.ts
@@ -13,6 +13,9 @@ import {
 	ViewChild,
 	ViewContainerRef
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { RemoteParticipantTracksPipe } from '../../pipes/participant.pipe';
 import { combineLatest, map, Subject, takeUntil } from 'rxjs';
 import { StreamDirective } from '../../directives/template/openvidu-components-angular.directive';
 import { ParticipantTrackPublication, ParticipantModel } from '../../models/participant.model';
@@ -34,7 +37,8 @@ import { LayoutTemplateConfiguration, TemplateManagerService } from '../../servi
 	templateUrl: './layout.component.html',
 	styleUrls: ['./layout.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, DragDropModule, RemoteParticipantTracksPipe]
 })
 export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts
index 10a160854..6890b66d1 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.ts
@@ -1,5 +1,7 @@
 import { animate, style, transition, trigger } from '@angular/animations';
 import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { VideoPosterComponent } from '../video-poster/video-poster.component';
 import { Track } from 'livekit-client';
 
 /**
@@ -25,7 +27,8 @@ import { Track } from 'livekit-client';
 			transition(':leave', [style({ opacity: 1 }), animate('200ms', style({ opacity: 0 }))])
 		])
 	],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, VideoPosterComponent]
 })
 export class MediaElementComponent implements AfterViewInit, OnDestroy {
 	_track: Track;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
index 28dc71be0..0979be8c6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.ts
@@ -1,4 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
+import { RecordingActivityComponent } from './recording-activity/recording-activity.component';
+import { BroadcastingActivityComponent } from './broadcasting-activity/broadcasting-activity.component';
 import { Subject, takeUntil } from 'rxjs';
 import { PanelStatusInfo, PanelType } from '../../../models/panel.model';
 import { OpenViduComponentsConfigService } from '../../../services/config/directive-config.service';
@@ -21,7 +26,8 @@ import { BroadcastingStartRequestedEvent, BroadcastingStopRequestedEvent } from
 	templateUrl: './activities-panel.component.html',
 	styleUrls: ['../panel.component.scss', './activities-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe, RecordingActivityComponent, BroadcastingActivityComponent]
 })
 export class ActivitiesPanelComponent implements OnInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts
index ed2f581df..6c71bf2da 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.ts
@@ -1,4 +1,8 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppMaterialModule } from '../../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../../pipes/translate.pipe';
 import { Subject, takeUntil } from 'rxjs';
 import {
 	BroadcastingStartRequestedEvent,
@@ -19,7 +23,8 @@ import { OpenViduService } from '../../../../services/openvidu/openvidu.service'
 	templateUrl: './broadcasting-activity.component.html',
 	styleUrls: ['./broadcasting-activity.component.scss', '../activities-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, FormsModule, AppMaterialModule, TranslatePipe]
 })
 
 // TODO: Allow to add more than one broadcast url
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts
index 9096df7dc..4c4c2fb17 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.ts
@@ -1,4 +1,8 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, OnDestroy, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppMaterialModule } from '../../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../../pipes/translate.pipe';
 import { Subject, takeUntil } from 'rxjs';
 import {
 	RecordingDeleteRequestedEvent,
@@ -26,7 +30,13 @@ import { OpenViduComponentsConfigService } from '../../../../services/config/dir
 	templateUrl: './recording-activity.component.html',
 	styleUrls: ['./recording-activity.component.scss', '../activities-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [
+		CommonModule,
+		FormsModule,
+		AppMaterialModule,
+		TranslatePipe
+	]
 })
 
 // TODO: Allow to add more than one recording type
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
index 1861f8b10..b8b6fc8ab 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
@@ -1,4 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { Subscription } from 'rxjs';
 import { BackgroundEffect, EffectType } from '../../../models/background-effect.model';
 import { PanelType } from '../../../models/panel.model';
@@ -13,7 +16,8 @@ import { VirtualBackgroundService } from '../../../services/virtual-background/v
 	templateUrl: './background-effects-panel.component.html',
 	styleUrls: ['../panel.component.scss', './background-effects-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class BackgroundEffectsPanelComponent implements OnInit {
 	@Input() mode: 'prejoin' | 'meeting' = 'meeting';
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
index 494d944c7..48e3bf38a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.ts
@@ -1,4 +1,9 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
+import { LinkifyPipe } from '../../../pipes/linkify.pipe';
 import { Subject, takeUntil } from 'rxjs';
 import { ChatMessage } from '../../../models/chat.model';
 import { PanelType } from '../../../models/panel.model';
@@ -14,7 +19,8 @@ import { PanelService } from '../../../services/panel/panel.service';
 	templateUrl: './chat-panel.component.html',
 	styleUrls: ['../panel.component.scss', './chat-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, FormsModule, AppMaterialModule, TranslatePipe, LinkifyPipe]
 })
 export class ChatPanelComponent implements OnInit, AfterViewInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts
index 8462165d4..4c6019eb6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.ts
@@ -8,6 +8,7 @@ import {
 	Output,
 	TemplateRef
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { skip, Subject, takeUntil } from 'rxjs';
 import {
 	ActivitiesPanelDirective,
@@ -39,7 +40,8 @@ import { TemplateManagerService, PanelTemplateConfiguration } from '../../servic
 	templateUrl: './panel.component.html',
 	styleUrls: ['./panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule]
 })
 export class PanelComponent implements OnInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
index 7576c2766..bf6b7f7a6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.ts
@@ -1,4 +1,8 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../../pipes/translate.pipe';
+import { TrackPublishedTypesPipe } from '../../../../pipes/participant.pipe';
 import { Subscription } from 'rxjs';
 import { ParticipantPanelItemElementsDirective } from '../../../../directives/template/openvidu-components-angular.directive';
 import { ParticipantPanelParticipantBadgeDirective } from '../../../../directives/template/internals.directive';
@@ -17,7 +21,8 @@ import { TemplateManagerService, ParticipantPanelItemTemplateConfiguration } fro
 	templateUrl: './participant-panel-item.component.html',
 	styleUrls: ['./participant-panel-item.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe, TrackPublishedTypesPipe]
 })
 export class ParticipantPanelItemComponent implements OnInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
index 7b9e00ff6..cfbc5cb68 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.ts
@@ -9,6 +9,10 @@ import {
 	TemplateRef,
 	ViewChild
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../../pipes/translate.pipe';
+import { ParticipantPanelItemComponent } from '../participant-panel-item/participant-panel-item.component';
 // import { ParticipantModel } from '../../../../models/participant.model';
 import { ParticipantService } from '../../../../services/participant/participant.service';
 import { PanelService } from '../../../../services/panel/panel.service';
@@ -28,7 +32,8 @@ import { OpenViduComponentsConfigService } from '../../../../services/config/dir
 	templateUrl: './participants-panel.component.html',
 	styleUrls: ['../../panel.component.scss', './participants-panel.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe, ParticipantPanelItemComponent]
 })
 export class ParticipantsPanelComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts
index 788c6e129..e20226f2a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.ts
@@ -1,4 +1,12 @@
 import { Component, ContentChild, EventEmitter, OnInit, Output, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
+import { ParticipantNameInputComponent } from '../../settings/participant-name-input/participant-name-input.component';
+import { LangSelectorComponent } from '../../settings/lang-selector/lang-selector.component';
+import { ThemeSelectorComponent } from '../../settings/theme-selector/theme-selector.component';
+import { VideoDevicesComponent } from '../../settings/video-devices/video-devices.component';
+import { AudioDevicesComponent } from '../../settings/audio-devices/audio-devices.component';
 import { Subject, takeUntil } from 'rxjs';
 import { PanelStatusInfo, PanelSettingsOptions, PanelType } from '../../../models/panel.model';
 import { OpenViduComponentsConfigService } from '../../../services/config/directive-config.service';
@@ -16,7 +24,17 @@ import { SettingsPanelGeneralAdditionalElementsDirective } from '../../../direct
 	selector: 'ov-settings-panel',
 	templateUrl: './settings-panel.component.html',
 	styleUrls: ['../panel.component.scss', './settings-panel.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [
+		CommonModule,
+		AppMaterialModule,
+		TranslatePipe,
+		ParticipantNameInputComponent,
+		LangSelectorComponent,
+		ThemeSelectorComponent,
+		VideoDevicesComponent,
+		AudioDevicesComponent
+	]
 })
 export class SettingsPanelComponent implements OnInit {
 	@Output() onVideoEnabledChanged = new EventEmitter<boolean>();
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
index 4bc2ff638..954cdf367 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.ts
@@ -9,6 +9,16 @@ import {
 	OnInit,
 	Output
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+import { LandscapeWarningComponent } from '../landscape-warning/landscape-warning.component';
+import { LangSelectorComponent } from '../settings/lang-selector/lang-selector.component';
+import { MediaElementComponent } from '../media-element/media-element.component';
+import { VideoDevicesComponent } from '../settings/video-devices/video-devices.component';
+import { AudioDevicesComponent } from '../settings/audio-devices/audio-devices.component';
+import { ParticipantNameInputComponent } from '../settings/participant-name-input/participant-name-input.component';
+import { BackgroundEffectsPanelComponent } from '../panel/background-effects-panel/background-effects-panel.component';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { filter, Subject, take, takeUntil } from 'rxjs';
 import { ILogger } from '../../models/logger.model';
@@ -30,7 +40,19 @@ import { LangOption } from '../../models/lang.model';
 	templateUrl: './pre-join.component.html',
 	styleUrls: ['./pre-join.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false,
+	standalone: true,
+	imports: [
+		CommonModule,
+		AppMaterialModule,
+		TranslatePipe,
+		LandscapeWarningComponent,
+		LangSelectorComponent,
+		MediaElementComponent,
+		VideoDevicesComponent,
+		AudioDevicesComponent,
+		ParticipantNameInputComponent,
+		BackgroundEffectsPanelComponent
+	],
 	animations: [
 		trigger('containerResize', [
 			state(
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
index d27d105db..6debb7c45 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.ts
@@ -12,6 +12,10 @@ import {
 	TemplateRef,
 	ViewChild
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+import { LandscapeWarningComponent } from '../landscape-warning/landscape-warning.component';
 
 import { ILogger } from '../../models/logger.model';
 import { animate, style, transition, trigger } from '@angular/animations';
@@ -68,7 +72,8 @@ import { safeJsonParse } from '../../utils/utils';
 		])
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe, LandscapeWarningComponent]
 })
 export class SessionComponent implements OnInit, OnDestroy {
 	@ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate: TemplateRef<any> | undefined;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts
index 4673c49dc..4f2af8046 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.ts
@@ -1,4 +1,7 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { Subscription } from 'rxjs';
 import { CustomDevice } from '../../../models/device.model';
 import { DeviceService } from '../../../services/device/device.service';
@@ -15,7 +18,8 @@ import { ILogger } from '../../../models/logger.model';
 	selector: 'ov-audio-devices-select',
 	templateUrl: './audio-devices.component.html',
 	styleUrls: ['./audio-devices.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class AudioDevicesComponent implements OnInit, OnDestroy {
 	@Input() compact: boolean = false;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
index 132e9c464..a00a857d1 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit, Output, ViewChild, EventEmitter, Input, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatSelect } from '@angular/material/select';
 import { StorageService } from '../../../services/storage/storage.service';
@@ -13,7 +15,8 @@ import { Subscription } from 'rxjs';
 	selector: 'ov-lang-selector',
 	templateUrl: './lang-selector.component.html',
 	styleUrls: ['./lang-selector.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule]
 })
 export class LangSelectorComponent implements OnInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts
index ab3e60b24..9531b5b9d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.ts
@@ -1,4 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { Subscription } from 'rxjs';
 import { ParticipantService } from '../../../services/participant/participant.service';
 import { StorageService } from '../../../services/storage/storage.service';
@@ -10,7 +14,8 @@ import { StorageService } from '../../../services/storage/storage.service';
 	selector: 'ov-participant-name-input',
 	templateUrl: './participant-name-input.component.html',
 	styleUrls: ['./participant-name-input.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, FormsModule, AppMaterialModule, TranslatePipe]
 })
 export class ParticipantNameInputComponent implements OnInit {
 	name: string;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
index 1d0d60131..0a04dd41b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/theme-selector/theme-selector.component.ts
@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
 import { OpenViduThemeService } from '../../../services/theme/theme.service';
 import { OpenViduThemeMode } from '../../../models/theme.model';
 
 @Component({
 	selector: 'ov-theme-selector',
-	standalone: false,
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule],
 	template: `
 		<div class="theme-selector-container">
 			<button
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts
index 8a56ba64e..a83353f1a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.ts
@@ -1,4 +1,7 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { Subscription } from 'rxjs';
 import { CustomDevice } from '../../../models/device.model';
 import { DeviceService } from '../../../services/device/device.service';
@@ -15,7 +18,8 @@ import { ILogger } from '../../../models/logger.model';
 	selector: 'ov-video-devices-select',
 	templateUrl: './video-devices.component.html',
 	styleUrls: ['./video-devices.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class VideoDevicesComponent implements OnInit, OnDestroy {
 	@Input() compact: boolean = false;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
index 099b5bc71..a7b1054de 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
@@ -1,4 +1,8 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { AudioWaveComponent } from '../audio-wave/audio-wave.component';
+import { MediaElementComponent } from '../media-element/media-element.component';
 import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';
 import { Track } from 'livekit-client';
 import { Subject, takeUntil } from 'rxjs';
@@ -16,7 +20,8 @@ import { ParticipantService } from '../../services/participant/participant.servi
 	selector: 'ov-stream',
 	templateUrl: './stream.component.html',
 	styleUrls: ['./stream.component.scss'],
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, AudioWaveComponent, MediaElementComponent]
 })
 export class StreamComponent implements OnInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
index 96baae5a1..3ad2e1caa 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
@@ -1,4 +1,7 @@
 import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, computed, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { RecordingStatus } from '../../../models/recording.model';
 import { BroadcastingStatus } from '../../../models/broadcasting.model';
 import { ToolbarAdditionalButtonsPosition } from '../../../models/toolbar.model';
@@ -12,7 +15,8 @@ import { ToolbarMoreOptionsAdditionalMenuItemsDirective } from '../../../directi
 	selector: 'ov-toolbar-media-buttons',
 	templateUrl: './toolbar-media-buttons.component.html',
 	styleUrl: './toolbar-media-buttons.component.scss',
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class ToolbarMediaButtonsComponent {
 	// Camera related inputs
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
index d22e5f079..af3fcc9ed 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.ts
@@ -1,11 +1,15 @@
 import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../../pipes/translate.pipe';
 import { ViewportService } from '../../../services/viewport/viewport.service';
 
 @Component({
 	selector: 'ov-toolbar-panel-buttons',
 	templateUrl: './toolbar-panel-buttons.component.html',
 	styleUrl: './toolbar-panel-buttons.component.scss',
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, AppMaterialModule, TranslatePipe]
 })
 export class ToolbarPanelButtonsComponent {
 	// Inputs from toolbar
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
index 8673b5825..b90c0e7da 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.ts
@@ -1,3 +1,8 @@
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { ApiDirectiveModule } from '../../directives/api/api.directive.module';
+import { ToolbarMediaButtonsComponent } from './toolbar-media-buttons/toolbar-media-buttons.component';
+import { ToolbarPanelButtonsComponent } from './toolbar-panel-buttons/toolbar-panel-buttons.component';
 import {
 	AfterViewInit,
 	ChangeDetectionStrategy,
@@ -61,7 +66,14 @@ import { LeaveButtonDirective, ToolbarMoreOptionsAdditionalMenuItemsDirective }
 	templateUrl: './toolbar.component.html',
 	styleUrls: ['./toolbar.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: false
+	standalone: true,
+	imports: [
+		CommonModule,
+		AppMaterialModule,
+		ApiDirectiveModule,
+		ToolbarMediaButtonsComponent,
+		ToolbarPanelButtonsComponent
+	]
 })
 export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/video-poster/video-poster.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/video-poster/video-poster.component.ts
index d56c30cf8..cbd2dda1e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/video-poster/video-poster.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/video-poster/video-poster.component.ts
@@ -1,10 +1,13 @@
 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 
 @Component({
 	selector: 'ov-video-poster',
 	templateUrl: './video-poster.component.html',
 	styleUrl: './video-poster.component.scss',
-	standalone: false
+	standalone: true,
+	imports: [CommonModule, TranslatePipe]
 })
 export class VideoPosterComponent {
 	letter: string = '';
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts
index 5e20e5e53..90cff1741 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.ts
@@ -1,4 +1,21 @@
 import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import { AppMaterialModule } from '../../openvidu-components-angular.material.module';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+import { PreJoinComponent } from '../pre-join/pre-join.component';
+import { SessionComponent } from '../session/session.component';
+import { ToolbarComponent } from '../toolbar/toolbar.component';
+import { PanelComponent } from '../panel/panel.component';
+import { ChatPanelComponent } from '../panel/chat-panel/chat-panel.component';
+import { ParticipantsPanelComponent } from '../panel/participants-panel/participants-panel/participants-panel.component';
+import { BackgroundEffectsPanelComponent } from '../panel/background-effects-panel/background-effects-panel.component';
+import { SettingsPanelComponent } from '../panel/settings-panel/settings-panel.component';
+import { ActivitiesPanelComponent } from '../panel/activities-panel/activities-panel.component';
+import { ParticipantPanelItemComponent } from '../panel/participants-panel/participant-panel-item/participant-panel-item.component';
+import { LayoutComponent } from '../layout/layout.component';
+import { StreamComponent } from '../stream/stream.component';
+import { ApiDirectiveModule } from '../../directives/api/api.directive.module';
+import { OpenViduComponentsDirectiveModule } from '../../directives/template/openvidu-components-angular.directive.module';
 import {
 	AfterViewInit,
 	ChangeDetectionStrategy,
@@ -86,7 +103,26 @@ import { E2eeService } from '../../services/e2ee/e2ee.service';
 			// transition(':leave', [style({ opacity: 1 }), animate('50ms ease-in', style({ opacity: 0.9 }))])
 		])
 	],
-	standalone: false
+	standalone: true,
+	imports: [
+		CommonModule,
+		AppMaterialModule,
+		TranslatePipe,
+		PreJoinComponent,
+		SessionComponent,
+		ToolbarComponent,
+		PanelComponent,
+		ChatPanelComponent,
+		ParticipantsPanelComponent,
+		BackgroundEffectsPanelComponent,
+		SettingsPanelComponent,
+		ActivitiesPanelComponent,
+		ParticipantPanelItemComponent,
+		LayoutComponent,
+		StreamComponent,
+		ApiDirectiveModule,
+		OpenViduComponentsDirectiveModule
+	]
 })
 export class VideoconferenceComponent implements OnDestroy, AfterViewInit {
 	// Constants
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts
index 18b743479..bfcb59783 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/activities-panel.directive.ts
@@ -18,7 +18,7 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  */
 @Directive({
 	selector: 'ov-videoconference[activitiesPanelRecordingActivity], ov-activities-panel[recordingActivity]',
-	standalone: false
+	standalone: true
 })
 export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit, OnDestroy {
 	@Input() set activitiesPanelRecordingActivity(value: boolean) {
@@ -70,7 +70,7 @@ export class ActivitiesPanelRecordingActivityDirective implements AfterViewInit,
  */
 @Directive({
 	selector: 'ov-videoconference[activitiesPanelBroadcastingActivity], ov-activities-panel[broadcastingActivity]',
-	standalone: false
+	standalone: true
 })
 export class ActivitiesPanelBroadcastingActivityDirective implements AfterViewInit, OnDestroy {
 	@Input() set activitiesPanelBroadcastingActivity(value: boolean) {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts
index f8cd47ca6..f0a98d935 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/admin.directive.ts
@@ -13,7 +13,7 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  */
 @Directive({
 	selector: 'ov-admin-dashboard[recordingsList]',
-	standalone: false
+	standalone: true
 })
 export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnDestroy {
 	@Input() set recordingsList(value: RecordingInfo[]) {
@@ -55,7 +55,7 @@ export class AdminDashboardRecordingsListDirective implements AfterViewInit, OnD
  */
 @Directive({
 	selector: 'ov-admin-dashboard[navbarTitle]',
-	standalone: false
+	standalone: true
 })
 export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
 	@Input() set navbarTitle(value: string) {
@@ -97,7 +97,7 @@ export class AdminDashboardTitleDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-admin-login[navbarTitle]',
-	standalone: false
+	standalone: true
 })
 export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
 	@Input() set navbarTitle(value: any) {
@@ -139,7 +139,7 @@ export class AdminLoginTitleDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-admin-login[error]',
-	standalone: false
+	standalone: true
 })
 export class AdminLoginErrorDirective implements AfterViewInit, OnDestroy {
 	@Input() set error(value: any) {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
index e7552fba9..6b72a39a6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/api.directive.module.ts
@@ -119,7 +119,7 @@ const directives = [
 ];
 
 @NgModule({
-	declarations: [...directives],
+	imports: [...directives],
 	exports: [...directives]
 })
 export class ApiDirectiveModule {}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts
index 3c50cc346..95066b859 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/internals.directive.ts
@@ -10,7 +10,7 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  */
 @Directive({
 	selector: 'img[ovLogo]',
-	standalone: false
+	standalone: true
 })
 export class FallbackLogoDirective implements OnInit {
 	defaultLogo =
@@ -55,7 +55,7 @@ export class FallbackLogoDirective implements OnInit {
  */
 @Directive({
 	selector: 'ov-layout[ovRemoteParticipants]',
-	standalone: false
+	standalone: true
 })
 export class LayoutRemoteParticipantsDirective {
 	private _ovRemoteParticipants: ParticipantModel[] | undefined;
@@ -91,7 +91,7 @@ export class LayoutRemoteParticipantsDirective {
  */
 @Directive({
 	selector: 'ov-videoconference[brandingLogo], ov-toolbar[brandingLogo]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -134,7 +134,7 @@ export class ToolbarBrandingLogoDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[prejoinDisplayParticipantName]',
-	standalone: false
+	standalone: true
 })
 export class PrejoinDisplayParticipantName implements OnDestroy {
 	/**
@@ -180,7 +180,7 @@ export class PrejoinDisplayParticipantName implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[recordingActivityReadOnly]',
-	standalone: false
+	standalone: true
 })
 export class RecordingActivityReadOnlyDirective implements OnDestroy {
 	/**
@@ -236,7 +236,7 @@ export class RecordingActivityReadOnlyDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[recordingActivityShowControls]',
-	standalone: false
+	standalone: true
 })
 export class RecordingActivityShowControlsDirective implements OnDestroy {
 	/**
@@ -296,7 +296,7 @@ export class RecordingActivityShowControlsDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarViewRecordingsButton], ov-toolbar[viewRecordingsButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarViewRecordingsButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -355,7 +355,7 @@ export class ToolbarViewRecordingsButtonDirective implements AfterViewInit, OnDe
  */
 @Directive({
 	selector: 'ov-videoconference[recordingActivityStartStopRecordingButton]',
-	standalone: false
+	standalone: true
 })
 export class StartStopRecordingButtonsDirective implements OnDestroy {
 	/**
@@ -399,7 +399,7 @@ export class StartStopRecordingButtonsDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[recordingActivityViewRecordingsButton]',
-	standalone: false
+	standalone: true
 })
 export class RecordingActivityViewRecordingsButtonDirective implements AfterViewInit, OnDestroy {
 	@Input() set recordingActivityViewRecordingsButton(value: boolean) {
@@ -445,7 +445,7 @@ export class RecordingActivityViewRecordingsButtonDirective implements AfterView
  */
 @Directive({
 	selector: 'ov-videoconference[recordingActivityShowRecordingsList]',
-	standalone: false
+	standalone: true
 })
 export class RecordingActivityShowRecordingsListDirective implements AfterViewInit, OnDestroy {
 	@Input() set recordingActivityShowRecordingsList(value: boolean) {
@@ -490,7 +490,7 @@ export class RecordingActivityShowRecordingsListDirective implements AfterViewIn
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarRoomName], ov-toolbar[roomName]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarRoomNameDirective implements AfterViewInit, OnDestroy {
 	@Input() set toolbarRoomName(value: string | undefined) {
@@ -541,7 +541,7 @@ export class ToolbarRoomNameDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[showThemeSelector]',
-	standalone: false
+	standalone: true
 })
 export class ShowThemeSelectorDirective implements AfterViewInit, OnDestroy {
 	@Input() set showThemeSelector(value: boolean) {
@@ -587,7 +587,7 @@ export class ShowThemeSelectorDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[e2eeKey]',
-	standalone: false
+	standalone: true
 })
 export class E2EEKeyDirective implements AfterViewInit, OnDestroy {
 	@Input() set e2eeKey(value: string | undefined) {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts
index 318765758..dfe311da7 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/participant-panel-item.directive.ts
@@ -18,7 +18,7 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  */
 @Directive({
 	selector: 'ov-videoconference[participantPanelItemMuteButton], ov-participant-panel-item[muteButton]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantPanelItemMuteButtonDirective implements AfterViewInit, OnDestroy {
 	@Input() set participantPanelItemMuteButton(value: boolean) {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
index a04186993..77ac207c3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/stream.directive.ts
@@ -18,7 +18,7 @@ import { OpenViduComponentsConfigService } from '../../services/config/directive
  */
 @Directive({
 	selector: 'ov-videoconference[streamDisplayParticipantName], ov-stream[displayParticipantName]',
-	standalone: false
+	standalone: true
 })
 export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamDisplayParticipantName(value: boolean) {
@@ -71,7 +71,7 @@ export class StreamDisplayParticipantNameDirective implements AfterViewInit, OnD
  */
 @Directive({
 	selector: 'ov-videoconference[streamDisplayAudioDetection], ov-stream[displayAudioDetection]',
-	standalone: false
+	standalone: true
 })
 export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamDisplayAudioDetection(value: boolean) {
@@ -122,7 +122,7 @@ export class StreamDisplayAudioDetectionDirective implements AfterViewInit, OnDe
  */
 @Directive({
 	selector: 'ov-videoconference[streamVideoControls], ov-stream[videoControls]',
-	standalone: false
+	standalone: true
 })
 export class StreamVideoControlsDirective implements AfterViewInit, OnDestroy {
 	@Input() set streamVideoControls(value: boolean) {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
index d8a27b807..960605226 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/toolbar.directive.ts
@@ -19,7 +19,7 @@ import { ToolbarAdditionalButtonsPosition } from '../../models/toolbar.model';
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarCameraButton], ov-toolbar[cameraButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -83,7 +83,7 @@ export class ToolbarCameraButtonDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarMicrophoneButton], ov-toolbar[microphoneButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -147,7 +147,7 @@ export class ToolbarMicrophoneButtonDirective implements AfterViewInit, OnDestro
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarScreenshareButton], ov-toolbar[screenshareButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -211,7 +211,7 @@ export class ToolbarScreenshareButtonDirective implements AfterViewInit, OnDestr
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarRecordingButton], ov-toolbar[recordingButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -273,7 +273,7 @@ export class ToolbarRecordingButtonDirective implements AfterViewInit, OnDestroy
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarBroadcastingButton], ov-toolbar[broadcastingButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -334,7 +334,7 @@ export class ToolbarBroadcastingButtonDirective implements AfterViewInit, OnDest
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarFullscreenButton], ov-toolbar[fullscreenButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -395,7 +395,7 @@ export class ToolbarFullscreenButtonDirective implements AfterViewInit, OnDestro
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarBackgroundEffectsButton], ov-toolbar[backgroundEffectsButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -515,7 +515,7 @@ export class ToolbarBackgroundEffectsButtonDirective implements AfterViewInit, O
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarSettingsButton], ov-toolbar[settingsButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -576,7 +576,7 @@ export class ToolbarSettingsButtonDirective implements AfterViewInit, OnDestroy
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarLeaveButton], ov-toolbar[leaveButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -638,7 +638,7 @@ export class ToolbarLeaveButtonDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarParticipantsPanelButton], ov-toolbar[participantsPanelButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -701,7 +701,7 @@ export class ToolbarParticipantsPanelButtonDirective implements AfterViewInit, O
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarChatPanelButton], ov-toolbar[chatPanelButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -762,7 +762,7 @@ export class ToolbarChatPanelButtonDirective implements AfterViewInit, OnDestroy
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarActivitiesPanelButton], ov-toolbar[activitiesPanelButton]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -823,7 +823,7 @@ export class ToolbarActivitiesPanelButtonDirective implements AfterViewInit, OnD
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarDisplayRoomName], ov-toolbar[displayRoomName]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -885,7 +885,7 @@ export class ToolbarDisplayRoomNameDirective implements AfterViewInit, OnDestroy
  */
 @Directive({
 	selector: 'ov-videoconference[toolbarDisplayLogo], ov-toolbar[displayLogo]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -944,7 +944,7 @@ export class ToolbarDisplayLogoDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: '[ovToolbarAdditionalButtonsPosition]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarAdditionalButtonsPossitionDirective implements AfterViewInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
index 74b39ab6d..8fc250194 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/api/videoconference.directive.ts
@@ -19,7 +19,7 @@ import { StorageService } from '../../services/storage/storage.service';
  */
 @Directive({
 	selector: 'ov-videoconference[livekitUrl]',
-	standalone: false
+	standalone: true
 })
 export class LivekitUrlDirective implements OnDestroy {
 	/**
@@ -72,7 +72,7 @@ export class LivekitUrlDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[token]',
-	standalone: false
+	standalone: true
 })
 export class TokenDirective implements OnDestroy {
 	/**
@@ -124,7 +124,7 @@ export class TokenDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[tokenError]',
-	standalone: false
+	standalone: true
 })
 export class TokenErrorDirective implements OnDestroy {
 	/**
@@ -176,7 +176,7 @@ export class TokenErrorDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[minimal]',
-	standalone: false
+	standalone: true
 })
 export class MinimalDirective implements OnDestroy {
 	/**
@@ -241,7 +241,7 @@ export class MinimalDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[lang]',
-	standalone: false
+	standalone: true
 })
 export class LangDirective implements OnDestroy {
 	/**
@@ -311,7 +311,7 @@ export class LangDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[langOptions]',
-	standalone: false
+	standalone: true
 })
 export class LangOptionsDirective implements OnDestroy {
 	/**
@@ -493,7 +493,7 @@ export class LangOptionsDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[participantName]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
 	/**
@@ -554,7 +554,7 @@ export class ParticipantNameDirective implements AfterViewInit, OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[prejoin]',
-	standalone: false
+	standalone: true
 })
 export class PrejoinDirective implements OnDestroy {
 	/**
@@ -607,7 +607,7 @@ export class PrejoinDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[videoEnabled]',
-	standalone: false
+	standalone: true
 })
 export class VideoEnabledDirective implements OnDestroy {
 	/**
@@ -679,7 +679,7 @@ export class VideoEnabledDirective implements OnDestroy {
 
 @Directive({
 	selector: 'ov-videoconference[audioEnabled]',
-	standalone: false
+	standalone: true
 })
 export class AudioEnabledDirective implements OnDestroy {
 	/**
@@ -746,7 +746,7 @@ export class AudioEnabledDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[showDisconnectionDialog]',
-	standalone: false
+	standalone: true
 })
 export class ShowDisconnectionDialogDirective implements OnDestroy {
 	/**
@@ -812,7 +812,7 @@ export class ShowDisconnectionDialogDirective implements OnDestroy {
  */
 @Directive({
 	selector: 'ov-videoconference[recordingStreamBaseUrl]',
-	standalone: false
+	standalone: true
 })
 export class RecordingStreamBaseUrlDirective implements AfterViewInit, OnDestroy {
 	/**
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts
index 0b8999e31..399f81807 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts
@@ -185,7 +185,7 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
 	selector: '[ovPreJoin]',
-	standalone: false
+	standalone: true
 })
 export class PreJoinDirective {
 	constructor(
@@ -213,7 +213,7 @@ export class PreJoinDirective {
  */
 @Directive({
 	selector: '[ovParticipantPanelAfterLocalParticipant]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantPanelAfterLocalParticipantDirective {
 	constructor(
@@ -239,7 +239,7 @@ export class ParticipantPanelAfterLocalParticipantDirective {
  */
 @Directive({
 	selector: '[ovToolbarLeaveButton]',
-	standalone: false
+	standalone: true
 })
 export class LeaveButtonDirective {
 	constructor(
@@ -267,7 +267,7 @@ export class LeaveButtonDirective {
  */
 @Directive({
 	selector: '[ovLayoutAdditionalElements]',
-	standalone: false
+	standalone: true
 })
 export class LayoutAdditionalElementsDirective {
 	constructor(
@@ -300,7 +300,7 @@ export class LayoutAdditionalElementsDirective {
  */
 @Directive({
 	selector: '[ovParticipantPanelParticipantBadge]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantPanelParticipantBadgeDirective {
 	constructor(
@@ -335,7 +335,7 @@ export class ParticipantPanelParticipantBadgeDirective {
  */
 @Directive({
 	selector: '[ovSettingsPanelGeneralAdditionalElements]',
-	standalone: false
+	standalone: true
 })
 export class SettingsPanelGeneralAdditionalElementsDirective {
 	constructor(
@@ -370,7 +370,7 @@ export class SettingsPanelGeneralAdditionalElementsDirective {
  */
 @Directive({
 	selector: '[ovToolbarMoreOptionsAdditionalMenuItems]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarMoreOptionsAdditionalMenuItemsDirective {
 	constructor(
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts
index 436a20783..c7c395eff 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.module.ts
@@ -25,7 +25,7 @@ import {
 } from './internals.directive';
 
 @NgModule({
-	declarations: [
+	imports: [
 		ChatPanelDirective,
 		LayoutDirective,
 		PanelDirective,
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
index 806ff35ef..7804acdfe 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
@@ -120,7 +120,7 @@ import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
  */
 @Directive({
 	selector: '[ovToolbar]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarDirective {
 	/**
@@ -260,7 +260,7 @@ export class ToolbarDirective {
 
 @Directive({
 	selector: '[ovToolbarAdditionalButtons]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarAdditionalButtonsDirective {
 	/**
@@ -383,7 +383,7 @@ export class ToolbarAdditionalButtonsDirective {
  */
 @Directive({
 	selector: '[ovToolbarAdditionalPanelButtons]',
-	standalone: false
+	standalone: true
 })
 export class ToolbarAdditionalPanelButtonsDirective {
 	/**
@@ -533,7 +533,7 @@ export class ToolbarAdditionalPanelButtonsDirective {
  */
 @Directive({
 	selector: '[ovPanel]',
-	standalone: false
+	standalone: true
 })
 export class PanelDirective {
 	/**
@@ -720,7 +720,7 @@ export class PanelDirective {
  */
 @Directive({
 	selector: '[ovAdditionalPanels]',
-	standalone: false
+	standalone: true
 })
 export class AdditionalPanelsDirective {
 	/**
@@ -898,7 +898,7 @@ export class AdditionalPanelsDirective {
  */
 @Directive({
 	selector: '[ovChatPanel]',
-	standalone: false
+	standalone: true
 })
 export class ChatPanelDirective {
 	constructor(
@@ -913,7 +913,7 @@ export class ChatPanelDirective {
  */
 @Directive({
 	selector: '[ovBackgroundEffectsPanel]',
-	standalone: false
+	standalone: true
 })
 export class BackgroundEffectsPanelDirective {
 	constructor(
@@ -1026,7 +1026,7 @@ export class BackgroundEffectsPanelDirective {
  */
 @Directive({
 	selector: '[ovActivitiesPanel]',
-	standalone: false
+	standalone: true
 })
 export class ActivitiesPanelDirective {
 	constructor(
@@ -1197,7 +1197,7 @@ export class ActivitiesPanelDirective {
 
 @Directive({
 	selector: '[ovParticipantsPanel]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantsPanelDirective {
 	constructor(
@@ -1335,7 +1335,7 @@ export class ParticipantsPanelDirective {
 
 @Directive({
 	selector: '[ovParticipantPanelItem]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantPanelItemDirective {
 	constructor(
@@ -1478,7 +1478,7 @@ export class ParticipantPanelItemDirective {
 
 @Directive({
 	selector: '[ovParticipantPanelItemElements]',
-	standalone: false
+	standalone: true
 })
 export class ParticipantPanelItemElementsDirective {
 	constructor(
@@ -1674,7 +1674,7 @@ export class ParticipantPanelItemElementsDirective {
  */
 @Directive({
 	selector: '[ovLayout]',
-	standalone: false
+	standalone: true
 })
 export class LayoutDirective {
 	constructor(
@@ -1806,7 +1806,7 @@ export class LayoutDirective {
 
 @Directive({
 	selector: '[ovStream]',
-	standalone: false
+	standalone: true
 })
 export class StreamDirective {
 	constructor(
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts
index fd41024e5..7b60f91dd 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/openvidu-components-angular-ui.module.ts
@@ -87,7 +87,14 @@ const privateComponents = [
 ];
 
 @NgModule({
-	declarations: [
+	imports: [
+		CommonModule,
+		FormsModule,
+		ReactiveFormsModule,
+		AppMaterialModule,
+		OpenViduComponentsDirectiveModule,
+		ApiDirectiveModule,
+		DragDropModule,
 		...publicComponents,
 		...privateComponents,
 		LinkifyPipe,
@@ -98,15 +105,6 @@ const privateComponents = [
 		TrackPublishedTypesPipe,
 		TranslatePipe
 	],
-	imports: [
-		CommonModule,
-		FormsModule,
-		ReactiveFormsModule,
-		AppMaterialModule,
-		OpenViduComponentsDirectiveModule,
-		ApiDirectiveModule,
-		DragDropModule
-	],
 	exports: [
 		...publicComponents,
 		RemoteParticipantTracksPipe,
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts
index a6564a332..246bf13a1 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/linkify.pipe.ts
@@ -4,7 +4,7 @@ import { Linkifier } from '../models/linkifier.model';
 /**
  * @internal
  */
-@Pipe({ name: 'linkify', standalone: false })
+@Pipe({ name: 'linkify', standalone: true })
 export class LinkifyPipe implements PipeTransform {
 	private linkifer: Linkifier;
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts
index c348330f7..d07cfa85c 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/participant.pipe.ts
@@ -8,7 +8,7 @@ import { Track } from 'livekit-client';
  * This is used to display the tracks in the videoconference layout.
  * @returns {ParticipantTrackPublication[]} Array of tracks
  */
-@Pipe({ name: 'tracks', standalone: false })
+@Pipe({ name: 'tracks', standalone: true })
 export class RemoteParticipantTracksPipe implements PipeTransform {
 	constructor() {}
 
@@ -20,7 +20,7 @@ export class RemoteParticipantTracksPipe implements PipeTransform {
 /**
  * @internal
  */
-@Pipe({ name: 'tracksPublishedTypes', standalone: false })
+@Pipe({ name: 'tracksPublishedTypes', standalone: true })
 export class TrackPublishedTypesPipe implements PipeTransform {
 	constructor(private translateService: TranslateService) {}
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts
index 491a022a2..b16c9f36f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/recording.pipe.ts
@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
  */
 @Pipe({
 	name: 'duration',
-	standalone: false
+	standalone: true
 })
 export class DurationFromSecondsPipe implements PipeTransform {
 	transform(durationInSeconds: number): string {
@@ -28,7 +28,7 @@ export class DurationFromSecondsPipe implements PipeTransform {
  */
 @Pipe({
 	name: 'searchByStringProperty',
-	standalone: false
+	standalone: true
 })
 export class SearchByStringPropertyPipe implements PipeTransform {
 	transform(items: any[], props: { properties: string[]; filter: string }): any {
@@ -60,7 +60,7 @@ export class SearchByStringPropertyPipe implements PipeTransform {
  */
 @Pipe({
 	name: 'thumbnailUrl',
-	standalone: false
+	standalone: true
 })
 export class ThumbnailFromUrlPipe implements PipeTransform {
 	transform(url: string): string {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts
index b7595a2b7..ad0e75d1b 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/pipes/translate.pipe.ts
@@ -6,7 +6,7 @@ import { TranslateService } from '../services/translate/translate.service';
  */
 @Pipe({
     name: 'translate', pure: false,
-    standalone: false
+    standalone: true
 })
 export class TranslatePipe implements PipeTransform {
 	constructor(private translateService: TranslateService) {}