Ngrx/effects: get error TS2345: Argument of type 'Product[]' is not assignable to parameter of type 'Product'

Question

When compiling, I get the following error (although there are no errors in the browser console, and the application works correctly).

ERROR in src/app/services/product.service.ts(15,9): error TS2322: Type 'Observable<Product>' is not assignable to type 'Observable<Product[]>'.
  Type 'Product' is not assignable to type 'Product[]'.
src/app/store/effects/product.effect.ts(22,76): error TS2345: Argument of type 'Product[]' is not assignable to parameter of type 'Product'.
  Type 'Product[]' is missing the following properties from type 'Product': id, name, description
src/app/store/effects/product.effect.ts(23,44): error TS2554: Expected 0 arguments, but got 1.
src/app/store/reducers/index.ts(9,5): error TS2322: Type '(state: State, action: Action) => State | { loading: boolean; loaded: boolean; products: Product; }'
is not assignable to type 'ActionReducer<State, Action>'.
  Type 'State | { loading: boolean; loaded: boolean; products: Product; }' is not assignable to type 'State'.
    Type '{ loading: boolean; loaded: boolean; products: Product; }' is not assignable to type 'State'.
      Types of property 'products' are incompatible.
        Type 'Product' is missing the following properties from type 'Product[]': length, pop, push, concat, and 26 more.

product.model.ts

export interface Product {
    id: number;
    name: string;
    description: string;
}

product.effect

import { Effect, Actions, ofType } from '@ngrx/effects';
import { map, switchMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { Injectable } from '@angular/core';

import * as productActions from '../actions';
import * as fromServices from '../../services';

@Injectable()
export class ProductEffects {
    constructor(
        private actions$: Actions,
        private productService: fromServices.ProductService
    ) {}

    @Effect()
    loadProducts$ = this.actions$.pipe(ofType(productActions.LOAD_PRODUCTS),
        switchMap(() => {
            return this.productService
                .getProducts()
                .pipe(
                    map(products => new productActions.LoadProductsSuccess(products)),
                    catchError(error => of(new productActions.LoadProductsFail(error)))
                );
        })
    );
}

Screenshot of state

screen

Answer 1

You defined getProducts() to return an observable of type Product[] but instead you are trying to return an observable of type Product . Change getProducts() to return an observable of type any

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

import { Observable } from 'rxjs/Observable';
import { catchError } from 'rxjs/operators';
import 'rxjs/add/observable/throw';

import { Product } from '../models';

@Injectable({providedIn: 'root'})
export class ProductService {
    constructor(private http: HttpClient) {}

    getProducts(): Observable<any> {
        return this.http
            .get(`/assets/products.json`)
            .pipe(catchError((error: any) => Observable.throw(error.json())));
    }

}