0

我正在尝试将 Angular 团队的ng-bootstrap与 Bootstrap 4.0.0-alpha.5 和 Angular 2 一起使用

我已经让 Bootstrap 4 工作正常，但现在我想创建一个手风琴，并发现最好使用为 Bootstrap 4 设计的 Angular 组件。

我正在使用@ng-bootstrap/ng-bootstrap@^1.0.0-alpha.14

在此处输入图像描述

我添加了NgbModule.forRoot()

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

@NgModule({
    imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    RouterModule.forRoot(routerConfig),
    NgbModule.forRoot(),
    AgGridModule.withComponents([
        // ParamCellComponent
    ])
}])

并得到这个错误

在此处输入图像描述

包.json

{
  "dependencies": {
    "@angular/common": "^2.2.4",
    "@angular/compiler": "^2.2.4",
    "@angular/core": "^2.2.4",
    "@angular/forms": "^2.2.4",
    "@angular/http": "^2.2.4",
    "@angular/platform-browser": "^2.2.4",
    "@angular/platform-browser-dynamic": "^2.2.4",
    "@angular/router": "^3.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14",
    "ag-grid": "^7.0.2",
    "ag-grid-ng2": "^7.0.1",
    "angularfire2": "^2.0.0-beta.5",
    "core-js": "^2.4.1",
    "firebase": "^3.6.2",
    "rxjs": "5.0.0-rc.4",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "del": "^2.0.2",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-filter": "^4.0.0",
    "gulp-util": "^3.0.7",
    "gulp-sass": "^2.1.1",
    "browser-sync": "^2.18.2",
    "browser-sync-spa": "^1.0.3",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "jasmine": "^2.4.1",
    "es6-shim": "^0.35.0",
    "karma-chrome-launcher": "^2.0.0",
    "babel-plugin-istanbul": "^3.0.0",
    "karma-webpack": "^1.7.0",
    "webpack": "2.1.0-beta.20",
    "html-webpack-plugin": "^2.24.1",
    "style-loader": "^0.13.0",
    "css-loader": "^0.26.0",
    "postcss-loader": "^1.1.1",
    "autoprefixer": "^6.5.3",
    "json-loader": "^0.5.4",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "html-loader": "^0.4.3",
    "ts-loader": "^1.2.2",
    "sass-loader": "^4.0.2",
    "node-sass": "^3.13.0",
    "eslint": "^3.11.1",
    "eslint-config-xo-space": "^0.15.0",
    "eslint-loader": "^1.6.1",
    "babel-loader": "^6.2.8",
    "babel-eslint": "^7.1.1",
    "eslint-plugin-babel": "^4.0.0",
    "tslint": "^4.0.2",
    "typescript": "^2.0.10",
    "typings": "^2.0.0",
    "tslint-loader": "^3.2.1",
    "codelyzer": "^2.0.0-beta.1"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-space/esnext"
    ]
  }
}

NgbDatepickerModule 中的某种错误

根据 JJ B 的评论，我决定只导入我需要的 NgbAccordionModule。

我只使用 NgbDatepickerModule 再次进行了测试，但此时它无法在 Angular Bootstrapping 中加载模块。

在此处输入图像描述

4

1 回答 1

0

决定只导入我需要的模块，而不是导入 NgbDatepickerModule 的 NgbModule，它目前有某种错误，阻止它在我的 WebPack Angular 2 实现中加载。

从改变

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
NgbModule.forRoot(),

至

import {NgbAccordionModule} from '@ng-bootstrap/ng-bootstrap';
NgbAccordionModule.forRoot(),
于 2016-12-13T20:00:03.033 回答