TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

Question

I am trying to map from a service call but getting an error. Looked at subscribe is not defined in angular 2? and it said that in order to subscribe we need to return from inside the operators. I have return statements as well.

Here's my code:

checkLogin(): Observable<boolean> {
  return this.service
    .getData()
    .map(
      (response) => {
        this.data = response;
        this.checkservice = true;
        return true;
      },
      (error) => {
        // debugger;
        this.router.navigate(["newpage"]);
        console.log(error);
        return false;
      }
    )
    .catch((e) => {
      return e;
    });
}

Error log:

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

Bipetalous

I received a similar issue: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. but it happened while my server was running and I switched between branches. All I needed to do was restart my server and it went away. – Trichinosis

@AakashThakur Your return type is Observable<boolean>. So, all of your return statements should return an Observable of boolean. Wrap return statement with of(). Example 1: return of(false) Example 2: return of(e) – Gipps

Answer 1

In my case the error occurred only during e2e tests. It was caused by throwError in my AuthenticationInterceptor.

I imported it from a wrong source because I used WebStorm's import feature. I am using RxJS 6.2.

Wrong:

import { throwError } from 'rxjs/internal/observable/throwError';

Correct:

import { throwError } from 'rxjs';

Here the full code of the interceptor:

import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class AuthenticationInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const reqWithCredentials = req.clone({withCredentials: true});
    return next.handle(reqWithCredentials)
     .pipe(
        catchError(error => {
          if (error.status === 401 || error.status === 403) {
            // handle error
          }
          return throwError(error);
        })
     );
  }
}

Cooking

You might have two versions in your project at the same time if you are in the middle of transitioning to RxJS 6 using the rxjs-compat library. – Cooking

I had a similar case, my interceptor was only doing the next.handle(request) call in a if. So intercepting a request and not calling handle afteward will result in this message. – Rascon

I had a similar issue bringing in interval from the wrong place in rxjs. This was an extremely helpful answer, thanks! – Kutz

In my case I only had retrun and notreturn throwError(error) .thanks for the answer. – Lawford

I cannot stress how much this answer was important! fixed an issue I am following for two days... Thanks! – Paulson

I was definitely sending null headers in and INTERCEPTOR. That it was in the interceptor is what really helped here. – Vaginismus

Answer 2

In your example code, you have your map operator receiving two callbacks, when it should only be receiving one. You can move your error handling code to your catch callback.

checkLogin():Observable<boolean>{
    return this.service.getData()
                       .map(response => {  
                          this.data = response;                            
                          this.checkservice=true;
                          return true;
                       })
                       .catch(error => {
                          this.router.navigate(['newpage']);
                          console.log(error);
                          return Observable.throw(error);
                       })
   }

You'll need to also import the catch and throw operators.

import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

EDIT: Note that by returning Observable.throwin your catch handler, you won't actually capture the error - it will still surface to the console.

Dollhouse

But I get this error now:Error: Uncaught (in promise): [object ProgressEvent] – Bipetalous

you can try changing the Observable.throw line to Observable.of (and include the import). That will cause your observable to emit the error, but it won't treat it like a failure. (basically we're kinda/but-not-quite swallowing the error). See if that removes the error from the console. If it does, then it points to the getData() method failing – Dollhouse

Answer 3

If your function is expecting to return a boolean, just do this:

1. Import:

