TypeScript 3.1.6 Angular 7 Rxjs6 Using catchError shows error in editor but the code runs correctly

Question

I am trying to return a custom error from a data service in the event of and error.

public getRoles(): Observable<Array<Role> | CustomError> {

    return this.http.get(this.urlService.getRoles)
        .pipe(
            map((res: any) => {
                    let roles = new Array<Role>();
                    res.Result.forEach(item => {
                        roles.push(new Role().fromItem(item));
                    });

                    return roles;
                }
            ),
            catchError(err => {
                let customError = new CustomError();
                customError.errorNumber = err.status;
                customError.message = err.message;
                return throwError(customError);
            })
        );
}

The code above acutally runs as i expect it should, but the text editor indicates the following error:

(TS) Type 'Observable<{} | Role[]>' is not assignable to type 'ObservableRole[] | CustomError>'.

Type '{} | Role[]' is not assignable to type 'Role[] | CustomError'.

Type '{}' is not assignable to type 'Role[] | CustomError'.

Type '{}' is not assignable to type 'CustomError'.

Property 'errorNumber' is missing in type '{}'

Can anyone tell me what I need to do to resolve the problem?

It turns out that this is not the only place in the code where I am having an issue with catchError. I have a simple interceptor that will log http errors to the console. (I was experimenting on how to use interceptors).

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(`ErrorInterceptor - ${req.url}`);

    return next.handle(req)
        .pipe(catchError(err => {
            console.log(err);
            return throwError(err);
        }));
}

With this block of code I am getting a very similar set of messages. Am I using catchError and throwError correctly?

Answer 1

My be, you need to import the throwError class? :

import {Observable, throwError} from 'rxjs';