ng-bootstrap typeahead TypeError: Object(...) is not a function
ng-bootstrap typeahead TypeError: Object(...) is not a function
我想在 angular5 应用程序中使用 angular bootstrap 预输入 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"
}
}
到目前为止我尝试了什么:
- 使用 npm 重新安装 node_modules -- 没有帮助
- 使用 angular CLI 启动了一个全新的项目并尝试了那里的代码 -- 没有帮助。
非常感谢任何帮助!
所以我的问题通过安装稳定版本的 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 并且在此处提到,但是新版本的 angular 的新文档没有这么说,因为它已更改。所以记住这一点!
我想在 angular5 应用程序中使用 angular bootstrap 预输入 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"
}
}
到目前为止我尝试了什么:
- 使用 npm 重新安装 node_modules -- 没有帮助
- 使用 angular CLI 启动了一个全新的项目并尝试了那里的代码 -- 没有帮助。
非常感谢任何帮助!
所以我的问题通过安装稳定版本的 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 并且在此处提到,但是新版本的 angular 的新文档没有这么说,因为它已更改。所以记住这一点!