角度测试，socket.io“NullInjectorError：没有 WrappedSocket 的提供者”

Question

我正在 Angular 上运行测试，但使用 ngx-socket-io 的套接字服务失败了。它适用于开发，但不适用于测试。它没有正确创建组件。

测试失败

我的服务.spec.ts

import { TestBed } from '@angular/core/testing';
import { SocketService } from './socket.service';

describe('SocketService', () => {
  let service: SocketService;

  beforeEach(() => {
    TestBed.configureTestingModule({
    });
    service = TestBed.inject(SocketService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

我的服务

import { Injectable } from '@angular/core';
import {Socket} from 'ngx-socket-io';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  constructor(private socket: Socket) { }

  getD1Data() {
    return this.createObserver('d1');
  }

  private createObserver(event: string) {
    return this.socket.fromEvent(event);
  }

我尝试添加提供程序 [WrappedSocket] 说实话，这是一个自动修复选项，但这会导致更多错误。

import {WrappedSocket} from 'ngx-socket-io/src/socket-io.service';

describe('SocketService', () => {
  let service: SocketService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [WrappedSocket]
    });
    service = TestBed.inject(SocketService);
  });


Error: ./src/app/modules/socket.service.spec.ts
Module not found: Error: Can't resolve 'ngx-socket-io/src/socket-io.service' in 'C:\Users\catha\project - Copy\src\app\modules'

我实际上不确定它怎么可能不存在，考虑到它是自动填充。

关于如何解决这个问题有什么想法吗？我尝试了一系列提供程序 [Socket] 、 [SocketIOModule] 但似乎没有任何效果

Answer 1

我在一台机器上遇到了同样的问题，而在另一台机器上没有遇到这个问题。我在两台机器上都有完全相同版本的软件包。我做了一点不同，以避免直接使用

Socket

包中的可注射

ngx-socket-io

：

1. 我已经创建了

   app-socket.service.ts

   :

import { Injectable } from '@angular/core';
import { Socket, SocketIoConfig } from 'ngx-socket-io';

const config: SocketIoConfig = { 
    url: 'http://127.0.0.1:8000', 
    options: {
        autoConnect: false
    } 
};

@Injectable({
    providedIn: 'root'
})
export class SocketService extends Socket {

    constructor() {
        super(config)
    }
}

2. 然后在

   app.module.ts

   我提供了一个提供者：

  providers: [
    SocketService
  ],

3. 最后我可以将提供程序注入到我的组件中：

  constructor(
    private socket: SocketService
  )

有效！

Answer 2

我们必须使用

config

类型的对象

SocketIoConfig

配置 SocketIOModule。

... //imports

const config: SocketIoConfig = { url: 'http://localhost:YOUR_PORT' };

describe('SocketService', () => {
  let service: SocketService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ SocketIOModule.forRoot(config) ],
      providers: [ SocketService ]
    });
    service = TestBed.inject(SocketService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

希望这有帮助！

Answer 3

角度编译器不知道服务组件存在。我能够通过向

app.module.ts

,

中的提供者添加服务组件来解决这个问题

@NgModule({
  declarations: [
    
  ],
  imports: [
   
  ],
  providers: [
    SocketService // <- your service
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    
  ],
})

并确保注入器未提供给root。

import { Injectable } from '@angular/core';
import {Socket} from 'ngx-socket-io';

@Injectable() //<- i personaly leave it as empty.
...

Answer 4

参考第10,11和19行在Angular应用程序中配置socket.io。这是基本的基本设置。至少你会摆脱 NullInjectorError。