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

user_13155827 0
Viewed 2345

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!

typeerror angular javascript
2 Answers

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.

user_77329860

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.

user_111125040
Related