Angular 17 not rendering a component with Socket.io

Question

I have the following Angular component, whose only property is an instance of ConnectionService service:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConnectionService } from './connection.service';
//import { inject } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // is the same with conn = inject(ConnectionService)
  constructor(private conn: ConnectionService) {}
  ...
}

The corresponding template in './app.component.html' is:

<div>
  <div>
    <div> Site id: <input placeholder="Insert a value"> <button > SET </button> </div>
    <textarea #myTextarea cols="40" rows="5"> </textarea>
  </div>
</div>

And here is the code of ConnectionService service:

import { Injectable } from '@angular/core';
import { Socket, io } from 'socket.io-client';
import { ServerToClientsEvent, ClientToServerEvent, OTSocketClient } from '../../../../Server/typings';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {
  socket: Socket<ServerToClientsEvent, ClientToServerEvent>;
  client!: OTSocketClient;
  constructor() {
    this.socket = io("http://localhost:3002/");
    this.socket.on("connect", () => {
      this.connectionService.client = new OTSocketClient(this.socket);
      console.log(`Client ${this.socket.id} connected`);
      this.connectionService.client.askDoc();
    })
  }
}

The problem is that when I start the application with ng serve the component's html is not rendered and the page keeps loading endlessly. It is probably due to the presence of Socket.io library, even if adding some console.log I can see that the connection is successful and also emit and on methods work successfully.

In the beginning my code for component was:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

let socket = io("http://localhost:3002/");
let client = new OTSocketClient(socket);
socket.on("connect", () => {
   console.log(`Client ${socket.id} connected`);
   client.askDoc();
})

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {}
  ...
}

and the template was rendered, but I can't know with certainty when the code before class declaration is executed so was suggested to me to insert the code in the constructor or in ngInit() method but I found the same problem I talked about above. For this reason I tried to add a Service but error persists.

Answer 1

I was having the same issue. I created a method in my service initiateSocket() which then I have called it from component after view init. It makes sure that you are connecting to socket only when required.