title: How can I debug the object type returned to the subscriber of an Angular observable?
body: <p>I'm a newbie to <strong>Angular-7</strong>, <strong>RxJS-6</strong> and <strong>Visual Studio Code</strong> and I'm having difficulty debugging an Observable that is being returned to a subscriber with the result that I have a runtime "TypeError" being raised by the subscriber. From research, it would appear that I'm not alone with tricky problems like this. Can you either suggest how I can determine what the subscriber is "observing" or can you spot the error in my code below?</p>
  
  <p><strong>In Detail</strong></p>
  
  <p>I'm writing a very simple proof of concept using Visual Studio Code and the Angular-7 CLI to retrieve the current system date/time from a server using angular's <code>httpclient</code> and display it.</p>
  
  <p>Refer to the method <em>instrument.service.ts::getSystemTimeDate()</em> below. The HTTP layer is fine in that the JSON response is obtained ...</p>
  
  <pre><code>{
    "SystemDateTime": "2018-11-26T08:54:06.894Z"
  }
  </code></pre>
  
  <p>Within the <code>map</code> operator, this response is first converted to an object of type <code>SystemDateTimeResponse</code> and then to a <code>Date</code> and the method should return an <code>Observable&lt;Date&gt;</code> to any subscribers. What I am having trouble with is the component's subscription to <code>Observable&lt;Date&gt;</code>. At runtime, this subscriber in the method <code>onTimeDateBtnClick()</code> throws an error: </p>
  
  <pre><code>ERROR
  TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
  message: "You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable."
  stack: "TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
      at subscribeTo (http://localhost:4200/vendor.js:75870:15)
      at subscribeToResult (http://localhost:4200/vendor.js:76027:76)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (http://localhost:4200/vendor.js:70784:90)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:4200/vendor.js:70778:14)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (http://localhost:4200/vendor.js:70761:18)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.js:65218:18)
      at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next (http://localhost:4200/vendor.js:73228:26)
      at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.js:65218:18)
      at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (http://localhost:4200/vendor.js:72950:30)
      at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (http://localhost:4200/vendor.js:65218:18)"
  __proto__: Error {constructor: , name: "TypeError", message: "", …}
  constructor: function TypeError() { … }
  message: ""
  name: "TypeError"
  toString: function toString() { … }
  __proto__: Object {constructor: , name: "Error", message: "", …}
  </code></pre>
  
  <p>I believe that I am not properly returning an <em>Observable</em> and may be screwing up my use of the map operator. What am I missing?</p>
  
  <hr>
  
  <p><strong>The Code</strong></p>
  
  <p>The software references of this snippet include:</p>
  
  <p><strong>timedate.component.html</strong>: contains the simple template of</p>
  
  <pre><code>&lt;p&gt;
    Last time I checked, it was : {{today | date:'medium'}}
  &lt;/p&gt;
  &lt;button mat-button (click)="onTimedateBtnClick()"&gt;Update&lt;/button&gt;
  </code></pre>
  
  <p><strong>timedate.component.ts</strong>: contains the display property definition of <code>today</code> and the event handler <code>onTimedateBtnClick()</code> which uses a data service to manage the HTTP request/response, retrieving the current date/time from a server.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { InstrumentService } from '../instrument.service';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-timedate',
    templateUrl: './timedate.component.html',
    styleUrls: ['./timedate.component.css']
  })
  export class TimedateComponent implements OnInit {
  
    /** Display property */
    today: Date;
  
    /**
     * Constructor
     * @param - data service
     */
    constructor(private dataService: InstrumentService) {
    }
  
    ngOnInit() {
      this.today = new Date();  /// initialise with client's date/time
    }
  
    /**
     *  User event handler requesting system time/date from the server
     */
    onTimedateBtnClick() {
      const http$: Observable&lt;Date&gt; = this.dataService.getSystemTimeDate();
  
      http$.subscribe(
        res =&gt; this.today = res,
      );
    }
  }
  </code></pre>
  
  <p><strong>instrument.service.ts</strong>: contains the <code>getSystemTimeDate()</code> method which returns an <code>Observable&lt;Date&gt;</code>. Again, I've simplified the code (although it still fails) and exaggerated the <em>map</em> in order to better see what I'm doing.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { HttpClient } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  
  // App imports
  import { SystemDateTimeResponse, SystemDateTimeUrl } from './instrument.service.httpdtos';
  
  
  @Injectable({
    providedIn: 'root'
   })
  export class InstrumentService {
  
    constructor(private http: HttpClient) { }
  
    /**
     * Return the server date and time
     */
    public getSystemTimeDate(): Observable&lt;Date&gt; {
      // Convert the server response object into an observable date
      const responseObject: Observable&lt;Date&gt; =
      this.http.get&lt;SystemDateTimeResponse&gt;(SystemDateTimeUrl.Url).
        pipe(
          map(jsonResponse =&gt; {
            const newDto = new SystemDateTimeResponse(jsonResponse.SystemDateTime);
            const d = new Date(newDto.SystemDateTime);
            return d;
          }),
        );
  
      return responseObject;
    }
  }
  </code></pre>
  
  <p><strong>instrument.service.httpdtos.ts</strong> : Contains data transfer object definitions.</p>
  
  <pre><code>/** URL - Instrument system date/time */
  export class SystemDateTimeUrl {
    public static readonly HttpVerb = 'GET';
    public static readonly Url = 'api/instrument/systemdatetime';
    public static readonly Summary = 'Query the instrument current date/time';
  }
  
  /** Response DTO */
  export class SystemDateTimeResponse {
    constructor(
      public SystemDateTime: string     // In UTC format
    ) { }
  }
  </code></pre>