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

Question

I have been seriously stuck on getting this to work for two days now. I am building an async typeahead using ngx-bootstrap's typeahead. Starting with the HTML template, there is an input inside a reactive form for the typeahead and the selected object:

<input class="form-control"
    formControlName="prefix"
    typeaheadOptionField="name"
    [typeahead]="accounts"
    (typeaheadOnSelect)="onSelect($event)">

here is the component where I create an observable first which calls my http service accountTypeAhead() . the response for the http service then gets sent through a handler responseHandler() for some error handling stuff, it then returns the payload to the component.

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { ApiHandlerService } from 'app/services/api-handler/api-handler.service';
import { EmitIdService } from 'app/services/emit-id/emit-id.service';
import { UsersService } from '../../services/users.service';

import { TypeaheadMatch } from 'ngx-bootstrap/typeahead/typeahead-match.class';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    selector: 'app-firm-modal',
    templateUrl: './firm-modal.component.html'
})

export class FirmModalComponent implements OnInit {

    accounts: Observable<any>;
    selectedOption: any;

    constructor(
        private apiHandler: ApiHandlerService,
        private idService: EmitIdService,
        private fb: FormBuilder,
        private users: UsersService
    ) {}

    ngOnInit() {

        this.accounts = Observable.create((observer: any) => {
            observer.next(this.userForm.value.prefix);
        }).mergeMap((prefix) => this.getAccounts(prefix));

        this.userForm = this.fb.group({
            prefix: new FormControl(),
            accountsToAdd: new FormArray([]),
            accountsToDelete: new FormArray([]),
            email: new FormControl(),
            name: new FormControl(),
            rolesToAdd: new FormArray([]),
            rolesToDelete: new FormArray([]),
            userId: new FormControl(),
        });

    }

    getAccounts(prefix) {
        this.users.accountTypeAhead(prefix).subscribe(
            response => {
                this.apiHandler.responseHandler(response);
            },
            (err) => {
                this.apiHandler.errorHandler(err);
            }
        );
    }

}

the payload from the server is formated as such

[
    {
        'id': 12,
        'name': 'Rest test'
    },
    {
        'id': 13,
        'name': 'Rest test'
    }
]

so running this as it is now, I am getting this error in my console when i type the first letter in the input:

core.js:1448 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeToResult (subscribeToResult.js:74)
    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    at MergeMapSubscriber._tryNext (mergeMap.js:135)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Observable.eval [as _subscribe] (firm-modal.component.ts:135)
    at Observable._trySubscribe (Observable.js:172)
    at Observable.subscribe (Observable.js:160)
    at MergeMapOperator.call (mergeMap.js:92)
    at Observable.subscribe (Observable.js:157)
defaultErrorLogger  @   core.js:1448
ErrorHandler.handleError    @   core.js:1509
next    @   core.js:5497
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
(anonymous) @   core.js:4771
ZoneDelegate.invoke @   zone.js:388
Zone.run    @   zone.js:138
NgZone.runOutsideAngular    @   core.js:4697
onHandleError   @   core.js:4771
ZoneDelegate.handleError    @   zone.js:392
Zone.runTask    @   zone.js:191
ZoneTask.invokeTask @   zone.js:496
ZoneTask.invoke @   zone.js:485
timer   @   zone.js:2025
setInterval (async)     
scheduleTask    @   zone.js:2046
ZoneDelegate.scheduleTask   @   zone.js:407
onScheduleTask  @   zone.js:297
ZoneDelegate.scheduleTask   @   zone.js:401
Zone.scheduleTask   @   zone.js:232
Zone.scheduleMacroTask  @   zone.js:255
scheduleMacroTaskWithCurrentZone    @   zone.js:1092
(anonymous) @   zone.js:2061
proto.(anonymous function)  @   zone.js:1372
AsyncAction.requestAsyncId  @   AsyncAction.js:71
AsyncAction.schedule    @   AsyncAction.js:64
Scheduler.schedule  @   Scheduler.js:46
DebounceTimeSubscriber._next    @   debounceTime.js:92
Subscriber.next @   Subscriber.js:92
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
TypeaheadDirective.onInput  @   typeahead.directive.js:105
(anonymous) @   FirmModalComponent.html:66
handleEvent @   core.js:13547
callWithDebugContext    @   core.js:15056
debugHandleEvent    @   core.js:14643
dispatchEvent   @   core.js:9962
(anonymous) @   core.js:10587
(anonymous) @   platform-browser.js:2628
ZoneDelegate.invokeTask @   zone.js:421
onInvokeTask    @   core.js:4740
ZoneDelegate.invokeTask @   zone.js:420
Zone.runTask    @   zone.js:188
ZoneTask.invokeTask @   zone.js:496
invokeTask  @   zone.js:1517
globalZoneAwareCallback @   zone.js:1543

