Undefined provider + module has no member exported

[TheLLspectre]

Hello everyone !!
I work on Ionic Project.
I'm trying to use multiple sockets with different end points, but i have those errors:

Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
at syntaxError (http://localhost:8100/build/vendor.js:80958:34)
at http://localhost:8100/build/vendor.js:95082:40
at Array.forEach ()
at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/vendor.js:95067:19)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:94722:50)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:106063:70)
at JitCompiler.compileModuleAndComponents (http://localhost:8100/build/vendor.js:106036:36)
at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:105965:37)
at PlatformRef.bootstrapModuleWithZone (http://localhost:8100/build/vendor.js:4894:25)
at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:4880:21)

and:

Module "C:/Users/TheLLspectre/documents/Visual studio 2017/Projects/webAppRaspberry/webAppRaspberry/src/assets/typescript/SocketRasp" has no exported member 'SocketRasp'.

SocketRasp.ts

import { Injectable, NgModule } from '@angular/core';
import { Socket } from 'ng-socket-io';
@Injectable()
export class SocketOne extends Socket
{
constructor(private ipAddress: String)
{
super({ url: 'http://' + ipAddress + ':8080', options: {} });
}
}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';
import { MyApp } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
import { SocketRasp } from '../assets/typescript/SocketRasp';
//pages
import { HomePage } from '../pages/home/home';
import { viewerPage } from '../pages/viewer/viewer';
@NgModule({
declarations: [
MyApp,
HomePage,
viewerPage
],
imports: [
IonicModule.forRoot(MyApp),
HttpClientModule,
BrowserModule,
SocketIoModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
viewerPage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
SocketRasp
]
})
export class AppModule {}

It's working with SocketIoModule and SocketIoConfig, so i don't understand why this doesn't work....

[bougarfaoui]

@TheLLspectre what's inside SocketRasp ?

[TheLLspectre]

@bougarfaoui the same code as the example:

import { Injectable, NgModule } from '@angular/core';
import { Socket } from 'ng-socket-io';
@Injectable()
export class SocketOne extends Socket
{
constructor(private ipAddress: String)
{
super({ url: 'http://' + ipAddress + ':8080', options: {} });
}
}

[bougarfaoui]

@TheLLspectre

first you have to rename your service SocketRasp instead of SocketOne , also you need to inject the ipAddress and provide its value to the App Injector by adding it into the providers array :

@Injectable()
export class SocketRasp extends Socket {
    constructor( @Inject("_IP_ADDRESS_") private ipAddress: String) {
        super({ url: 'http://' + ipAddress + ':8988', options: {} });
    }
}

@NgModule({
  //...
  providers: [
    //...
    {
      provide: "_IP_ADDRESS_",
      useValue: "127.0.0.1" // your ip address
    },
    SocketRasp
  ]
})
export class AppModule { }

if you want to use an other socket with different IP address it's simple :

@Injectable()
export class SocketRaspTwo extends Socket {
    constructor( @Inject("_IP_ADDRESS_TWO") private ipAddress: String) {
        super({ url: 'http://' + ipAddress + ':8988', options: {} });
    }
}

providers: [
    //...
    {
      provide: "_IP_ADDRESS_",
      useValue: "yyy.yyy.yyy.yyy" // your ip address
    },
    { 
      provide: "_IP_ADDRESS_TWO",
      useValue: "xxx.xxx.xxx.xxx" // your second ip address
    },
    SocketRasp,
    SocketRaspTwo 
  ]
})
export class AppModule { }

[TheLLspectre]

first you have to rename your service SocketRaspinstead of SocketOne

it's already done !

I'm not trying this right now, but later ;)

I just have question now, can i have something like 8 different socket ?

I tell you what happen, if its work or not, when i do it ! Thanks !!

[bougarfaoui]

@TheLLspectre Yes you can.

[TheLLspectre]

I'm back ;)
i didn't see this big mistake, it just was a bad copy paste, and i don't rename my ts file xD, and now it's working !
Well done ! Thanks !

[TheLLspectre]

It is possible to enter manually the ip we want to connect on ?? without the provider that mean ?

[bougarfaoui]

yes you can , but you have to instantiate the service by yourself like this:

export class SocketRasp extends Socket {
    constructor( private ipAddress: String) {
        super({ url: 'http://' + ipAddress + ':8988', options: {} });
    }
}

new SocketRasp('zzz.zzz.zzz.zzz')

[TheLLspectre]

hey !
I re-open, this post, i've an error on this new way to implement Socket:

Error: Can't resolve all parameters for SocketRasp: (?).

let me show you the code:

i have an object/page called home, which allow me to show html in my viewer, and create a Socket, which i want to be linked to this homePage, and i can called a lot of HomePage, to have something like 8 pages with Socket
'
`import { Injectable, NgModule, Inject, Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
//import { Socket } from 'ng-socket-io';
import { SocketRasp } from '../../assets/typescript/SocketRasp'
import 'rxjs/add/operator/map';

@component({
selector: 'page-rasp',
templateUrl: 'home.html',
})

export class HomePage /extends Socket/ {

private ipAddress: String;
private ip: String;
//private rasp: SocketRasp;

constructor(private rasp: SocketRasp)
{
    /*this.ip = ip;
    this.ipAddress = this.ip;
    this.setRasp(new SocketRasp(this.ipAddress));
    console.log(this.rasp);*/
}

//getters

public getIpAddress()
{
    return this.ipAddress;
}

public getRasp()
{
    return this.rasp;
}

public getIp()
{
    return this.ip;
}

//setters

public setIpAddress(ipAddress: String)
{
    this.ipAddress = ipAddress;
}

public setRasp(rasp: SocketRasp)
{
    this.rasp = rasp;
}

public setIp(ip: String)
{
    this.ip = ip;
}

//methods

}`

and then i have the socketRasp:

import { NgModule } from '@angular/core';
import { Socket } from 'ng-socket-io';
export class SocketRasp extends Socket
{
constructor(private ipAddress: String)
{
super({ url: 'http://' + ipAddress + ':8080', options: {} }); //Port can be placed in ipAddress, think to delete it, in that case
}
//getters
//setters
//methods
}

So in first time i've this error.
And in second time, just before i try this i have the first solution with provider, and i stock every HomePage created in an Array to interact with the ip from his own page, but automatically it had an other Socket empty with the good one with an ip enter by me, and it try to connect to this one empty .....

But first time how i can fix this problem of parameter ???

[TheLLspectre]

To resume the first one works only if i declare different ipAddress in the provider, but i don't want to do that ! I want to create an HomePage this create a SocketRasp link to it's parent with it's own ipAddress