时间戳

首页 > 解决方案 > 如何修复错误“未捕获的类型错误：对象（...）不是函数”

bootstrap-4 - 如何修复错误“未捕获的类型错误：对象（...）不是函数”

问题描述

当我将 NgbModule 导入 app.module.ts 时，出现以下错误：

    at ng-bootstrap.js:146
    at Module../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js (ng-bootstrap.js:148)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:8)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)

我没有在我的代码的任何地方使用它，我只包含在我的 package.json 中并将它导入到 app.module.ts 中。

我在其他帖子上看到，当他们有类似的错误时，这是​​因为他们使用了带有 angular 和 bootstrap 的不正确版本的 ngbootstrap，所以我更改了版本但没有更改。我还在我的导入中尝试了 NgbModule.forRoot() 但它没有帮助。

这是我的 package.json 的一部分：

  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "bootstrap": "^4.0.0",    
    "@ng-bootstrap/ng-bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }

这是我的 app.module.ts：

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppNavbarComponent } from './app-navbar/app-navbar.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule, 
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果我能让它工作，我正在尝试实现 NgBoostrap 下拉组件，感谢您的帮助！

标签： bootstrap-4angular7ng-bootstrap

解决方案

我解决了这个问题，正如我之前所说，我在我的 package.json 中更改了当前版本的 bootstrap 和 ng-bootstrap ，但这不起作用。所以我卸载了 ng-bootstrap

npm uninstall @ng-bootstrap/ng-bootstrap --save

并安装了第 4 版：

npm install --save @ng-bootstrap/ng-bootstrap@4

重新加载页面，一切正常！

推荐阅读