Why does my Socket.IO connection prevent my Angular component from reloading?

I have an Angular component that connects to a Socket.IO server. However, when I include the WebSocket connection code, my component fails to reload properly. If I comment out the Socket.IO code, everything works fine.

Here's my component code:

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { io } from "socket.io-client";

@Component({
selector: 'app-restaurant-admin',
templateUrl: './restaurant-admin.component.html',
styleUrls: ['./restaurant-admin.component.css']
})
export class RestaurantAdminComponent implements OnInit, OnDestroy {
private socket: any;
ordersRetrieved: any[] = [];

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {

this.loadRestaurantAdminPackage(); // sends a request to backend with cookie id to retrieve data using session variables

this.socket = io("http://localhost:3000", { withCredentials: true });

this.socket.on("connect", () => {
this.socket.emit('restaurantConnected');
console.log("Restaurant front end connected to back end");
});


this.socket.on('orderPaid&Placed', (data) => {
console.log('New Order Placed:', data.orderJSON);
alert(data.message);

});
}

ngOnDestroy() {
if (this.socket) {
console.log("Disconnecting socket...");
this.socket.disconnect();
}
}
}


Issue: When the component reloads (e.g., after a navigation event), the page gets stuck and fails to render. I get an error similar to: Page /restaurantAdmin did not render in 30 seconds.

But if I comment out the Socket.IO connection, the component reloads normally.

Question Why does the Socket.IO connection interfere with my component reload? What is the best way to manage WebSocket connections in an Angular component to prevent this issue?

Continue reading...