nest js websocket connection is not working with angular 11

Created a nest js websocket and trying to connect to that from angular app version 11. Not able to connect to socket from angular 11. I am using latest version of socket.io-client.

In websocket server log says connect and disconnects.

nest js websocket file:

import { Logger } from '@nestjs/common';
import { OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WsResponse } from '@nestjs/websockets';
import { Socket,Server } from 'socket.io';

import { EventPattern } from '@nestjs/microservices';

@WebSocketGateway(3001)

export class AppGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect{
    private Logger = new Logger('AppGateway');

    afterInit(server: Server) {
        this.Logger.log("App Gateway Initialized");
    }

    handleConnection(client: Socket, ...args: any[]){
        this.Logger.log(`New client connected...: ${client.id}`);
        client.emit('connected', 'Successfully connected to the server.');
    }

    handleDisconnect(client: Socket) {
        this.Logger.log(`Client disconnected: ${client.id}`);
    }

    @SubscribeMessage('msgToServer')
    handleMessage(client:Socket, text:string):WsResponse<string> {
        this.Logger.log(`got new event`);
        return {event: 'msgToClient', 'data': text};
    }
}

angular websocket service file:

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

@Injectable({
  providedIn: 'root'
})
export class WebSocketService {

  socket: any;

  constructor() {
    this.socket = io('http://localhost:3001');
    debugger;

    this.socket.on('connected', function() {
        console.log("connected !");
    });

  }

  listen(eventName: string) {
    return new Observable((subscriber) => {
      this.socket.on(eventName, (data) => {
        subscriber.next(data);
      })
    });
  }

  emit(eventName: string, data:any) {
    this.socket.emit(eventName, data);
  }
}

angular app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { WebSocketService } from './web-socket.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit{
  title = 'dashboard';


  constructor(
    private webSocketService: WebSocketService
  ) {}

  ngOnInit() {
    /*this.webSocketService.listen('msgToClient').subscribe((data) => {
      console.log(data);
    })*/

    this.webSocketService.listen('connected').subscribe((data) => {
      console.log(data);
    })
  }
}