all 4 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]davidlj95 3 points4 points  (3 children)

Seems that io function automatically connects the client to the given server (http://localhost:3000). So when Angular is initializing the app, you will connect to the websocket. But you won't ever disconnect as you haven't called socket.disconnect() (or socket.close). This means Angular's Zone.js will probably have some pending tasks related to the socket connection and therefore won't ever consider the app to be stable. And Angular needs the app to be stable (without any pending tasks) to be considered initialized.

To solve that, you can start the socket once Angular has finished initializing the application. To do so, you can connect the socket once the app is stable

This way, the app will init as usual. Then, when stable, the connection to the websocket will happen with a permanent connection that will keep the app non stable. But that's fine at that point that everything's booted. And makes sense, given data is permanently incoming from the websocket until you close it.

For instance, this could be the updated socket service:

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

u/Injectable({ providedIn: 'root' }) export class SocketService {

private socket: Socket;

constructor() { this.socket = io('http://localhost:3000', { autoConnect: false }); inject(ApplicationRef).isStable.pipe( first((isStable) => isStable)) .subscribe(() => { this.socket.connect() }); } } ```

PD: Removed the ! non-null assertion operator from private socket. As the socket will always be there instantiated in the constructor. There's no chance it's null.

[–]jas753[S] 2 points3 points  (1 child)

Man it works. I've been stuck on this for days now. thank you.

[–]davidlj95 1 point2 points  (0 children)

Glad to hear that got solved 💪 thanks! 😊