Nrthugu

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 {}