NullInjectorError: No provider for WrappedSocket!

[AndreaGero]

I've installed the package in a new Angular 14 installation, this is my app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoginComponent } from './components/pages/auth/login/login.component';
import { ToastrModule } from 'ngx-toastr';
import { MaterialModule } from './common/material/material.module';
import { ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NotFoundComponent } from './components/pages/errors/not-found/not-found.component';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { HttpErrorsInterceptor } from './interceptors/http-errors.interceptor';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { LuxonDateAdapter, MAT_LUXON_DATE_FORMATS } from '@angular/material-luxon-adapter';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { DashboardComponent } from './components/pages/user/dashboard/dashboard.component';
import { HomeComponent } from './components/pages/home/home.component';
import { SocketIoModule } from 'ngx-socket-io';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NotFoundComponent,
    DashboardComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({ enableHtml: true, positionClass: 'toast-bottom-right', timeOut: 10000 }),
    SocketIoModule.forRoot({ url: environment.baseUrl }),
    FlexLayoutModule,
    ReactiveFormsModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorsInterceptor, multi: true },
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' },
    { provide: MAT_DATE_FORMATS, useValue: MAT_LUXON_DATE_FORMATS },
    { provide: DateAdapter, useClass: LuxonDateAdapter, deps: [MAT_DATE_LOCALE] },
    {
      provide: MAT_DIALOG_DEFAULT_OPTIONS,
      useValue: { hasBackdrop: true, disableClose: true, minWidth: '450px', maxWidth: '850px' }
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and this is the component where I'm using the socket service:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Socket } from 'ngx-socket-io';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  public form = new FormGroup({
    message: new FormControl('', Validators.required),
  });

  constructor(private socket: Socket) {
  }

  ngOnInit() {
    this.socket.fromEvent('message').subscribe(message => console.log(message));
  }

  public sendMessage = () => {
    this.socket.emit(this.form.value.message!);
  }

}

but once I've access the component I have this error:

Am I doing something wrong?
I followed the documentation but it seems not working

[tkrizsa]

same
from ngx-socket-io npm page:
tsconfig.json:
{
...
"compilerOptions": {
...
"paths": {
"rxjs": ["node_modules/rxjs"]
}
},
}

helped for me

[Helveg]

You can use the Socket object directly to work around this:

socket = new Socket({ url: environment.baseUrl })

[github-actions]

This issue is stale because it has been open for 30 days with no activity.