Ngx-bootstrap: Typeahead - TypeError: Object(...) is not a function

[rochapablo]

Bug description or feature request:

I'm just trying to execute te example but when I set the focus, I got:

ERROR TypeError: Object(...) is not a function
    at MergeMapSubscriber.eval [as project] (typeahead.directive.js:237)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at DebounceTimeSubscriber.debouncedNext (debounceTime.js:101)
    at AsyncAction.dispatchNext (debounceTime.js:117)
    at AsyncAction._execute (AsyncAction.js:119)
    at AsyncAction.execute (AsyncAction.js:94)
    at AsyncScheduler.flush (AsyncScheduler.js:38)
    at ZoneDelegate.invokeTask (zone.js:421)

import { TypeaheadModule } from 'ngx-bootstrap';
...
imports: [
    BrowserModule,
    FormsModule,
    TypeaheadModule.forRoot()
  ],

    <pre class="card card-block card-header">Model: {{asyncSelected | json}}</pre>

    <input [(ngModel)]="asyncSelected"
           [typeahead]="dataSource"
           (typeaheadLoading)="changeTypeaheadLoading($event)"
           (typeaheadOnSelect)="typeaheadOnSelect($event)"
           [typeaheadOptionsLimit]="7"
           typeaheadOptionField="name"
           placeholder="Locations loaded with timeout"
           class="form-control">
    <div *ngIf="typeaheadLoading">Loading</div>

import { Component } from '@angular/core';

import { Observable } from 'rxjs';
import { of } from 'rxjs';
import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  asyncSelected: string;
  typeaheadLoading: boolean;
  typeaheadNoResults: boolean;
  dataSource: Observable<any>;
  statesComplex: any[] = [...];

  constructor() {
    this.dataSource = Observable.create((observer: any) => {
      // Runs on every search
      observer.next(this.asyncSelected);
    }).mergeMap((token: string) => this.getStatesAsObservable(token));
  }

  getStatesAsObservable(token: string): Observable<any> {
    let query = new RegExp(token, 'ig');

    return Observable.of(
      this.statesComplex.filter((state: any) => {
        return query.test(state.name);
      })
    );
  }

  changeTypeaheadLoading(e: boolean): void {
    this.typeaheadLoading = e;
  }

  typeaheadOnSelect(e: TypeaheadMatch): void {
    console.log('Selected value: ', e.value);
  }
}

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.0

Angular: 5.2.9 and/or 6.0.3

Bootstrap: 4.0.0

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

Angular CLI

[rochapablo]

Downgrading to "ngx-bootstrap": "^2.0.5" solve the exception.

I'll let this open so you guys can decide what to do.

[lydialim]

I am having the same issue as well regardless of the example that I tried. Downgrading to 2.0.5 did make it work.

[sarojmhrzn]

downgrading the version did not work for me :(

[TosinKristine]

Downgrading the version worked for me, Thanks.

[wlievens]

Any idea how to fix this structurally rather than just downgrading?

[webdevan]

+1 I'm having similar errors with Typeahead and Observables. I'll take a blind guess that this relates to the addition of NG/RxJS 6 support in version 3 release. It doesn't seem to be fully backward compatible with NG/RxJS 5.

[khsazz]

Same problem here, tried the basic example with hard-coded string array.
[edit] Downgrading worked

[EduardoRicSan]

I'm doing the Shine project from Rails, Angular, Postgres and Bootstrap 2nd Edition but when I installed angular (v6) I run "rails s" and "bin/webpack-dev-server" I got it an error (Object is not a function). So, someone can help me! Please respond me to give more details and code

[webdevan]

@EduardoRicSan you need to use compatible versions. Try Ng 6.x with rxjs 6.x and ngx-bootstrap 3.x... alternatively use Ng 5.x with rxjs 5.x and ngx-bootstrap 2.x.

[EduardoRicSan]

Thanks !! I Will try it!

El sáb., 18 de ago. de 2018 4:41 PM, webdevan [e-mail]
escribió:

@EduardoRicSan https://github.com/EduardoRicSan you need to use
compatible versions. Try Ng 6.x with rxjs 6.x and ngx-bootstrap 3.x...
alternatively use Ng 5 with rxjs 5 and ngx-bootstral 2.x

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ngx-bootstrap/issues/4385#issuecomment-414087918,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVRwPYYG4KsxX5m2eU8WHNV--0DrjJLOks5uSIn4gaJpZM4UN2lP
.