Angular应用连接WebSocket后无限加载、不渲染组件的解决方法

我正在把Angular应用连接到WebSocket服务器，服务器日志显示应用已经成功连接，但Angular端一直无限加载，任何组件和页面都渲染不出来。下面是我的VideoItemComponent组件代码和WebsocketService服务代码，求修复方法，让应用连接WebSocket后停止加载，正常渲染组件。

组件代码 #

import {Component, OnInit} from '@angular/core';
import {WebsocketService} from "../../service/websocket.service";

@Component({
selector: 'app-video-item',
standalone: true,
imports: [],
templateUrl: './video-item.component.html',
styleUrl: './video-item.component.scss'
})
export class VideoItemComponent{
constructor(private websocketService: WebsocketService) { }
ngOnInit() {
}
}

服务代码 #

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

@Injectable({
providedIn: 'root'
})
export class WebsocketService {
socket = io("http://localhost:3000/")
}

• 延迟WebSocket初始化，避免阻塞Angular启动流程
  原代码在服务类定义时直接同步初始化WebSocket连接，会在Angular应用启动阶段抢占主线程，阻塞组件渲染。改为按需初始化的方式：

  修改后的WebsocketService：

  import { Injectable } from '@angular/core';
  import {io, Socket} from "socket.io-client";
  
  @Injectable({
    providedIn: 'root'
  })
  export class WebsocketService {
    socket: Socket | undefined;
  
    // 按需调用连接
    connect() {
      if (!this.socket) {
        this.socket = io("http://localhost:3000/");
      }
    }
  
    // 可选：添加断开连接方法
    disconnect() {
      if (this.socket) {
        this.socket.disconnect();
        this.socket = undefined;
      }
    }
  }
  

• 在组件生命周期钩子中初始化连接
  在组件的ngOnInit中调用WebSocket连接方法，确保组件渲染完成后再建立连接，彻底避免启动阶段的阻塞：

  修改后的VideoItemComponent：

  import {Component, OnInit} from '@angular/core';
  import {WebsocketService} from "../../service/websocket.service";
  
  @Component({
    selector: 'app-video-item',
    standalone: true,
    imports: [],
    templateUrl: './video-item.component.html',
    styleUrl: './video-item.component.scss'
  })
  export class VideoItemComponent implements OnInit {
    constructor(private websocketService: WebsocketService) { }
  
    ngOnInit() {
      // 组件初始化后再连接WebSocket
      this.websocketService.connect();
    }
  }
  

• 添加错误监听，排查隐性异常
  给WebSocket连接添加错误和断开监听，避免因为连接异常导致的隐性阻塞，同时方便调试问题：

  在WebsocketService的connect方法中补充：

  connect() {
    if (!this.socket) {
      this.socket = io("http://localhost:3000/");
      
      // 监听连接错误
      this.socket.on('connect_error', (error) => {
        console.error('WebSocket连接出错:', error);
      });
      
      // 监听断开事件
      this.socket.on('disconnect', () => {
        console.log('WebSocket已断开');
      });
    }
  }
  

内容的提问来源于stack exchange，提问作者kaguya shinomiya