import { of, Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

2. Then

checkLogin(): Observable<boolean> {
  return this.service.getData()
    .pipe(
      map(response => {
        this.data = response;
        this.checkservice = true;
        return true;
      }),
      catchError(error => {
        this.router.navigate(['newpage']);
        console.log(error);
        return of(false);
      })
)}

Jugoslavia

Answer 4

You are returning an Observable where as your code returns just a boolean. So you need to use as below

.map(response => <boolean>response.json())

If you are using another common service checkservice in your case, you can simply use

this.service.getData().subscribe(data=>console.log(data));

This will make your checkLogin() function with return type as void

 checkLogin():void{
      this.service.getData()
            .map(response => {  
                           this.data = response;                            
                           this.checkservice=true;
             }).subscribe(data=>{ });

and you can use of this.checkService to check your condition

Aiello

I have to return an Observable<boolean> because I have to make use of it in some other function. – Bipetalous

what is your getData() function returns? – Aiello

getData() returns [object Object]{id: "1234", isAdmin: false, userName: "Lama", newid: Array[1]} – Bipetalous

Sorry brother. I am not. – Bipetalous

I wont be able to reproduce or show you my screen because its not a home project, its something that is confidential and this is just a part where I had problem. – Bipetalous

ok. fine. can you update the flow of your code to post ? full flow ? – Aiello

Answer 5

I've had this error when there's been different RxJS-versions across projects. The internal checks in RxJS fails because there are several different Symbol_observable. Eventually this function throws once called from a flattening operator like switchMap.

Try importing symbol-observable in some entry point.

// main index.ts
import 'symbol-observable';

Turkish

Answer 6

I was forgetting to return the other observable in pipe(switchMap(

this.dataService.getPerson(personId).pipe(
  switchMap(person => {
     //this.dataService.getCompany(person.companyId); // return missing
     return this.dataService.getCompany(person.companyId);
  })
)

Volute

I didn't properly mock the observable returned in a switchMap in my unit tests with the same result. – Weird

Answer 7

I had the same issue caused by importing the internal version of 'takeUntil' instead of the operators Change

import { takeUntil } from 'rxjs/internal/operators/takeUntil';

to

import { takeUntil } from 'rxjs/operators';

This happen also for other operators

Likewise

Answer 8

Can be triggered by a stray comma (,) in an RxJS pipe(...)

The compile won't catch this extra comma at the end:

pipe(first(), map(result => ({ event: 'completed', result: result}),);

It becomes an 'invisible' undefined operator which screws the whole pipe up, and leads to a very confusing error message - which in this case has nothing to do with my actual logic.

Katt

Answer 9

A hint for anyone experiencing this. This can happen when a switchMap doesn't receive an observable return value (like null). Simply add a default case, so it always returns an observable.

        switchMap((dateRange) => {
          if (dateRange === 'Last 24 hours') {
            return $observable1;
          }
          if (dateRange === 'Last 7 Days') {
            return $observable2;
          }
          if (dateRange === 'Last 30 Days') {
            return $observable3;
          }
          // This line will work for default cases
          return $observableElse;
        })

Sclerous

This was my case, I was testing a function, but I didn't need the return value of an observable that was returned from switchMap, so I didn't mock it, I had to :D It helped me, thanks. – Fontana

Answer 10

I have been facing this issue when trying to authenticate a user using JSON Web Token. in my case it's related to authentication interceptor.

Sending a request to authenticate a user doesn't have to provide a token since it doesn't exist yet.

Check that your interceptor include this:

if (req.headers.get('No-Auth') == "True")
            return next.handle(req.clone());

And that you provide {'No-Auth':'True'} to your header's request like this:

  authenticateUser(user): Observable<any> {
    const headers = new HttpHeaders({'No-Auth':'True'});
    headers.append('Content-Type', 'application/json');
    return this.httpClient.post(`${this.apiEndpoint}/auth/authenticate`, user, {headers: headers});
  }

Tagliatelle

Answer 11

I wrote this because I arrive here searching for the same error, and this could be useful for someone in the future.

I get the same error while trying to initialize a service variable from its constructor making a call to a remote API trough http.get and .subscribe()

After many tests without understanding what the problem was, i finally get it: My application had authentication and an HttpInterceptor, and i was trying to initialize the service calling a public API method using http.get(...) without 'No-Auth' headers. I added them like here, and problem solved for me:

getData() {
var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });    
return this.http.get(environment.urlApi.Literales, { headers: reqHeader });  
}

What a headache :(

Cento

Answer 12

I had a similar error using RXJS in NESTJS.

Error: TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. +1ms

In my case I forgot to return an Observable in a switchMap. This caused that no Observable was received in the next RXJS operator or client code.

Once I returned an Observable in the switchMap, the error disappeared.

Efface

Answer 13

I have the same exact error message while I was doing my unit test and throwing observable exception after mocking my services.

I resolved it by passing exact function and format inside Observable.throw.

Actual code which calls the service and subscribe to get data. notice that catch to handle the 400 error.

     this.search(event).catch((e: Response) => {
        if (e.status === 400) {
          console.log(e.json().message);
        } else if (e.url) {
          console.log('HTTP Error: ' + e.status + ' ' + e.statusText,
            'URL: ' + e.url, 'Info: ' + e.json().message));
        }
      }).finally(() => {
        this.loading = false;
      }).subscribe((bData) => {
        this.data = bData;
      });

The code inside the service

  search() {
    return this.someService.getData(request)
       .do((r) => {
          this.someService.defaultHeaders.delete('skipAlert');
          return r;
        })
      .map((r) => {
          return r.businessObjectDataElements.length && r.businessObjectDataElements || null;
        });
  }

Unit Testing

I have mocked the SomeService and returning observable data and its fine as it have all the required methods inside it.

 someServiceApi = fixture.debugElement.injector.get(SomeService);
 spyOn(someServiceApi, 'getData').and.returnValue(Observable.of({}));

The above code is okey but when when I was trying to test the catch/error condition by passing Observable.throw({}) it was showing me the error as it was expecting Response type return from the service.

So below service mocking return was giving me that error.

someServiceApi.getData
  .and.returnValue(Observable.throw(new Response({status: 400, body: [], message: 'not found error'})));

So I Corrected it by replicating the exact expected function in my return object rather passing a Response type value.

someServiceApi.getData
  .and.returnValue(Observable.throw({status: 400, json: () => { return {message: 'not found error'}}, body: []}));
// see `json: () => { return {message: 'not found error'}}` inside return value

Salcedo

Answer 14

In my case in Angular-5, service file was not imported from which i was accessing the method and subscribing the data.After importing service file it worked fine.

Banausic

Answer 15

this error happened with me when i am using interceptor you have to do this in your interceptor

return next.handle(request).map(event => {
        if (event instanceof HttpResponse) {

        }
        return event;
    },
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401 || error.status === 400) {
          // some logic

        }

Inellineloquent

Answer 16

This error happened to me @angular 7

You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

The error is actually self-explanatory, it says somewhere in the observable I pass the invalid object. In my case, there was lots of API call but all the calls were failing because of wrong server configuration. I tried to use map, switchMap, or other rxjs operator but the operators are getting undefined objects.

So double-check your rxjs operator inputs.

Heerlen

Answer 17

I was also facing the same issue when i was calling a method inside switchMap, apparently I found that if we use method inside switchMap it must return observable.

i used pipe to return observable and map to perform operations inside pipe for an api call which i was doing inside method rather than subscribing to it.

Labannah

Answer 18

I'm not sure if this will help anyone, but in my case further up my chain I was using distinctUntilChanged and an exception inside a function there was manifesting with this error message.

Essene

Answer 19

You will get the following error message too when you provide undefined or so to an operator which expects an Observable, eg. takeUntil.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable 

Romberg

Answer 20

In my case I mistakely imported Action into my combineEpics, rather than Epic...

Verify all the functions within combine Epics are epic funcitons

Cornie

Answer 21

I got the same Error with a different Problem, so im answering my solution here so when people are searching for the same thing might see this.

I followed the Supabase + Ionic Auth Tutorial and wanted to add Email-Validation (with Angular Reactive Forms). I defined my Validation-Group like this:

  credentials = this.fb.nonNullable.group({
                  email: ['', Validators.required, Validators.email],
                  password: ['', Validators.required],
  })

And when i added the Validators.email i suddenly got the error, i never really looked at the Validators-lib, but when i did i saw that you need to pass the second Validations as an Array. So simply changing ['', Validators.required, Validators.email] to ['', [Validators.required, Validators.email]] fixed the problem!

Working Solution:

  credentials = this.fb.nonNullable.group({
                  email: ['', [Validators.required, Validators.email]],
                  password: ['', Validators.required],
  })

Fabi

Answer 22

In regard to the "You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable" error.

This could happen if you import { Observable } from 'rxjs' after (below) some module/function/whatever, which actually uses it.

Solution: move this import above the import of that module.

Judicial