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

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. — tylerlindell, Jun 28 '17 at 17:08
@AakashThakur Your return type is `Observable`. 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)` — Saddam Pojee, Dec 25 '18 at 13:37

Stevy · Answer 1 · 2020-08-13T19:41:46.683

49

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);
        })
     );
  }
}

edited Aug 13 '20 at 19:41

answered Jul 23 '18 at 08:18

Stevy

743
5
15

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. – Stevy Oct 25 '18 at 09:27
2

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. – Bancarel Valentin Feb 27 '19 at 09:32
I had a similar issue bringing in `interval` from the wrong place in `rxjs`. This was an extremely helpful answer, thanks! – Alexander Nied Oct 08 '19 at 14:47
In my case I only had `retrun` and not`return throwError(error)` .thanks for the answer. – Utkarsh Oct 21 '20 at 19:28
I cannot stress how much this answer was important! fixed an issue I am following for two days... Thanks! – rub Aug 21 '23 at 11:55

snorkpete · Answer 2 · 2017-04-21T18:32:53.727

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.

But I get this error now:`Error: Uncaught (in promise): [object ProgressEvent]` — Aakash Thakur, Apr 21 '17 at 18:15
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 — snorkpete, Apr 21 '17 at 18:35

Daniel Delgado · Answer 3 · 2019-04-30T22:54:50.403

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

Import:

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

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);
      })
)}

score 10 · Answer 4 · edited Aug 10 '17 at 13:58

10

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

edited Aug 10 '17 at 13:58

Alex Choroshin

6,177
2
28
36

answered Apr 21 '17 at 18:04

Aravind

40,391
16
91
110

I have to return an `Observable` because I have to make use of it in some other function. – Aakash Thakur Apr 21 '17 at 18:17
what is your getData() function returns? – Aravind Apr 21 '17 at 18:19
getData() returns `[object Object]{id: "1234", isAdmin: false, userName: "Lama", newid: Array[1]}` – Aakash Thakur Apr 21 '17 at 18:28
Sorry brother. I am not. – Aakash Thakur Apr 21 '17 at 18:33
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. – Aakash Thakur Apr 21 '17 at 18:39
ok. fine. can you update the flow of your code to post ? full flow ? – Aravind Apr 21 '17 at 18:43

Abdo Driowya · Answer 5 · 2020-03-06T10:33:43.470

6

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

edited Mar 06 '20 at 10:33

answered Mar 06 '20 at 10:21

Abdo Driowya

129
3
11

blid · Answer 6 · 2020-07-24T12:57:04.960

6

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';

edited Jul 24 '20 at 12:57

answered Jul 24 '20 at 08:27

blid

971
13
22

score 5 · Answer 7 · answered Apr 16 '19 at 07:16

5

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);
  })
)

answered Apr 16 '19 at 07:16

FindOutIslamNow

1,169
1
14
33

I didn't properly mock the observable returned in a `switchMap` in my unit tests with the same result. – Kevin Beal Oct 03 '19 at 21:41

score 4 · Answer 8 · edited Jun 20 '20 at 09:12

4

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 13 '19 at 23:00

Simon_Weaver

140,023
84
646
689

score 3 · Answer 9 · answered Apr 07 '20 at 07:19

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;
        })

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. — KoboldMines, Jun 28 '23 at 10:06

score 2 · Answer 10 · answered Jun 01 '18 at 12:36

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});
  }

score 1 · Answer 11 · answered Mar 28 '19 at 22:47

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 :(

score 0 · Answer 12 · answered Oct 11 '17 at 21:11

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

score 0 · Answer 13 · answered Apr 04 '19 at 06:22

0

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.

answered Apr 04 '19 at 06:22

Rakesh Pandey

37
3

score 0 · Answer 14 · answered Apr 23 '20 at 09:31

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

        }

score 0 · Answer 15 · answered May 13 '20 at 12:25

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.

score 0 · Answer 16 · answered Jun 04 '20 at 09:29

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.

score 0 · Answer 17 · answered Jul 31 '20 at 02:37

0

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.

answered Jul 31 '20 at 02:37

Chris Putnam

884
1
10
16

score 0 · Answer 18 · answered Sep 18 '20 at 07:02

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

score 0 · Answer 19 · answered Nov 30 '20 at 10:59

0

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

Verify all the functions within combine Epics are epic funcitons

answered Nov 30 '20 at 10:59

Rahul Shakya

1,269
15
15

score 0 · Answer 20 · answered Oct 25 '21 at 18:55

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.

score 0 · Answer 21 · answered Mar 19 '23 at 01:47

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],
  })

score -1 · Answer 22 · answered Feb 20 '20 at 14:54

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.

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

22 Answers22

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

Unit Testing

Linked

Related

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

22 Answers22

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

Unit Testing

Linked

Related

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