ng-bootstrap typeahead TypeError:Object(...)不是函数

时间:2018-04-13 12:20:02

标签: angular typescript typeahead ng-bootstrap uncaught-typeerror

我想在angular5 app中使用angular bootstrap typeahead linkToTypeahead。 但我不断收到以下错误:

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)

还有:

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)

我从网站link复制了Simple Typeahead代码。

我的package.json文件:

{ "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" } } 到目前为止我尝试了什么:

  1. 用npm重新安装node_modules - 没有帮助
  2. 使用角度CLI启动了一个全新的项目并在那里试用了代码 - 没有帮助。
  3. 非常感谢任何帮助!

1 个答案:

答案 0 :(得分:8)

所以通过安装稳定版本的ng-bootstrap解决了我的问题:

所以package.json文件:

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

感谢JB Nizet和Niladri的快速解答

<小时/> 编辑:另外,正如@Niladri在评论中所说,你需要使用forRoot()来表示你想要使用的模块。这是Angular 5的official documentation of version 1.1,在这里可以说,但是更新版本的角度曲线的新文档并未说明,因为它已被更改。所以记住这一点!