Greetings! I am currently working on integrating socket.io into my Angular project. I have three files to showcase: a component file, a service file, and a module file. However, whenever I try to use the service in my component file, I encounter the static injector error described below:
Error: StaticInjectorError(AppModule)[AppComponent -> WrappedSocket]: StaticInjectorError(Platform: core)[AppComponent -> WrappedSocket]:
NullInjectorError: No provider for WrappedSocket!
Component File Example:
import { Component } from '@angular/core';
import { cheema2 } from './practice.service';
import { Injectable } from '@angular/core';
import { Socket } from 'ng-socket-io';
@Component
({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
@Injectable()
export class AppComponent
{
constructor(private socket: Socket) { }
sendMessage(msg: string){
this.socket.emit("message", msg);
}
getMessage()
{
console.log( this.socket.fromEvent("message"));
}
}
Module File Example:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:4200', options: {}
};
import { AppComponent } from './app.component';
@NgModule
({
declarations:
[
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Service File Example:
import { Injectable } from '@angular/core';
import { Socket } from 'ng-socket-io';
@Injectable()
export class cheema2
{
constructor(private socket: Socket) { console.log("adil"); }
sendMessage(msg: string){
console.log("sharif");
this.socket.emit("message", msg);
}
getMessage() {
console.log( this.socket.fromEvent("message"));
}
}
If anyone has a solution to resolve this error, please do share.