1

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

https://ng-bootstrap.github.io/#/components/tabset/examples 我按原样复制了代码，甚至安装了-npm i rxjs@^6.0 rxjs-compat 引用此链接- “错误类型错误：对象（。 ..) 不是函数”使用 AngularFirestore 和 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 {}
4

1 回答 1

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 解决了它

于 2019-08-18T19:09:45.437 回答