7

I would like to use the angular bootstrap typeahead linkToTypeahead in an angular5 app. But I keep getting the following error(s):

ERROR TypeError: Object(...) is not a function at new NgbTypeahead (typeahead.js:52) at createClass (core.js:12449) at createDirectiveInstance (core.js:12284) at createViewNodes (core.js:13742) at callViewAction (core.js:14176) at execComponentViewsAction (core.js:14085) at createViewNodes (core.js:13770) at callViewAction (core.js:14176) at execComponentViewsAction (core.js:14085) at createViewNodes (core.js:13770) 

and also:

ERROR TypeError: Cannot read property 'instance' of undefined at nodeValue (core.js:11753) at Object.eval [as handleEvent] (NgbdTypeaheadBasic.html:9) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLDocument.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) 

I copied the Simple Typeahead code from the website link.

My package.json file:

{ "name": "test-type-ahead", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0", "bootstrap": "^4.1.0", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "~1.7.3", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } } What I have tried so far:

  1. reinstalled node_modules with npm -- does not help
  2. Started a brand new project with the angular CLI and tried out the code there -- does not help.

Any help is greatly appreciated!

2
  • 1
    2.0.0-alpha.0 is an undocumented alpha version which AFAIK, is a preliminary version to be used with Angular 6. Use the latest stable version of ng-bootstrap: 1.1.1. Commented Apr 13, 2018 at 12:23
  • 2
    use ng-bootstrap :1.1 v and don't forget to use .forRoot() in app.module while importing the main module for ng-bootstrap Commented Apr 13, 2018 at 12:28

1 Answer 1

10

So my Problem was solved by installing a stable version of ng-bootstrap:

so package.json file :

`dependencies .... "@ng-bootstrap/ng-bootstrap": "^1.1.1", .... dependencies` 

Thanks for the quick answers to JB Nizet and Niladri


EDIT: Also, as @Niladri said in the comments, you need to use forRoot() for the modules you want to use. This is the official documentation of version 1.1 which is for Angular 5 and it is said here, but the new documentation for newer versions of angular doesn't say that, as it was changed. So keep that in mind!

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.