Laravel+Angular+Pusher聊天功能报错：Cannot read properties of undefined (reading 'channel')

使用Laravel、Angular结合Pusher搭建聊天功能，整体运行正常，但出现如下报错：

ERROR TypeError: Cannot read properties of undefined (reading 'channel')

相关代码：

import Echo from 'laravel-echo';

ngOnInit(): void {
  this.websocketChannelListening();
}

websocketChannelListening() {
  this.echo.channel('chat')
    .listen('ChatEvent', (res:any) => {
      const message: Messages = {
        message: res.message,
        me: false,
        from: res.from
      };
      this.allMessages.push(message);
    });
}

报错核心原因是this.echo未定义，组件内未正确初始化Laravel Echo实例，按以下步骤修复：

• 初始化Echo实例：在组件中先配置并创建Echo实例，确保this.echo被赋值。先安装pusher-js依赖（未安装的话），再添加初始化代码：

  import Echo from 'laravel-echo';
  import Pusher from 'pusher-js';
  
  // 全局挂载Pusher，避免Echo找不到依赖
  (window as any).Pusher = Pusher;
  
  export class YourChatComponent implements OnInit {
    // 声明echo属性
    echo: Echo;
  
    ngOnInit(): void {
      // 先初始化Echo
      this.initEcho();
      // 再调用监听方法
      this.websocketChannelListening();
    }
  
    initEcho() {
      this.echo = new Echo({
        broadcaster: 'pusher',
        key: '你的Pusher应用密钥', // 从Pusher控制台获取
        cluster: '你的Pusher集群', // 例如'us2'
        encrypted: true,
        // 若后端使用认证通道，需补充配置
        // authEndpoint: '/broadcasting/auth',
        // auth: {
        //   headers: {
        //     Authorization: 'Bearer ' + 你的用户token
        //   }
        // }
      });
    }
  
    websocketChannelListening() {
      this.echo.channel('chat')
        .listen('ChatEvent', (res:any) => {
          const message: Messages = {
            message: res.message,
            me: false,
            from: res.from
          };
          this.allMessages.push(message);
        });
    }
  }
  

• 保证初始化顺序：必须在调用websocketChannelListening()前完成Echo实例初始化，否则this.echo仍会是undefined。

• 依赖检查：确认已安装laravel-echo和pusher-js，未安装则执行：

  npm install laravel-echo pusher-js
  

内容的提问来源于stack exchange，提问作者marzouk najib