Hello @giga! Below is a working example for you to try out.

PREPARATION

npm install socket.io-client --save
npm install @types/socket.io-client --save

Server-side (nodejs)

var express = require('express');
var path = require('path');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

var port = 8000;

app.use(express.static(path.join(__dirname, "public")));

io.on('connection', (socket) => {
console.log('new connection made');

socket.on('event1', (data) => {
  console.log(data.msg);
});

socket.emit('event2', {
  msg: 'Server to client, do you read me? Over.'
});

socket.on('event3', (data) => {
  console.log(data.msg);
  socket.emit('event4', {
    msg: 'Loud and clear :)'
  });
});
});

server.listen(port, () => {
  console.log("Listening on port " + port);
});

Client-side - Angular4 code

import { Component, OnInit } from '@angular/core';
import * as io from 'socket.io-client';

@Component({
    moduleId: module.id,
    selector: 'ch-home',
    styleUrls: ['home.styles.css'],
    templateUrl: 'home.template.html'
})

export class HomeComponent implements OnInit {
    messageText: string;
    messages: Array<any>;
    socket: SocketIOClient.Socket;

  constructor() {
   // this.socket = io.connect('http://localhost:8000');
   this.socket = io.connect();
  }

  ngOnInit() {
        this.messages = new Array();

        this.socket.on('message-received', (msg: any) => {
            this.messages.push(msg);
            console.log(msg);
            console.log(this.messages);
        });
      this.socket.emit('event1', {
          msg: 'Client to server, can you hear me server?'
      });
      this.socket.on('event2', (data: any) => {
        console.log(data.msg);
        this.socket.emit('event3', {
            msg: 'Yes, its working for me!!'
        });
      });
      this.socket.on('event4', (data: any) => {
          console.log(data.msg);
      });
   }

   sendMessage() {
    const message = {
      text: this.messageText
    };
    this.socket.emit('send-message', message);
    // console.log(message.text);
    this.messageText = '';
  }

}

Integrating socket.io-client into an Angular application

Installation Steps:

npm install socket.io-client --save

Note (for Socket.IO v3):
Avoid installing @types/socket.io-client separately as the types are now included in the socket.io-client package. Installing them additionally can cause issues (source).

The Angular Service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io, Socket } from 'socket.io-client';

@Injectable()
export class ChatService {
  private socket: Socket;

  constructor() {
    this.socket = io('http://localhost:3000');
  }

  // Emitting a message
  sendMessage(msg: string) {
    this.socket.emit('sendMessage', { message: msg });
  }

  // Handling incoming messages
  onNewMessage() {
    return new Observable(observer => {
      this.socket.on('newMessage', msg => {
        observer.next(msg);
      });
    });
  }
}

Usage in a Component:

import { Component, OnInit } from '@angular/core';
import { ChatService } from './chat-service';

@Component({
  // ...details...
})
export class ChatComponent implements OnInit {
  msgInput: string = 'lorem ipsum';

  constructor(
    private chatService: ChatService,
  ) { }

  ngOnInit() {
    this.chatService.onNewMessage().subscribe(msg => {
      console.log('Received message: ' + msg);
    });
  }

  sendButtonClick() {
    this.chatService.sendMessage(this.msgInput);
  }
}

After following the solution provided by @MA-Maddin, I implemented the following:

Service: socket.service

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SocketService {
private socket:SocketIOClient.Socket;

constructor() { 
  this.socket=io('http://localhost:3300');
}
emit(event:string, data:any){
  this.socket.emit(event,data);
}
on(event:string){
  return Observable.create(observer=>{
   this.socket.on(event,data=>{
    observer.next(data);
   });
  })
 }
}

Component

 import { Component, OnInit, Input, ViewChild, ViewEncapsulation} from 
'@angular/core';
import { AuthService } from 'src/app/auth/auth.service';
import Socket from '../../services/socket.service';

@Component({
  selector: 'app-lobby-chat',
  templateUrl: './lobby-chat.component.html',
  styleUrls: ['./lobby-chat.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class LobbyChatComponent implements OnInit {
  constructor(private socket:Socket) {
  this.socket.on('getMessage').subscribe(data=>{
  console.log(data);
  });
  }
  pushMessage(msg){
  this.socket.emit('sendMessage',msg);
  }
}

This implementation will ensure that your bindings are updated correctly. Note: **Remember to use npm i "@types/socket.io-client" for utilizing or defining Socket IO Types **

Although this is an old issue, none of the suggested solutions worked for me. Therefore, I came up with a different approach that resolved the problem.

Do Not Waste your time if your socket connection polling seems to be functioning correctly without any errors. The issue might stem from a conflict between the socket.io.client package and your other configurations.

The versions of the applications in my setup are as follows:

Angular 12.x Socket.io.client 4.x Node 14.16.1 I also attempted using the ngx-socket-io package, but that did not provide a solution either. It's puzzling that while the socket.io polling works fine and the handshakes are correct, receiving new message events fails.

My final resolution involved manually adding socket.io to the index.html file of Angular and triggering an event to the component.

function RsCustomEvent ( event, message ) {
    params = { bubbles: false, cancelable: false, detail: message };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}
var socket = io('localhost:3000');
socket.on("channel-name", function (message) {
    window.dispatchEvent(RsCustomEvent('socketEventListen',message));

});

Subsequently, in the Angular component, I utilized the following code:

 import { Observable , fromEvent} from 'rxjs';


fromEvent(window, 'socketEventListen').subscribe((data) =>{
 });

I downloaded the socket.io client JS file manually, placed it in the asset folder, and used the aforementioned codes.

Aside from VithuBati's solution, make sure to include the following installations:

npm install socket.io-client --save
npm install @types/socket.io-client --save