Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-bootstrap typeahead TypeError: Object(...) is not a function

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!

like image 651
somaba Avatar asked Apr 13 '18 12:04

somaba


1 Answers

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!
like image 118
somaba Avatar answered Nov 15 '22 08:11

somaba