Ngx-bootstrap: Typeahead: Observable.create(...).mergeMap is not a function

[mrjohnr]

Hi,I'm using ngx-bootstrap 3.0.1 and I've upgraded my application from Angular 6.1.3 to 7.0.0 and got error mergeMap is not a function:

CfComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.create(...).mergeMap is not a function
code used looks like that:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/mergeMap';
import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
................
 this.dsTA = Observable.create((observer: any) => {
        observer.next(this.cl.TA);
      }).mergeMap((token: string) => this.getAsObservTA(token));

with angular 6.1.3 code worked

older :

"rxjs": "^6.2.2",
"rxjs-compat": "^6.1.0",

new:

"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap:
3.0.1
Angular: 7.0.0

Bootstrap:
4.1.3

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI: 7.0.2
Node: 10.12.0
OS: win32 x64
Angular: 7.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.9.0-rc.3
@angular-devkit/build-angular     0.9.0-rc.3
@angular-devkit/build-optimizer   0.9.0-rc.3
@angular-devkit/build-webpack     0.9.0-rc.3
@angular-devkit/core              7.0.0-rc.3
@angular-devkit/schematics        7.0.2
@angular/cdk                      6.4.7
@angular/cli                      7.0.2
@ngtools/webpack                  7.0.0-rc.3
@schematics/angular               7.0.2
@schematics/update                0.10.2
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.21.0

thanks

[mrjohnr]

seems solved if using .pipe

 this.dataSource = Observable.create((observer: any) => { observer.next(this.asyncSelected); })
 .pipe(
 mergeMap((token: string) => this.getStatesAsObservable(token)) );

[przemyslawjanpietrzak]

you have to use .pipe( on all of operators since rx6