Angular 5 Get correct Observable type from http request (why is it always Observable<Object>?)

Question

I'm having a little trouble getting the correct observable type from an http.get request. Here is the function I'm having trouble on:

getMovie(title:string, year:number): Observable<Movie> {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get(this.moviePath, {params})
  }

As you can see I want to receive and Observable of the class Movie from my backend api using the parameters 'title' and 'year'. The problem is that the reponse always comes back with the type Observable<Object> and not Observable<Movie>.

I'm aware that I could create a new Movie instance giving it the properties recieved from the list. The problem with that is that my movie class has properties that are optional. Here is my movie class:

export class Movie {
  title:string;
  year?:number;
  imdb?:string;
  trailer?:string;
  reviewClip?:string;
  reviewSummary?:string;
  reviewScore:number;
  createdAt?:Date;
  bestWeek:boolean;
  bestMonth:boolean;
}

Does anybody know an easy way to get the response to be of the type Observable<Movie> instead of Observable<Object>

Answer 1

If you are using HttpClient & Http,It will return you automatically Observable.

So modify your code as

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable'
import { HttpClient,HttpHeaders,HttpResponse,HttpParams } from '@angular/common/http';

import { environment } from '../../../../environments/environment';
import { Movie } from '../models/movie'


@Injectable()
export class MovieService {

  constructor(private http:HttpClient) {

   }

  getMovie(title:string, year:number) {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get<Movie>(this.moviePath, {params})
  }
}

This will give you response of type Movie

Answer 2

May be you can try to typecast from json response.

An example

public getEmployees(): Observable<IEmployee[]> {  
        return this.http.get(this._repositoryURL)  
            .map((response: Response) =>

   { return <IEmployee[]>response.json() })  
            .catch(this.handleError);  
 }  

Your code

getMovie(title:string, year:number): Observable<Movie> {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get(this.moviePath, {params}).map((response: Response) => { return <Movie>response.json() })  
                .catch(this.handleError);
 }

 private handleError(errorResponse: Response) {  
        console.log(errorResponse.statusText);  
        return Observable.throw(errorResponse.json().error || "Server error");  
 }