CODEWITHSUNDEEP
angulartypescriptrxjs
Ehsan Nissar
Ehsan Nissar

Reputation: 683

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable in Angular Services

I have written multiple services to hit different APIs. The services written for post are working somehow but giving this error

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. at subscribeTo (subscribeTo.js:27)

As for the services written for the GET method the same error is shown but i get no data in return. Here is my service

GetClientData(): Observable<ClientDto> {
    let url_ = this.baseUrl + "https://xxxxxxxxxxxxxxxx/getClients";
    url_ = url_.replace(/[?&]$/, "");

    let options_ : any = {
        observe: "response",
        responseType: "blob",
        headers: new HttpHeaders({
            "Accept": "application/json"
        })
    };

    return this.http.request("get", url_, options_).pipe(_observableMergeMap((response_ : any) => {
        return this.processGetAllPermissions(response_);
    })).pipe(_observableCatch((response_: any) => {
        if (response_ instanceof HttpResponseBase) {
            try {
                return this.processGetAllPermissions(<any>response_);
            } catch (e) {
                return <Observable<ClientDto>><any>_observableThrow(e);
            }
        } else
            return <Observable<ClientDto>><any>_observableThrow(response_);
    }));
}

protected processGetAllPermissions(response: HttpResponseBase): Observable<ClientDto> {
    const status = response.status;
    const responseBlob = 
        response instanceof HttpResponse ? response.body : 
        (<any>response).error instanceof Blob ? (<any>response).error : undefined;

    let _headers: any = {}; if (response.headers) { for (let key of response.headers.keys()) { _headers[key] = response.headers.get(key); }};
    if (status === 200) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = resultData200 ? ClientDto.fromJS(resultData200) : new ClientDto();
        return _observableOf(result200);
        }));
    } else if (status !== 200 && status !== 204) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
        }));
    }
    return _observableOf<ClientDto>(<any>null);
}

Cloud Function

exports.getClients = functions.https.onRequest((req, res) => {

    res.set('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.set('Access-Control-Allow-Methods', 'GET', 'POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type');

    if (req.method === 'OPTIONS') {
        res.end();
    }

    else
    {

        let allClients = [];
        usersClients.get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    allClients.push(doc.data());
                });
                res.send(200, {
                    "data": allClients
                })
            })
            .catch(err => {
                console.log("Error getting data", err);
            });
    }
});

Upvotes: 7

Views: 24711

Answers (2)

Florin D
Florin D

Reputation: 1840

I had same error in my Angular project. It was caused by an interceptor that was handling errors from API calls, and was not returning anything. My catchError function in the API call was returning this error. The fix was to add this in the interceptor's error handler

return throwError(...)

Upvotes: 2

Will Alexander
Will Alexander

Reputation: 3571

Something along these lines:

return this.http.get(url_, options_).pipe(
  map(data => {
    // Transform data here
  }),
  catchError(err => {
    // Handle errors here
  })
);

Upvotes: 6

Related Questions