Getting error while calling IO in socket.io-client, angular 8

Question

I am calling IO of socket.io-client in my angular project like below:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import * as io from 'socket.io-client';
@Injectable({
  providedIn: 'root'
})
export class SocketclientService {
  socket:any;
  url:any="ws://localhost:8080"
  constructor() {
    this.socket = io(this.url);
   }
   
   listen(eventname:any,data:any){
     return new Observable((subscriber)=>{
       this.socket.on(eventname,(data:any)=>{
         subscriber.next(data);
       })
     })
   }
   emit(eventname:string,data:any){
     this.socket.emit(eventname,data);
   } 
}

But I am always getting an error like:

 Error: src/app/services/socketclient.service.ts:11:19 - error TS2349: This expression is not callable.
      Type 'typeof import("C:/somepathtoproject/node_modules/socket.io-client/build/index")' has no call signatures.
    
    11     this.socket = io(this.url);
                         ~~

I am not getting it why this is showing, even I have installed @types/socket.io-client

Answer 1

In angular 10 works fine:

import {io} from 'socket.io-client';

This is the official documentation https://socket.io/docs/v3/client-api/index.html

Answer 2

That may be caused by the type definitions been installed separately. But they are shipped with the socket.io-client package now (see docs: "Note for TypeScript users").

So just uninstall them and change the imports:

npm uninstall @types/socket.io-client

import { io, Socket } from 'socket.io-client';

Answer 3

I found a workaround for this, I explored the socket.io-client modules a bit and under 'index.d.ts' I found this line:

export { lookup as io, Socket, SocketOptions };

So I tried importing like this:

import {io} from 'socket.io-client/build/index';

then to use it:

this.socket=io(url);

it worked for me.