title: Injecting window object into a component into Angular with DI
body: <p>I'm loading socket.io in my application like so:</p>
  
  <pre><code>index.html
  &lt;script src="http://myapp.com/socket.io/socket.io.js"&gt;&lt;/script&gt;
  ...
  // Angular stuff
  </code></pre>
  
  <p>I have a component called <code>Socket</code> which requires <code>window.io</code> to work.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Events } from 'ionic-angular';
  
  @Injectable()
  export class Socket {
  
    public isConnected: boolean = false;
  
    constructor(public events: Events) {
      if (typeof window.io === "undefined") {
          throw new Error("Socket.io is undefined.");
      }
  
      this.io = window.io;
    }
  
    connect() {
      this.io.connect("...");
    }
  
    listen() {
  
    }
  
  }
  </code></pre>
  
  <p>In theory, it may work (didn't test) but it is not a good practice to inject stuff from window scope into classes.</p>
  
  <p>Is there any way to do it like this:</p>
  
  <pre><code>import { SocketIODriver } from 'socket.io';
  import { Socket } from 'App/Socket/Socket';
  
  @Component({
     templateUrl: 'layout.html'
  })
  export class ConferenceApp {
     constructor(
       public io: io,
       public Socket: Socket
     ) {
        this.socket = new Socket(new SocketIODriver());
     }
  }
  </code></pre>
  
  <p>Thank you.</p>
  
  <p>Ps. IIRC, socket.io has to be loaded from the server, that's why I load it from my server. If it can be placed into my JS folder, that would be even better.</p>