Agular 11 error TS2322: Type 'Observable<>

user_14412770 0
Viewed 162

I am new to the Angular world I am facing this error and I do not understand how to fix it

[0] Error: src/app/components/sites-escalade/sites-escalade.component.ts:23:5 - error TS2322: Type 'Observable<AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }>' is not
 assignable to type 'Observable<AppDataState<SiteEscalade[]>>'.
[0]   Type 'AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }' is not assignable to type 'AppDataState<SiteEscalade[]>'.
[0]     Type '{ dataState: DataStateEnum; }' has no properties in common with type 'AppDataState<SiteEscalade[]>'.

here is my code "enum and interface":

enter image description here

and here is my ts class :

import { Component, OnInit } from '@angular/core';
import {SitesEscaladeService} from '../../services/sites-escalade.service';
import {SiteEscalade} from '../../model/site-escalade.model';
import {Observable, of} from 'rxjs';
import {catchError, map, startWith} from 'rxjs/operators';
import {AppDataState, DataStateEnum} from '../../state/site-escalade.state';

@Component({
  selector: 'app-sites-escalade',
  templateUrl: './sites-escalade.component.html',
  styleUrls: ['./sites-escalade.component.css']
})
export class SitesEscaladeComponent implements OnInit {

  sitesEscalade$:Observable<AppDataState<SiteEscalade[]>> |null=null;

  constructor(private sitesEscaladeService:SitesEscaladeService) { }

  ngOnInit(): void {
  }

  onGetAllSitesEscalade() {
    this.sitesEscalade$=
      this.sitesEscaladeService.getAllSitesEscalade().
      pipe(
        map((data)=>({dataState:DataStateEnum.LOADED, data:data})),
      startWith({dataState:DataStateEnum.LOADING}),
      catchError(err=>of({dataState:DataStateEnum.ERROR, errorMessage:err.message}))
    );
  }

}

thanx for your help

angular
2 Answers

Look at the error message closely:

Type 'Observable<AppDataState<SiteEscalade[]> | { dataState: DataStateEnum; } | { dataState: DataStateEnum; errorMessage: any; }>' is not
 assignable to type 'Observable<AppDataState<SiteEscalade[]>>'

So your onGetAllSitesEscalade() method is trying to assign something to this.sitesEscalade$ (Observable<AppDataState<SiteEscalade[]>>) which is not just an observable of the type AppDataState<SiteEscalade[]>.

map((data)=>({dataState:DataStateEnum.LOADED, data:data}))

will return an untyped object, not an AppDataState. Same for

catchError(err=>of({dataState:DataStateEnum.ERROR, errorMessage:err.message}))

The ugly fix is to cast everything to as AppDataState<SiteEscalade[]>.

https://stackblitz.com/edit/angular-ivy-islg9b

A nicer approach would be to define a class implementing AppDataState (or why not define AppDataState as class instead of interface?)

user_8633110

I have forgot to post this. It's look like this https://stackblitz.com/edit/angular-ivy-islg9b?file=src%2Fapp%2Fsites-escalade.service.ts

but it's not issue for my error.

maybe I missed your explanation

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {Observable} from 'rxjs';
import {SiteEscalade} from '../model/site-escalade.model';


@Injectable({providedIn:"root"})
export class SitesEscaladeService{

constructor(private http:HttpClient) {
}

 getAllSitesEscalade():Observable<SiteEscalade[]>{
  let host=environment.host;
  return this.http.get<SiteEscalade[]>(host+"/sites-escalade");
}
  getOfficielSitesEscalade():Observable<SiteEscalade[]>{
    let host=environment.host;
    return this.http.get<SiteEscalade[]>(host+"/sites-escalade?officiel=true");
  }

}
user_144127700
Related