title: Function returning string instead of json object
body: <p>I am working on/extending TOH.  I have an add method that wants to push the new Hero onto the array then return user to the list. </p>
  
  <p>the result of the call to addHero is coming back as a JSON hero inside double ticks, so as a string. </p>
  
  <p>i have read many articles which seem to point to </p>
  
  <pre><code>angular.toJson
  or 
  .map(response=&gt; response.JSON())
  </code></pre>
  
  <p>These are not working. </p>
  
  <p><strong>Here is the excerpt from  my heroes.component.ts</strong></p>
  
  <pre><code>  add(name: string): void {
      name = name.trim();
      if (!name) { return; }
      this.heroService.addHero({ name } as Hero)
        .subscribe(hero =&gt;
        {
          this.heroes.push(hero);
          this.location.go('/Heroes');
        }
        );
    }
  </code></pre>
  
  <p><strong>and hero.service.ts</strong>
  This clearly returns a Hero object... </p>
  
  <pre><code>  addHero (hero: Hero): Observable&lt;Hero&gt; {
      return this.http.post&lt;Hero&gt;(this.heroesUrl, hero, httpOptions).pipe(
        tap((hero: Hero) =&gt; console.log(`added hero w/ id=${hero.id}`)),
        catchError(this.handleError&lt;Hero&gt;('addHero'))
      );
    }
  </code></pre>
  
  <p>Upon return, the result is successfully pushed to the array, but enclosed in quotes.</p>
  
  <p><a href="https://i.stack.imgur.com/lmP51.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lmP51.png" alt="array entry pushed as a string"></a></p>
  
  <p>The UI evidence of this is that the list has a blank entry at the bottom because there is no .Name property on that final array element. </p>
  
  <p>If i refresh the page, everyone gets loaded as json. </p>
  
  <p>Simple question but I can not seem to find an answer. Have been through many S/O questions involving ng2, php, etc. but none seem to address ng6, or provide a clue I can take away. if they do, Im missing it.</p>