Ionic 4 IOS Socket.io how to get config dynamically

Question

I'm programming an application with ionic and socket IO, in the app.module.ts the import of the socket needs a config for the url and options. This is hardcoded and i would like have this config dynamically from a form or a storage. I dont want to deploy the application for any change of the ip address or server port and i dont want to use a dns link. Can you tell me how I can do that ?

I'm using ionic : 5.4.5, Cordova 9.0.0 and deploy on IOS 12.4

Here is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { ErrorHandler } from '@angular/core';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://192.168.0.17:3001', options: {} };


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    SocketIoModule.forRoot(config),
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks for any response.

Answer 1

app.module.ts is your core application module and it should load fast to allow other modules and components to get ready asap. So adding business logic to it to fetch dynamic config for Socket.io might be suboptimal as you may cause UX issues (longer load time etc).

I would suggest moving the initialization/config of the socket.io away from app.module.ts to another module that gets loaded later in the start-up life cycle of your app.

I had similar requirement and I approached it this way:

-used other socket.io client library that does not require init via a module: https://github.com/socketio/socket.io-client

-created a service and imported this library into it:

import { Injectable } from "@angular/core";
import io from "socket.io-client";

export class FoundationProvider {
    public sockets;
}

-created a method that is called after I fetched socket config details and other details from persistence:

initSocketsIO() {
    if (this.data.userID && this.state.appIsOnline) {
      this.sockets = io(
        this.config.apiBaseUrl + "?_id=" + this.data.userID,
        {
          reconnectionAttempts: 3,
          reconnectionDelay: 10000,
          transports: ['websocket']
        }
      )
      this.sockets.on("snippets", event => {
        this.handleIncomingNotification(event.message);
      })
      this.sockets.on("tasks", event => {
        this.handleIncomingNotification(event.message);
      })
      this.sockets.on("payments", event => {
        this.handleIncomingNotification(event.message);
      })
    };
  };

If you still need your current library to work - then you may need to try moving it to another suitable module that loads later in your app start life cycle when global configs and variables are already available across the application. Hope this helps.