HttpEvent<Observable<State[]>>' is not assignable to type 'Observable<State[]>

Question

My Angular application retrieves states data from REST API and displays on the web page. I have state component that calls state service which then calls backend using httpClient.get() method. When I pass parameters from the component to the service, I see HttpEvent<Observable<State[]>>' is not assignable to type 'Observable<State[]> error on component subscribe method (shown below). When I run the project, the code fails to compile and throws the following error.

Error:

  Date: 2018-12-03T01:18:53.456Z
  ERROR in src/app/state/state.component.ts(28,17): error TS2322: Type 'HttpEvent<Observable<State[]>>' is not assignable to type 'Observable<State[]>'.
    Hash: 1d6c67e65c9ef90f7a15
    Time: 4054ms
    chunk {main} main.js, main.js.map (main) 1.88 kB [initial] [rendered]
    chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
    chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
      Type 'HttpProgressEvent' is not assignable to type 'Observable<State[]>'.
    chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
    chunk {vendor} vendor.js, vendor.js.map (vendor) 322 kB [initial] [rendered]
        Property '_isScalar' is missing in type 'HttpProgressEvent'.

    ℹ ｢wdm｣: Failed to compile.

I am running Angular 7.1.0 project on WebStorm IDE. Code uploaded to Github repository for the reference.

state.component.ts

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {State} from './model/state';
import {HttpHeaders} from '@angular/common/http';
import {StateService} from './services/state.service';

@Component( {
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
} )
export class StateComponent implements OnInit
{
  statesObservable: Observable<State[]>;

  constructor(private stateService: StateService) {}

  ngOnInit()
  {
    this.getStates();
  }

  getStates()
  {
    const url='http://localhost:8080/api/v2/state/list';
    const httpOptions={headers: new HttpHeaders( {'Content-Type': 'application/json'} )};
    this.stateService.getStates(url,httpOptions).subscribe(
      data => { this.statesObservable=data; },
      err => console.error( err ),
      () => console.log( 'States retrieved from backend' ) );
    return this.statesObservable;
  }
  statesDataAvailable(): boolean
  {
    return this.statesObservable!==undefined;
  }
}

state.service.ts

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

import {State} from '../model/state';

@Injectable({
  providedIn: 'root'
})
export class StateService
{
  constructor(private httpClient:HttpClient) { }

  getStates(url,httpOptions)
  {
    return this.httpClient.get<State[]>(url,httpOptions);
  }
}

Answer 1

I corrected the mistake in the service class, return statement should bethis.httpClient.get<State[]>(url,httpOptions); based Angular docs. At present, I am able to ignore the error in component class with ts-ignore statement and it works just fine. Updated classes are as follows

state.component.ts

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {State} from './model/state';
import {HttpEvent, HttpHeaders} from '@angular/common/http';
import {StateService} from './services/state.service';

@Component( {
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
} )
export class StateComponent implements OnInit
{
  statesObservable: Observable<State[]>;

  constructor(private stateService: StateService) {}

  ngOnInit()
  {
    this.getStates();
  }

  getStates()
  {
    const url='http://localhost:8080/api/v2/state/list';
    const httpOptions={headers: new HttpHeaders( {'Content-Type': 'application/json'} )};
    this.stateService.getStates(url,httpOptions).subscribe(
      data => {
        // @ts-ignore
        this.statesObservable=data;
        },
      err => console.error( err ),
      () => console.log( 'States retrieved from backend' ) );
    return this.statesObservable;
  }
  statesDataAvailable(): boolean
  {
    return this.statesObservable!==undefined;
  }
}

state.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

import {State} from '../model/state';

@Injectable({
  providedIn: 'root'
})
export class StateService
{
  constructor(private httpClient:HttpClient) { }

  getStates(url,httpOptions)
  {
    return this.httpClient.get<State[]>(url,httpOptions);
  }
}