title: Create Observable immediately and queue up emits until subscription
body: <p>I have a messages Observable which I use to display notifications on the page. The issue I'm having is when an error occurs on page load before the messages Component has been initialised means the Observable hasn't been subscribed to and therefore is undefined when I try to emit the error.</p>
  
  <pre><code>export class MessageService {
      public messagesSource: Observable&lt;IMessage&gt;;
      private messagesObserver: any;
  
      constructor() {
          console.log('MessageService constructor called');
          this.messagesSource = new Observable(observer =&gt; {
              console.log('MessageService observer called');
              this.messagesObserver = observer;
          }).share();
      }
  
      public show = (message: IMessage) =&gt; {
          if (this.messagesObserver) {
              this.messagesObserver.next(message);
          } else {
              console.error('this.messagesObserver is not initialised', this.messagesObserver);
          }
      }
  }
  
  
  export class MessagingComponent {
      public messages: IMessage[] = [];
  
      constructor(private messageService: MessageService) {
          console.log('messaging component constructor');
          this.messageService.messagesSource.subscribe(message =&gt; this.setMessage(message));
      }
  }
  
  // and within my HttpService:
  private errorHandler = (error: Response): Observable&lt;any&gt; =&gt; {
      const err: string = error.text() || JSON.stringify(error);
      console.error('App error occurred:', err);
      this.messageService.show({ content: err, level: 'danger'});
      return Observable.from([null]);
  }
  </code></pre>
  
  <p>Normal operation log:</p>
  
  <blockquote>
    <p>Navigated to <a href="http://localhost:8090/" rel="nofollow noreferrer">http://localhost:8090/</a></p>
    
    <p>MessageService constructor called</p>
    
    <p>messaging component constructor</p>
    
    <p>MessageService observer called</p>
    
    <p>Angular is running in the development mode.</p>
  </blockquote>
  
  <p>And when there is an error in a resolver:</p>
  
  <blockquote>
    <p>Navigated to <a href="http://localhost:8090/jobs" rel="nofollow noreferrer">http://localhost:8090/jobs</a></p>
    
    <p>MessageService constructor called</p>
    
    <p>GET <a href="http://localhost:7777/api/jobs" rel="nofollow noreferrer">http://localhost:7777/api/jobs</a> 401 (Unauthorized)</p>
    
    <p>App error occurred: Authorization failure, invalid bearer token.</p>
    
    <p>this.messagesObserver is not initialised undefined</p>
    
    <p>messaging component constructor</p>
    
    <p>MessageService observer called</p>
    
    <p>Angular is running in the development mode.</p>
  </blockquote>
  
  <p>So I need a way to have <code>new Observable(observer)</code> to immediately create the Observer so that it isn't undefined and the messages aren't lost and emitted when the component is ready to subscribe.</p>