Typeahead: ERROR TypeError: func is not a function

I’m trying to implement typeahead into my own component based on “Simple Typeahead” demo.

I’m getting:

MyComponent.html:64 ERROR TypeError: func is not a function
at Observable.letProto (let.js:9)
at NgbTypeahead.ngOnInit (typeahead.js:72)
at checkAndUpdateDirectiveInline (core.js:12365)
at checkAndUpdateNodeInline (core.js:13889)
at checkAndUpdateNode (core.js:13832)
at debugCheckAndUpdateNode (core.js:14725)
at debugCheckDirectivesFn (core.js:14666)
at Object.eval [as updateDirectives] (ApplicationComponent.html:71)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14651)
at checkAndUpdateView (core.js:13798)

where MyComponent is my component.

I’ve tried both:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

  search = (text$: Observable<string>) =>
    text$
      .debounceTime(200)
      .distinctUntilChanged()
      .map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));

and:

import {Observable} from 'rxjs/Observable';
import { debounceTime } from 'rxjs/operators/debounceTime';
import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
import { map } from 'rxjs/operators/map';
search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => term.length < 2 ? []
        : states.filter(v => v.toLowerCase().startsWith(term.toLocaleLowerCase())).splice(0, 10)
      )
    );
}

but it did not helped.

I’m using “rxjs”: “^5.5.6”,

Maybe it is related to angular’s webpack configuration. In order to reproduce, just generate new app using ng new CLI and

1 possible answer(s) on “Typeahead: ERROR TypeError: func is not a function

  1. Oh, the problem was typo in the [ngbTypeahead] assignment:

            <input  type="text" class="form-control"  [ngbTypeahead]="Search" />
    

    For some reason, it was not reported by angular language service. Anyway, I think it would be extremly helpful if the error message was more descriptive