I am just starting to learn to use observables, so i have NO idea what to do here.

new stack trace:

core.js:1448 ERROR TypeError: Cannot read property 'slice' of undefined
    at TypeaheadDirective.prepareMatches (typeahead.directive.js:316)
    at TypeaheadDirective.finalizeAsyncCall (typeahead.directive.js:291)
    at SafeSubscriber.eval [as _next] (typeahead.directive.js:237)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187)
    at Subscriber._next (Subscriber.js:128)
    at Subscriber.next (Subscriber.js:92)
    at MergeMapSubscriber.notifyNext (mergeMap.js:151)
    at InnerSubscriber._next (InnerSubscriber.js:25)
    at InnerSubscriber.Subscriber.next (Subscriber.js:92)
defaultErrorLogger  @   core.js:1448
ErrorHandler.handleError    @   core.js:1509
next    @   core.js:5497
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
(anonymous) @   core.js:4771
ZoneDelegate.invoke @   zone.js:388
Zone.run    @   zone.js:138
NgZone.runOutsideAngular    @   core.js:4697
onHandleError   @   core.js:4771
ZoneDelegate.handleError    @   zone.js:392
Zone.runTask    @   zone.js:191
ZoneTask.invokeTask @   zone.js:496
ZoneTask.invoke @   zone.js:485
timer   @   zone.js:2025
setInterval (async)     
scheduleTask    @   zone.js:2046
ZoneDelegate.scheduleTask   @   zone.js:407
onScheduleTask  @   zone.js:297
ZoneDelegate.scheduleTask   @   zone.js:401
Zone.scheduleTask   @   zone.js:232
Zone.scheduleMacroTask  @   zone.js:255
scheduleMacroTaskWithCurrentZone    @   zone.js:1092
(anonymous) @   zone.js:2061
proto.(anonymous function)  @   zone.js:1372
AsyncAction.requestAsyncId  @   AsyncAction.js:71
AsyncAction.schedule    @   AsyncAction.js:64
Scheduler.schedule  @   Scheduler.js:46
DebounceTimeSubscriber._next    @   debounceTime.js:92
Subscriber.next @   Subscriber.js:92
schedulerFn @   core.js:4331
SafeSubscriber.__tryOrUnsub @   Subscriber.js:240
SafeSubscriber.next @   Subscriber.js:187
Subscriber._next    @   Subscriber.js:128
Subscriber.next @   Subscriber.js:92
Subject.next    @   Subject.js:56
EventEmitter.emit   @   core.js:4311
TypeaheadDirective.onInput  @   typeahead.directive.js:105
(anonymous) @   FirmModalComponent.html:66
handleEvent @   core.js:13547
callWithDebugContext    @   core.js:15056
debugHandleEvent    @   core.js:14643
dispatchEvent   @   core.js:9962
(anonymous) @   core.js:10587
(anonymous) @   platform-browser.js:2628
ZoneDelegate.invokeTask @   zone.js:421
onInvokeTask    @   core.js:4740
ZoneDelegate.invokeTask @   zone.js:420
Zone.runTask    @   zone.js:188
ZoneTask.invokeTask @   zone.js:496
invokeTask  @   zone.js:1517
globalZoneAwareCallback @   zone.js:1543

Answer 1

mergeMap takes higher order observable ( Observable of Observable ) and flatten into plain observable.

You are asking mergeMap((prefix) => this.getAccounts(prefix)) getAccounts to return observable of observables, but

getAccounts(prefix) {
    this.users.accountTypeAhead(prefix).subscribe(
        response => {
            this.apiHandler.responseHandler(response);
        },
        (err) => {
            this.apiHandler.errorHandler(err);
        }
    );
}

is just getAccounts(prefix): void - returns nothing and Observable can't take care of it for mergeMap. You should return correct observable to expect mergeMap behaves.