Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] typescript typescript

Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740]


You are returning Observable<Product> and expecting it to be Product[] inside subscribe callback.

The Type returned from http.get() and getProducts() should be Observable<Product[]>

public getProducts(): Observable<Product[]> {    return this.http.get<Product[]>(`api/products/v1/`);}


You have forgotten to mark the getProducts return type as an array. In your getProducts it says that it will return a single product. So change it to this:

public getProducts(): Observable<Product[]> {    return this.http.get<Product[]>(`api/products/v1/`);  }


For those newbies like me, don't assign variable to service response, meaning do

export class ShopComponent implements OnInit {  public productsArray: Product[];  ngOnInit() {      this.productService.getProducts().subscribe(res => {        this.productsArray = res;      });  }}

Instead of

export class ShopComponent implements OnInit {    public productsArray: Product[];    ngOnInit() {        this.productsArray = this.productService.getProducts().subscribe();    }}