title: Angular 5 is not displaying response value from server
body: <p>It seems my client is not capturing the response value from the server and displaying it.</p>
  
  <p>Here is my component code:</p>
  
  <pre><code>export class MyComponent implements OnInit {
  
    data: string;
  
    constructor(private myService: MyService) {}
  
    ngOnInit() {}
  
    testCall() {
      this.myService.getData().subscribe(data =&gt; this.data = data);
      console.log("Data: " + this.data);
    }
  }
  </code></pre>
  
  <p>The service code:</p>
  
  <pre><code>@Injectable()
  export class MyService {
  
    private url = 'http://localhost:5000/myproj/api/test';
  
    constructor(private http: HttpClient) { }
  
    // Get data from the server
    getData(): Observable&lt;string&gt; {
      console.log("in getData() method");
      return this.http.get&lt;string&gt;(this.url)
        .pipe(
          catchError(this.handleError) // then handle the error
        );
    }
  
    private handleError(error: HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
        // A client-side or network error occurred. Handle it accordingly.
        console.error('An error occurred:', error.error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.error(
          `Backend returned code ${error.status}, ` +
          `body was: ${error.error}`);
      }
      // return an observable with a user-facing error message
      return new ErrorObservable('Something went wrong; please try again later.');
    };
  }
  </code></pre>
  
  <p>The request goes to the server, and the server responds with the data in the response body, and a status code of 200, which you can see in developer tools in Internet Explorer:</p>
  
  <p><a href="https://i.stack.imgur.com/RuiVo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RuiVo.png" alt="enter image description here"></a></p>
  
  <p>But for some reason, when I call the service method <code>getData()</code>, the angular client code  calls the <code>catchError()</code> method I defined, and prints:</p>
  
  <pre><code>Backend returned code 200, body was: [object Object]
  ERROR Something went wrong; please try again later.
  </code></pre>
  
  <p>Why is the server returning status 200 (OK), but the Angular client is calling the <code>catchError()</code> method?</p>
  
  <p>EDIT:</p>
  
  <p>Here is my server side API code:</p>
  
  <pre><code>@RequestMapping(value = "/test", method = RequestMethod.GET, produces = "text/plain")
      public String testApi(HttpServletRequest request) {
  
          System.out.println("in /test");
  
          String response = "my response";
  
          return response;
      }
  </code></pre>