title: Socket-io dynamic initialization
body: <h2>Problem statement</h2>
  
  <p>After implementing socket.io on my Angular app I was curious to learn if I could dynamically set-up the "SocketIoModule" on the client (FrontEnd) app.module file.</p>
  
  <p>I would like load the URL and port from the server (Back-end) config file following the description of the <a href="https://www.npmjs.com/package/ngx-socket-io" rel="nofollow noreferrer">npm package</a> </p>
  
  <pre><code>import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
  import { SocketService } from './services/socket.service';
  const socketConfig: SocketIoConfig = { url: 'http://localhost:3000', options: {} };
  
  @NgModule({
  
  [..]
  
  imports: [
      BrowserModule,
      SocketIoModule.forRoot(socketConfig)
    ],
  providers: [
    // all other providers
    &lt;SocketProvider&gt;
  ]
  
  [..]
  </code></pre>
  
  <p>//package.json </p>
  
  <pre><code>   "ngx-socket-io": "^2.1.1",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0"
  </code></pre>
  
  <h3>Desired end state</h3>
  
  <pre><code>//backend config service
  let url = config.env.url.base + config.env.url.socketIoPort;
  const socketConfig: SocketIoConfig = { url: url, options: {} };
  </code></pre>
  
  <p>As a side note, the main challenge is that when the client is loading, the UI doesn't have access to the server side (Angular security).</p>
  
  <p>I also read that the best way to achieving this, is using the "environment/environments" files [Dev, Staging, Prod]. </p>
  
  <p>Final notes: the whole point of this is to have a centralized file to have all the configurations and make it easier to maintain.</p>