使用 getstream.io 与 Angular 聊天 11/12

Question

我正在尝试将 getstream.io 与 Angular 11/12 一起使用。

第 1 步：通过 npm install getstream 安装 npm

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

第 3 步：用于初始化 StreamChat 的简单 init 服务：

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 库实际上完全可以与 Angular 一起使用，我也有点困惑。我可以找到一些使用 Angular 9 的官方教程，但我在他们的文档中找不到任何关于 Angular 支持的内容。

提前致谢

Answer 1

将"esModuleInterop": true 添加到 tsconfig.json 暂时消除了错误

Answer 2

在 tsconfig.json 中添加

"compilerOptions": {
 "allowSyntheticDefaultImports": true,
}