bougarfaoui / ng-socket-io

Socket.IO module for Angular
MIT License
255 stars 57 forks source link

No provider for WrappedSocket #44

Closed khakanali closed 6 years ago

khakanali commented 6 years ago

I am getting this error. I am trying to implement multiple sockets with different end points. Can anyone please help me

  1. Here is main module (that one my shared module) `import {NgModule} from '@angular/core'; import {SocketIoModule} from 'ng-socket-io'; import {SocketService} from '../helpers/socket/socket.service'; import {NotificationSocket} from '../helpers/socket/notification.socket'; @NgModule({ declarations: [ ], imports: [ SocketIoModule ], exports: [

    ], providers: [ NotificationSocket, SocketService ] }) export class SharedModule { } `

  2. NotificationSocket file import {Injectable} from '@angular/core'; import {Socket} from 'ng-socket-io'; @Injectable() export class NotificationSocket extends Socket { constructor() { super({url: 'http://127.0.0.1:3000', options: {}}); } }
  3. SocketService file `import {Injectable} from '@angular/core'; import 'rxjs/add/operator/map'; import {Socket} from 'ng-socket-io';

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

sendMessage(event_name: string, data: any) {
    this.socket.emit(event_name, data);
}

getMessage(event_name: string) {
    return this.socket.fromEvent(event_name).map(
        response => response
    );
}

}`

bougarfaoui commented 6 years ago

you have to inject NotificationSocket instead of Socket :

@Injectable()
export class SocketService {
constructor(private socket: NotificationSocket ) {
}
radiumrasheed commented 6 years ago

I've tried this but no luck, even running the same version

emulator.service.ts

import { Injectable } from '@angular/core';
import { Socket } from 'ng-socket-io';
import * as moment from 'moment';
import { SocketOne } from '../../app.module';

@Injectable()
export class EmulatorService {
    public token;
    public lastFlashTime;

    constructor(private socket: SocketOne) {
        this.socket.on('connect', () => {
            console.log('online');
        });

        this.socket.on('disconnect', reason => {
            console.log('I disconnected', reason);
            socket.connect();
        });
                ...
       }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, Injectable, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, RequestOptions } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToasterModule } from 'angular2-toaster';
import { SortablejsModule } from 'angular-sortablejs';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { SocketIoModule, SocketIoConfig, Socket } from 'ng-socket-io';

import { AppRoutingModule } from './app.routing';
import { PagesModule } from './pages/pages.module';
import { ComponentsModule } from './components/components.module';

import { AppComponent } from './app.component';
import { AuthRequestOptions } from './services/auth/auth.request';
import { AuthErrorHandler } from './services/auth/auth-error.handler';
import { HttpErrorHandler } from './services/http-error-handler.service';
import { MessageService } from './services/message.service';
import { HttpInterceptorProviders } from './http-interceptors';
import { RequestCache, RequestCacheWithMap } from './services/request-cache.service';
import { AuthService } from './services/auth/auth.service';
import { EmulatorService } from './pages/emulator/emulator.service';

// const config: SocketIoConfig = { url: '', options: {} };

@Injectable()
export class SocketOne extends Socket {

    constructor() {
        super({ url: '', options: {} });
    }

}

@Injectable()
export class SocketTwo extends Socket {

    constructor() {
        super({ url: '/admin', options: {} });
    }

}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        BrowserAnimationsModule,
        ToasterModule,
        HttpModule,
        RouterModule,
        ComponentsModule,

        AppRoutingModule,
        PagesModule,
        SocketIoModule
    ],
    providers: [
        HttpErrorHandler,
        MessageService,
        SocketOne,
        SocketTwo,
                EmulatorService,
        HttpInterceptorProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
thierce commented 5 years ago

@radiumrasheed Did you ever get this working?

radiumrasheed commented 5 years ago

@thierce I can't recall, it's been a while, so sorry