I dont get rxjs 6 with angular 6 with interval, switchMap, and map

Question

I want to update my rxjs code to 6 got I don't get it.

Before I had the below that wouth poll for new data every 5 seconds:

import { Observable, interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

var result = interval(5000).switchMap(() => this._authHttp.get(url)).map(res => res.json().results);

Now...of course, it's broken and the documentation leaves me nowhere to go.

How do I write the above to conform to rxjs 6?

Thanks

It's broken how? What you have worked only because you were importing directly from `rxjs` which is wrong and imports all "prototype" operators which is not what you want if you later import from `import { switchMap, map } from 'rxjs/operators';` — martin, May 06 '18 at 14:41

siva636 · Accepted Answer · 2018-07-06T09:21:29.493

38

The code should be something like the following. You need to use the pipe operator.

import { interval } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

const result = interval(5000).pipe(
switchMap(() => this._authHttp.get(url)),    
map(res => res.results)
)

edited Jul 06 '18 at 09:21

answered May 06 '18 at 14:40

siva636

16,109
23
97
135

Here is the error when usijng your suggestion: [ts] Property 'pipe' does not exist on type 'OperatorFunction<{}, {}>'. – Tampa May 06 '18 at 14:45
Make sure add pipe in the import list: import { Observable, interval, pipe } from 'rxjs'; – siva636 May 06 '18 at 14:46
I think this._authHttp.get(url).pipe rather than this._authHttp.get(url) ).pipe . this git rid of the error – Tampa May 06 '18 at 14:49
But now I get [ts] Property 'json' does not exist on type '{}'. for the res.json() – Tampa May 06 '18 at 14:50
The new HttpClient returns just the data, no response (unless you set observe: 'response' in the options). So you can just remove .json() – funkizer May 06 '18 at 16:36
probably you need'nt pipe(res=>res.json().result) – Eliseo May 06 '18 at 17:45

score 6 · Answer 2 · answered Aug 24 '18 at 06:50

After lot of research I could came up with the following updated approach from RxJs' 6 with Angular 6.

The search API is called after each interval of 5 sec and unsubscribed once the count > 5 :

let inter=interval(5000)

let model : ModelComponent;
model=new ModelComponent();
model.emailAddress="mdshahabaz.khan@gmail.com";


let count=1;
this.subscriber=inter.pipe(
          startWith(0),
          switchMap(()=>this.asyncService.makeRequest('search',model))
        ).subscribe(response => {
          console.log("polling")
          console.log(response.list)
          count+=1;
          if(count > 5){
            this.subscriber.unsubscribe();
          }
        });

API request :

   makeRequest(method, body) : Observable<any> {
    const url = this.baseurl + "/" + method;

    const headers = new Headers();
    this.token="Bearer"+" "+localStorage.getItem('token'); 
    headers.append('Authorization', this.token);
    headers.append('Content-Type','application/json');

    const options = new RequestOptions({headers: headers});
    return this.http.post(url, body, options).pipe(
        map((response : Response) => {
            var json = response.json();                

           return json; 
        })
    );
}

Dont forget to unsubscribe to avoid memory leak.

ngOnDestroy(): void {
if(this.subscriber){
  this.subscriber.unsubscribe();
}

}

I dont get rxjs 6 with angular 6 with interval, switchMap, and map

2 Answers2

Linked