升级Angular 9后使用ng2-signalR组件出现报错求助

项目升级至Angular 9后可正常启动，但使用ng2-signalR的组件出现报错，当前使用的ng2-signalR版本为"ng2-signalr": "^6.1.0"。

组件相关代码 #

import { SignalR, IConnectionOptions } from 'ng2-signalr';

constructor(private _signalR: SignalR)

ngOninit(){
 let o: IConnectionOptions;
    let conx = this._signalR.createConnection();
    conx.status.subscribe((s) => {if(s.name=='disconnected') {conx.start()}});
    conx.start().then((c) => {
      let listener = c.listenFor('getChanges');
      listener.subscribe((data) => {
        if (data == 'UpdateSitRep') {
         //do something;
        }
      });
    });
}

app.module.ts配置代码 #

import { SignalRModule, SignalRConfiguration } from "ng2-signalr";

export function createConfig(): SignalRConfiguration {
  const c = new SignalRConfiguration();
  c.hubName = 'NotifyHub';
  c.qs = { user: '' };
  c.url = `${environment.apiUrl}/signalr`;
  c.logging = true;
  c.executeEventsInZone = true; // optional, default is true
  c.executeErrorsInZone = false; // optional, default is false
  c.executeStatusChangeInZone = true; // optional, default is true
  return c;
}

报错说明 #

报错截图显示运行时错误，涉及SignalR连接创建及监听逻辑的类型或调用问题。

解决方案 #

1. 版本兼容性修复
   ng2-signalr@6.1.0仅适配Angular 6/7版本，与Angular 9存在兼容性冲突。建议升级到适配Angular 9的版本，执行命令：

npm install ng2-signalr@10.0.0 --save

2. 代码适配新版本API
   新版本ng2-signalr的API有变更，需调整连接与监听逻辑：

import { SignalR, SignalRConnection } from 'ng2-signalr';
import { ChangeDetectorRef } from '@angular/core';

constructor(
  private signalR: SignalR,
  private cdr: ChangeDetectorRef
) {}

ngOnInit() {
  this.signalR.connect().then((connection: SignalRConnection) => {
    // 监听连接状态
    connection.status.subscribe(status => {
      if (status.name === 'disconnected') {
        connection.start();
      }
    });

    // 监听Hub事件
    connection.on('getChanges', (data) => {
      if (data === 'UpdateSitRep') {
        // 执行业务逻辑
        this.cdr.markForCheck(); // 手动触发变更检测（按需添加）
      }
    });
  }).catch(err => {
    console.error('SignalR连接失败:', err);
  });
}

3. 模块配置优化
   确保app.module.ts中正确配置SignalRModule：

import { SignalRModule } from 'ng2-signalr';
import { environment } from '../environments/environment';

export function createSignalRConfig() {
  return {
    hubName: 'NotifyHub',
    url: `${environment.apiUrl}/signalr`,
    qs: { user: '' },
    logging: true
  };
}

@NgModule({
  imports: [
    // 其他模块
    SignalRModule.forRoot(createSignalRConfig)
  ]
})
export class AppModule { }

4. Zone.js兼容处理
   若出现异步回调不触发Angular变更检测的问题，可将配置中的executeEventsInZone设为false，并在回调中手动调用markForCheck()或detectChanges()触发变更检测。

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