Question

我正在尝试从链接中实现ng-bootstrap Tabset-

https://ng-bootstrap.github.io/#/components/tabset/examples 我照原样复制了代码，甚至安装了-npm i rxjs@^6.0 rxjs-compat引用了此链接-"ERROR TypeError: Object(...) is not a function" using AngularFirestore and firebase

但是我遇到错误-

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at ng-bootstrap.js:146
    at Object../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js (ng-bootstrap.js:148)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/api-mining/ibm-api-connent-tnm/ibm-api-connect-tnm.module.ts (ibm-api-connect-tnm-routing.module.ts:30)
    at __webpack_require__ (bootstrap:81)
    at $_lazy_route_resource lazy namespace object:200
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:3820)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892

我的app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';
//self

import {HttpClientModule} from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { IbmApiConnentTnmRoutingModule } from './ibm-api-connect-tnm-routing.module';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule }   from '@angular/forms';
import { NgxLoadingModule } from 'ngx-loading';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { IbmApiConnentTnmComponent } from './ibm-api-connent-tnm.component';



@NgModule({
  imports: [
    // CommonModule,
    BrowserModule ,
    IbmApiConnentTnmRoutingModule,
    RouterModule,
    NgMultiSelectDropDownModule,
    FormsModule,
    HttpClientModule,
    NgxLoadingModule.forRoot({}),
    NgbModule,
  ],
  declarations: [IbmApiConnentTnmComponent],
  exports: [IbmApiConnentTnmComponent],
  bootstrap: [IbmApiConnentTnmComponent]
})

export class IbmApiConnentTnmModule { }

app.component.html

<ngb-tabset>
        <ngb-tab title="Simple">
          <ng-template ngbTabContent>
            <p>Raw denim you probably haven't heard of them jean shorts </p>
          </ng-template>
        </ngb-tab>
        <ngb-tab>
          <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
          <ng-template ngbTabContent>Food truck fixie locavore, accusamus </p>
          </ng-template>
        </ngb-tab>
        <ngb-tab title="Disabled" [disabled]="true">
          <ng-template ngbTabContent>
            <p>Sed commodo, leo at suscipit dictum, quam est porttitor </p>
          </ng-template>
        </ngb-tab>
      </ngb-tabset>

app.routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { IbmApiConnentTnmComponent } from './ibm-api-connent-tnm.component';


const routes: Routes = [

  {
    path: '',
    data: {
      title: 'IBM-Api-Connect-Test-n-Monitor'
    },
    children: [
      {
        path: 'ibmapi',
        component: IbmApiConnentTnmComponent,
        data: {
          title: 'IBM-Api-Connect-Test-n-Monitor'
        }
      }

]
  }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class IbmApiConnentTnmRoutingModule {}

Answer 1

我抛出了相同的错误，因此希望这对在相同情况下的其他人有所帮助：就我而言，这与我使用的角度版本不兼容。版本兼容性记录在https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap#installation

的“依赖项”部分中

当我按照文档运行npm install --save @ng-bootstrap/ng-bootstrap时，它安装了版本5.1.0（可以在您项目的angular.json文件中看到）。该版本与我正在运行的Angular版本6.1.0不兼容，并且导致了此错误。将ng-bootstrap降级到3.3.1版进行整理

TypeError：使用ngbModule时Object（...）不是函数

1 个答案: