How to use guacamole-lite from the frontend ?

[MeriemBo]

I'm trying to use this from my angular app , running on port 4200 in order to connect to an external desktop running on a given IP address. Here's the code I could achieve for that purpose so far :

import { Component, OnInit } from '@angular/core';
import { RemoteDesktopManager } from '@illgrenoble/ngx-remote-desktop';
import { WebSocketTunnel } from '@illgrenoble/guacamole-common-js';
import { Guacamole } from 'guacamole-common-js';
import { GuacamoleLite } from 'guacamole-lite';
  @Component({
   selector: 'app-rdp',
   templateUrl: './rdp.component.html',
   styleUrls: ['./rdp.component.scss']
   })
  export class RDPComponent implements OnInit {

  private manager: RemoteDesktopManager;
  ngOnInit() {
    // Setup tunnel. The tunnel can be either: WebsocketTunnel, HTTPTunnel or ChainedTunnel
    const tunnel = new WebSocketTunnel('ws://localhost:4200');
    const client = new Guacamole.Client(tunnel);
    document.body.appendChild(client.getDisplay().getElement());
    /**
     *  Create an instance of the remote desktop manager by 
     *  passing in the tunnel and parameters
     */
    this.manager = new RemoteDesktopManager(tunnel);
          // URL parameters (image, audio and other query parameters you want to send to the tunnel.)
    const parameters = {
        ip: '120.160.10.149',
        port : 5000,
        type: 'rdp',
        image: 'image/png',
        width: window.screen.width,
        height: window.screen.height,
        username:'username',
        password :'0000'

    };
    this.manager.connect(parameters);
    console.log('tunnel state'+this.manager.getState());
    console.log('Disconnected state'+RemoteDesktopManager.STATE.DISCONNECTED);
}

}

In my console I keep getting this error :

I'm new to this and I don't know what am I missing . any help provided will be good. thank you

[ankitmhn]

Did you find a solution to this?

[eglove]

I get either the Client doesn't exist or WebSocketTunnel is not a function or constructor. (Depending on how to try to use it.)

[MarkSpencerTan]

I think it's how you're importing the Guacamole client on the top. Try this instead:

import Guacamole from 'guacamole-common-js';

[Harsh4999]

What is the solution to this I am too stuck here