Angular 11: ERROR TypeError: “... is not a function”. But actually it is

Question

I am working on webrtc based Audio/Video conferencing app. For that, I have created a frontend in Angular 11 and the Backend node(express server). So I have created this app in using vanilla JS, HTML, CSS and it worked. But when I tried to convert the frontend into Angular app that where the problem comes.

Working of the app goes like this, first I create the room and I will get a roomId which I send to another person and he uses that roomId to join the room for a chat.

When another person joins the room then onRoomJoined() gets executed on my side.

async onRoomJoined(data) {
    await this.setUpConnection(data['client-id'], data['client-name']);
    this.socket.emit('send-metadata', { 'room-id': this.roomId, 'client-name': this.clientName, 
      'client-id': this.clientId, 'peer-id': data['client-id'] });
}

Now this function further calls setUpConnection() function which is as follows,


  async setUpConnection(peerId, peerName, initiateCall = false){
    const videoElement = this.getVideoElement(peerId, 0, peerName);
    videoElement.autoplay = true;
    videoElement.playsInline = true;
    this.peerConnections[peerId] = { 'peer-name': peerName, 'pc': new RTCPeerConnection(iceServers) };
    this.peerConnections[peerId].pc.ontrack = (track) => { this.setRemoteStream(track, peerId); };
    this.addLocalStreamTracks(peerId);
    this.peerConnections[peerId].pc.onicecandidate = (iceCandidate) => { this.gatherIceCandidates(iceCandidate, peerId); };
    this.peerConnections[peerId].pc.oniceconnectionstatechange = (event) => { this.checkPeerDisconnection(event, peerId); };
    if (initiateCall === true) {
      await this.createOffer(peerId);
    }
  }

Following is the error I am getting in the browser console on my side(room creator),

ERROR Error: Uncaught (in promise): TypeError: this.setUpConnection is not a function
TypeError: this.setUpConnection is not a function
    at Socket.<anonymous> (home.component.ts:440)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.component.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at resolvePromise (zone-evergreen.js:798)
    at new ZoneAwarePromise (zone-evergreen.js:963)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.component.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at Socket.onpacket (socket.js:214)
    at Manager.push.cpc2.Emitter.emit (index.js:145)

Here Both of above functions onRoomJoined() and setUpConnection() are there in home.component.ts file. Still I am getting the TypeError: this.setUpConnection is not a function.

How this is possible?

Any Help is appreciated, Thanks!

Consider that the value of this may not be what you think it is.. — Pointy
– Pointy, Commented Apr 24, 2021 at 13:51
bind "this" to onRoomJoined invocation or use arrow function to call it e.g. onRoomJoined.bind(this) OR (data) => onRoomJoined(data) — Eray Ismailov
– Eray Ismailov, Commented Apr 24, 2021 at 14:11

Jaymeen_JK · Accepted Answer · 2021-04-24 16:03:30Z

6

I think you are mis-interpreting the 'this' keyword. 'this' inside the event handler would refer to the instance of the socket and not the component itself and hence it won't be able to find your setUpConnection() function in its vicinity. What you need to do is instead of a callback function try using the arrow function in your event handler. Say for example if you have done :

socket.on('some-event', onRoomJoined);

function onRoomJoined(data) {
    ...
    ...
    ...
}

What you should do instead is :

socket.on('some-event', (data) => {
    ...
    ...
    ...
});

Now inside the arrow function, the keyword 'this' would refer to your component and you'll be able to call the setUpConnection() function without any hassle.

answered Apr 24, 2021 at 16:03

Jaymeen_JK

3304 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vuth · Accepted Answer · 2021-04-24 14:11:22Z

1

if onRoomJoined function is called as a callback function like onontrack = onRoomJoind, then this is no longer the Angular component. You can get around this by passing this or setUpConnection function the as a param in onRoomJoined and use/call it inside.

answered Apr 24, 2021 at 14:11

Vuth

213 bronze badges

Collectives™ on Stack Overflow

Angular 11: ERROR TypeError: “... is not a function”. But actually it is

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related