使用getstream.使用Angular 11/12

Question

我正在尝试使用getstream。

步骤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支持的内容。

Thanks in advance

Answer 1

添加"esModuleInterop": true到tsconfig。Json现在删除了错误

Answer 2

添加tsconfig.json

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