Odtnhj

Openvidu library angular
The library configured for the root component. But I want to add the same as a child component. The following sample code is working fine and open vidu component is called and rendered on root URL.
I don't have any Idea of angular development.

open-vidu.component.html

<div *ngIf="!session" id="join">
 <div id="join-dialog">
 <h1>Join a video session</h1>
 <form (submit)="joinSession()">
 <p>
 <label>Participant </label>
 <input type="text" id="userName" name="userName" [(ngModel)]="myUserName" required>
 </p>
 <p>
 <label>Session </label>
 <input type="text" id="sessionId" name="sessionId" [(ngModel)]="mySessionId" required>
 </p>
 <p class="text-center">
 <input type="submit" name="commit" value="Join!">
 </p>
 </form>
 </div>
</div>

<div *ngIf="session" id="session">
 <opv-session [sessionName]="mySessionId" [user]="myUserName" [token]="token" (leaveSession)="handlerLeaveSessionEvent($event)"
 (joinSession)="handlerJoinSessionEvent($event)" (error)="handlerErrorEvent($event)">
 </opv-session>
</div>

import Component, OnInit from '@angular/core';
import throwError as observableThrowError from 'rxjs';
import catchError from 'rxjs/operators';
import HttpClient, HttpHeaders from '@angular/common/http';
@Component(
 selector: 'app-open-vidu',
 templateUrl: './open-vidu.component.html',
 styleUrls: ['./open-vidu.component.scss']
)
export class OpenViduComponent implements OnInit 
 OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
 OPENVIDU_SERVER_SECRET = 'MY_SECRET';

 // Join form
 mySessionId = 'SessionA';
 myUserName = 'Participant' + Math.floor(Math.random() * 100);
 token: string;
 session = false;

 constructor(private httpClient: HttpClient) 

 joinSession() 
 this.getToken().then((token) => 
 this.token = token;
 this.session = true;
 );
 

 handlerJoinSessionEvent(event): void 
 // Do something
 

 handlerLeaveSessionEvent(event): void 
 this.session = false;
 

 handlerErrorEvent(event): void 
 // Do something
 

 /**
 * --------------------------
 * SERVER-SIDE RESPONSIBILITY
 * --------------------------
 * This method retrieve the mandatory user token from OpenVidu Server,
 * in this case making use Angular http API.
 * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
 * 1) Initialize a session in OpenVidu Server (POST /api/sessions)
 * 2) Generate a token in OpenVidu Server (POST /api/tokens)
 * 3) The token must be consumed in Session.connect() method of OpenVidu Browser
 */

 getToken(): Promise<string> 
 return this.createSession(this.mySessionId).then((sessionId) => 
 return this.createToken(sessionId);
 );
 

 createSession(sessionId) 
 return new Promise((resolve, reject) => 
 const body = JSON.stringify( customSessionId: sessionId );
 const options = 
 headers: new HttpHeaders(
 Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
 'Content-Type': 'application/json',
 ),
 ;
 return this.httpClient
 .post(this.OPENVIDU_SERVER_URL + '/api/sessions', body, options)
 .pipe(
 catchError((error) => 
 if (error.status === 409) 
 resolve(sessionId);
 else 
 console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL);
 if (
 window.confirm(
 'No connection to OpenVidu Server. This may be a certificate error at "' +
 this.OPENVIDU_SERVER_URL +
 '"nnClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
 'is up and running at "' +
 this.OPENVIDU_SERVER_URL +
 '"',
 )
 ) 
 location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
 
 
 return observableThrowError(error);
 ),
 )
 .subscribe((response) => 
 console.log(response);
 resolve(response['id']);
 );
 );
 

 createToken(sessionId): Promise<string> 
 return new Promise((resolve, reject) => 
 const body = JSON.stringify( session: sessionId );
 const options = 
 headers: new HttpHeaders(
 Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
 'Content-Type': 'application/json',
 ),
 ;
 return this.httpClient
 .post(this.OPENVIDU_SERVER_URL + '/api/tokens', body, options)
 .pipe(
 catchError((error) => 
 reject(error);
 return observableThrowError(error);
 ),
 )
 .subscribe((response) => 
 console.log(response);
 resolve(response['token']);
 );
 );
 

 ngOnInit() 
 

open-vidu.routing.ts

import Routes from '@angular/router';
import OpenViduComponent from './open-vidu.component';


export const OpenViduRoutes: Routes = [
 
 path: '',
 component: OpenViduComponent
 
];

open-vidu.module.ts

import NgModule from '@angular/core';
import RouterModule from '@angular/router';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';
import OpenViduComponent from './open-vidu.component';
import OpenViduRoutes from './open-vidu.routing';

import OpenviduSessionModule from 'openvidu-angular';

@NgModule(
 imports: [
 CommonModule,
 RouterModule.forChild(OpenViduRoutes),
 FormsModule,
 OpenviduSessionModule
 ],
 declarations: [OpenViduComponent],
 exports: [
 OpenViduComponent
 ]
)
export class OpenViduModule 

app.module.ts

...
import OpenViduModule from './open-vidu/open-vidu.module';
@NgModule(
 imports: [
 CommonModule,
 BrowserAnimationsModule,
 FormsModule,
 RouterModule.forRoot(AppRoutes),
 HttpModule,
 MaterialModule,
 MatNativeDateModule,
 SidebarModule,
 NavbarModule,
 FooterModule,
 FixedpluginModule,
 HttpClientModule,
 OpenViduModule
 ],
 declarations: [
 AppComponent,
 AdminLayoutComponent,
 AuthLayoutComponent
 ],
 providers: [TwilioService, ChatService],
 bootstrap: [ AppComponent ]
)
export class AppModule 

I have tried to comment the openvidu component from app.module.ts and import it in a child component but it not worked and throws following error all the time.
Error: RouterModule.forRoot() called twice.
Please suggest me what I am doing wrong in the code.
The child module code is following:

tutor.module.ts

...
import OpenViduModule from '../open-vidu/open-vidu.module';
@NgModule(
 imports: [
 ...,
 OpenViduModule
 ],
 providers: [TutorService],
 declarations: [
 AddTutorComponent,
 ListTutorComponent,
 EditTutorComponent,
 AllocateTutorComponent
 ]
)

export class Tutor