How to set up a Socket.io-based Feathers app with Angular 2

app-injector.ts

import {Injector} from 'angular2/core';

let appInjectorRef: Injector;
export const appInjector = (injector?: Injector):Injector => {
  if (injector) {
    appInjectorRef = injector;
  }
  return appInjectorRef;
};

bootstrap.ts

import {SocketService} from './feathers.service';
import {appInjector} from './app-injector';

document.addEventListener('DOMContentLoaded', function main() {
  bootstrap(MyMainComponent, [
    // Other stuff you need
    SocketService
  ]).then((appRef: ComponentRef) => { appInjector(appRef.injector); })

feathers.service.ts

import {Injectable} from 'angular2/core';
import {Observable, Subject} from 'rxjs';

const io = require('socket.io-client');
const feathers = require('feathers/client');
const socketio = require('feathers-socketio/client');
const localstorage = require('feathers-localstorage');
const hooks = require('feathers-hooks');
const authentication = require('feathers-authentication/client');

@Injectable()
export class SocketService {
  public socket: SocketIOClient.Socket;
  public connectSubject: Subject<boolean> = new Subject();

  protected _app: any;
  private _loggedIn: boolean = false;
  private _isConnected: boolean = false;

  constructor() {
    this.socket = io(HOST);

    this._app = feathers()
      .configure(socketio(this.socket))
      .configure(hooks())
      .use('storage', localstorage())
      .configure(authentication());

    this.socket.on('connected', () => {
      this.connectSubject.next(true);
    });
  }
  
  checkAuth() {
    return Observable.of(this._loggedIn);
  }
  
  login (username, password) {
    return this._app.authenticate({
      type: 'local',
      username: username,
      password: password
    }).then(() => { this._loggedIn = true; });
  }

  logout () {
    return this._app.logout().then(() => {
      this._loggedIn = false;
    });
  }
  
  refreshToken (token) {
    return this._app.authenticate({
      type: 'token',
      token: token
    }).then(() => { this._loggedIn = true; });
  }  
}

is-logged-in.ts

import {Injector} from 'angular2/core';
import {Router, ComponentInstruction} from 'angular2/router';

import {appInjector} from './app-injector';
import {SocketService} from './feathers.service';

export const isLoggedIn = (next: ComponentInstruction, previous: ComponentInstruction) => {
  let injector: Injector = appInjector(); // get the stored reference to the injector
  let router: Router = injector.get(Router);
  let socketService: SocketService = injector.get(SocketService);

  // return a boolean or a promise that resolves a boolean
  return new Promise((resolve) => {
    // Wait until the socketService is connected, then check authentication
    socketService.connectSubject.first((x) => x).concat(
      socketService.checkAuth().take(1)
    )
      .subscribe((isLoggedIn) => {
        // We're good!
        if (isLoggedIn) {
          resolve(true);
        } else {
          // Attempt to refresh the token we've got
          socketService.getToken().then(token => {
            socketService.refreshToken(token).then(() => {
              resolve(true);
            }).catch(e => {
              router.navigate(['/Login']);
              resolve(false);
            });
          }).catch(e => {
            router.navigate(['/Login']);
            resolve(false);
          });
        }
    });
  });
};

protected-route.ts

import {isLoggedIn} from './is-logged-in.ts';
import {ComponentInstruction, CanActivate}

@Component({
  selector: 'app'
})
@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => {
  return isLoggedIn(next, previous);
})
export class YourProtectedRoute {}