title: ensuring STOMP socket connection is established before subscribing
body: <p>In my Angular 2 project, I am using the <a href="https://www.npmjs.com/package/ng2-stomp-service" rel="nofollow noreferrer">ng2-stomp-service</a> to establish a socket connection to the server.</p>
  
  <p>Most of the time it works fine, but sometimes I get this error when trying to subscribe to the socket, saying that my connection has not been established yet:</p>
  
  <pre><code>Error: Uncaught (in promise): Error: InvalidStateError: The connection has not been established yet Error: InvalidStateError: The connection has not been established yet
      at SockJS.send (main.js:158)
      at Client._transmit (stomp.js:159)
      at Client.subscribe (stomp.js:379)
      at StompService.subscribe (stomp.service.ts:132)
      at slide-manager.service.ts:129
      at ZoneDelegate.invoke (zone.js:391)
      at Object.onInvoke (core.es5.js:3933)
      at ZoneDelegate.invoke (zone.js:390)
      at Zone.run (zone.js:141)
      at zone.js:818
      at SockJS.send (main.js:158)
      at Client._transmit (stomp.js:159)
      at Client.subscribe (stomp.js:379)
      at StompService.subscribe (stomp.service.ts:132)
      at slide-manager.service.ts:129
      at ZoneDelegate.invoke (zone.js:391)
      at Object.onInvoke (core.es5.js:3933)
      at ZoneDelegate.invoke (zone.js:390)
      at Zone.run (zone.js:141)
      at zone.js:818
      at resolvePromise (zone.js:770)
      at zone.js:821
      at ZoneDelegate.invokeTask (zone.js:424)
      at Object.onInvokeTask (core.es5.js:3924)
      at ZoneDelegate.invokeTask (zone.js:423)
      at Zone.runTask (zone.js:191)
      at drainMicroTaskQueue (zone.js:584)
      at WebSocket.ZoneTask.invoke (zone.js:490)
  </code></pre>
  
  <p>The piece of this stack trace that belongs to me is the slide-manager.service.ts:129.  That code is at the stomp.subscribe line of this code:</p>
  
  <pre><code>this.socketConfig = {
        host: 'http://' + getHost() + '/app-ws',
        debug: true,
        queue: {'init': false}
      };   
  
   this.stomp.configure(this.socketConfig);
   this.stomp.startConnect().then((frame) =&gt; {
   this.stomp.done('init');
   this.connected = true;
   this.spectraSubscription = this.stomp.subscribe('/topic/spectra', (spectra) =&gt; {
       if (spectra &amp;&amp; (!this.theChart || hostElement.childElementCount === 0) &amp;&amp; !this.refreshFlag) {
           this.makeChart(spectra.points, hostElement);
           this.refreshFlag = true;
       } else if (spectra &amp;&amp; (this.theChart || hostElement.childElementCount &gt; 0) || this.refreshFlag) {
           this.theChart.collectionView.sourceCollection = spectra.points;
           this.theChart.collectionView.refresh();
       }
    });
  </code></pre>
  
  <p>How can I ensure that the connection is indeed established before it tries to execute the .subscribe()?  I figured putting it in the .then() block would do the trick, since that should only be executed after the connection's promise has resolved, but apparently it's still getting triggered even when no connection exists (according to the error).</p>
  
  <p>Or is there more at play here that I'm missing?</p>