无法在 Angular 项目中导入 socket.io-client

Posted 2023-03-07

【中文标题】无法在 Angular 项目中导入 socket.io-client

【英文标题】：Can't import socket.io-client in angular project

【发布时间】：2021-09-26 14:45:01

【问题描述】：

我正在尝试将 socket.io-client 导入我的项目，但是导入行

import * as io from 'socket.io-client';

抛出以下错误

ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,204): '>' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,239): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,260): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,265): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,296): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,313): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,321): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,49): ';' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,92): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (21,86): Cannot find name 'Parameters'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,212): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,241): Cannot find name 'ReservedEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,256): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,262): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,273): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,298): Cannot find name 'UserEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,309): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,315): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,58): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,94): Cannot find name 'T'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (51,31): Class 'StrictEventEmitter<ListenEvents, EmitEvents, ReservedEvents>' incorrectly extends base class 'Emitter<string>'.
  Types of property 'on' are incompatible.
    Type '<Ev extends ReservedOrUserEventNames<ReservedEvents, ListenEvents>>(ev: Ev, listener: [Ev]) => this' is not assignable to type '(event: string, listener: Function) => Emitter<string>'.
      Types of parameters 'listener' and 'listener' are incompatible.
        Type 'Function' is not assignable to type '[any]'.
          Property '0' is missing in type 'Function'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (72,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (82,75): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (48,9): An accessor cannot be declared in an ambient context.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (73,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (184,9): An accessor cannot be declared in an ambient context.

经过一番挖掘，我发现在角度调试模式下，如果我将导入行注释掉，保存、取消注释并保存代码在调试模式下完美运行。

有没有办法修复它，以便在没有我上面提到的步骤的情况下导入？

Angular 版本是 4.4.6 而socket.io-client版本是1.7.3

这里是 tsconfig.json 文件

  "compileOnSave": false,
  "compilerOptions": 
    "esModuleInterop": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  ,
  "allowSyntheticDefaultImports": true

【问题讨论】：

您需要提供有关您的项目的更多信息，因为导入语句本身是完全有效的。

我添加了包版本和 tsconfig.json 文件

我无法重现您的问题。你能提供复制回购吗？

当然，github.com/DanielBotnik/ButtonsGame

【参考方案1】：

您在 1.7.3 版本中使用的不是 socket.io-client，而是^4.1.3 版本。由于其打包的类型定义文件，这个事实上创建了对 typescript 4 的依赖，但您的项目使用 typescript ~2.3.3 编译。因此你得到的错误。

确保使用npm i -S socket.io-client@1.7.3 安装正确的版本。虽然它不打包自己的类型定义（因此它不创建对 typescript 的依赖），所以您还需要安装 @types/socket.io-client@1 来获取类型。

【参考方案2】：

我不确定您提到的问题，但我可能能够提供解决方法。

在使用 Angular 和 Socket.io 时，您可以尝试使用这个包而不是 https://www.npmjs.com/package/ngx-socket-io。我以前用过，效果很好，说不定能解决你的问题。

只需安装它然后配置它。比如：

import  SocketIoModule, SocketIoConfig  from 'ngx-socket-io';

const config: SocketIoConfig =  url: 'http://localhost:8988', options:  ;

@NgModule(
  declarations: [AppComponent],
  imports: [BrowserModule, SocketIoModule.forRoot(config)],
  bootstrap: [AppComponent],
)
export class AppModule