title: Angular httpClient get single object typeError _co.object undefined
body: <p>I use Angular5 with httpClient to request a rest api.
  My issue is I perfectly get lists of objects but I can't obtain a single object.
  I use modules for this module I have a service in which I have my call to the api-rest:</p>
  
  <pre><code>    getUser(id: string) {
      return this.http.get&lt;IUserComponent&gt;('apiAddress/getbyid?id=' + id);
      }
  </code></pre>
  
  <p>In the component I call it</p>
  
  <pre><code>    ngOnInit() {
      this.id = this.route.snapshot.paramMap.get('id');
      this.getUser(this.id);
      }
      getUser(id): void {
      this.userService.getUser(id).subscribe(data =&gt; {
          this.user = data;
      });
      }
  </code></pre>
  
  <p>And I call user in my template:</p>
  
  <pre><code>    &lt;p&gt;
        {{user.name}}
      &lt;/p&gt;
  </code></pre>
  
  <p>When I do that I get nothing displayed and the error </p>
  
  <pre><code>    TypeError: _co.user is undefined
      ERROR CONTEXT Object { view: Object, nodeIndex: 12, nodeDef: Object, elDef: Object, elView: Object }
  </code></pre>
  
  <p>I can get something displayed but I still get the error if in the service I say I want an array </p>
  
  <pre><code>    getUser(id: string) {
      return this.http.get&lt;IUserComponent[]&gt;('apiAddress/getbyid?id=' + id);
      }
  </code></pre>
  
  <p>and when I call it I say </p>
  
  <pre><code>    ngOnInit() {
      this.id = this.route.snapshot.paramMap.get('id');
      this.getUser(this.id);
      }
      getUser(id): void {
      this.userService.getUser(id).subscribe(data =&gt; {
          this.user = data[0];
      });
      }
  </code></pre>
  
  <p>And finally if I call the service:</p>
  
  <pre><code>    getUser(id: string) {
      return this.http.get&lt;IUserComponent[]&gt;('apiAddress/getbyid?id=' + id);
      }
  </code></pre>
  
  <p>and call it </p>
  
  <pre><code>    ngOnInit() {
      this.id = this.route.snapshot.paramMap.get('id');
      this.getUser(this.id);
      }
      getUser(id): void {
      this.userService.getUser(id).subscribe(data =&gt; {
          this.users = data;
      });
      }
  </code></pre>
  
  <p>I can display the data with *ngFor and don't get any error.
  I don't very understand why.</p>
  
  <p>In the hero tutorial of Angular 
  <a href="https://angular.io/tutorial/toh-pt6" rel="noreferrer">https://angular.io/tutorial/toh-pt6</a>
  They wrote this service to get all:</p>
  
  <pre><code>      getHeroes (): Observable&lt;Hero[]&gt; {
        return this.http.get&lt;Hero[]&gt;(this.heroesUrl)
        .pipe(
        tap(heroes =&gt; this.log(`fetched heroes`)),
        catchError(this.handleError('getHeroes', []))
        );
        }
  </code></pre>
  
  <p>and this one to get a single one</p>
  
  <pre><code>    getHero(id: number): Observable&lt;Hero&gt; {
      const url = `${this.heroesUrl}/${id}`;
      return this.http.get&lt;Hero&gt;(url).pipe(
      tap(_ =&gt; this.log(`fetched hero id=${id}`)),
      catchError(this.handleError&lt;Hero&gt;(`getHero id=${id}`))
      );
      }
  </code></pre>
  
  <p>where the pipe is used to do several action so here tap and cathError and tap I am not sure to understand correctly what it is used for there is a doc 
  <a href="https://github.com/ReactiveX/rxjs/blob/5.5.2/src/operators/tap.ts#L14" rel="noreferrer">https://github.com/ReactiveX/rxjs/blob/5.5.2/src/operators/tap.ts#L14</a>
  but it seems to be used for debug.</p>