Angular 6 Error using RxJS: Cannot read property 'call' of undefined

Question

I'm trying to migrate an Angular 5 app to Angular 6 and I have this one block of RxJS code that has me stumped. I've Googled and read through the RxJS docs enough to know that I should be using .pipe, but I can't quite get the syntax.

The code returns results from an API call as the user types into a search input field. The new version currently throws the error:

ERROR TypeError: Cannot read property 'call' of undefined
    at merge.js:8
    at MapSubscriber.project (switchMap.js:9)

Original code:

this.searchResults =
 this.form.controls['search'].valueChanges
 .debounceTime(200)
 .switchMap(query => this.search.searchPeople(query))
 .merge(this.clearSearch.mapTo([]));

New version:

this.searchResults = this.form.controls['search'].valueChanges.pipe(
debounceTime(200),
switchMap(query => this.search.searchPeople(String(query)),
merge(this.clearSearch.pipe(mapTo([])))));

I've imported RxJS like this:

import { Observable } from 'rxjs';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { mapTo } from 'rxjs/operators';
import { merge } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';

It looks fine to me, are you sure this error comes from this part of your code? — martin
@martin you're correct, there wasn't anything wrong with the code. The format from the API call had changed slightly. — beachCode

beachCode beachCode · Accepted Answer · 2018-08-26T17:58:44

@martin was correct, there wasn't anything wrong with this code.

The problem was the format being returned from the API call had changed slightly. It was already formatted as an array, so I just had to remove the last line since the mapTo was no longer required:

// merge(this.clearSearch.pipe(mapTo([])))));

Angular 6 Error using RxJS: Cannot read property 'call' of undefined

1 Answers