在Angular 11/12中使用getstream.io聊天

Question

我正在尝试使用Angular 11/12的getstream.io。

第1步:通过npm安装getstream安装npm

步骤2:通过npm install express @types/node安装额外的依赖项，并将"types": ["node"]添加到tsconfig

步骤3:初始化StreamChat的简单初始化服务：

import { StreamChat } from "stream-chat";

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  client: StreamChat;

  constructor() {
    this.client = StreamChat.getInstance(environment.getstream.apiKey);
  }

  async connectUserChat() {
    await this.client.connectUser(
      {
        id: 'xxx',
        name: 'Some Testuser'
      },
      "xxx",
    );
  }
}

结果：

Error: node_modules/stream-chat/dist/types/client.d.ts:3:8 - error TS1259: Module '"xxx/node_modules/isomorphic-ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import WebSocket from 'isomorphic-ws';
         ~~~~~~~~~

  node_modules/isomorphic-ws/index.d.ts:8:1
    8 export = WebSocket
      ~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSynth
eticDefaultImports' flag.


Error: node_modules/stream-chat/dist/types/connection.d.ts:3:8 - error TS1259: Module '"xxx/node_modules/isomorphic-ws/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

3 import WebSocket from 'isomorphic-ws';
         ~~~~~~~~~

  node_modules/isomorphic-ws/index.d.ts:8:1
    8 export = WebSocket
      ~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSynth
eticDefaultImports' flag.


Error: node_modules/stream-chat/dist/types/utils.d.ts:2:8 - error TS1259: Module '"xxx-
web/node_modules/stream-chat/node_modules/form-data/index"' can only be default-imported using the 'allowSyntheticDefaul
tImports' flag

2 import FormData from 'form-data';
         ~~~~~~~~

  node_modules/stream-chat/node_modules/form-data/index.d.ts:10:1
    10 export = FormData;
       ~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSynth
eticDefaultImports' flag.

你知道怎么解决这个问题吗？

如果getstream lib真的能与Angular一起工作，我也有点困惑。我可以找到一些使用Angular 9的官方教程，但我在他们的文档中找不到任何关于Angular支持的内容。

提前感谢

Answer 1

向tsconfig.json添加"esModuleInterop": true暂时删除了错误