Angular 2 UI Bootstrap 4 错误：模块“NgbDatepickerModule”导入的意外值“未定义”答案

【问题标题】：Angular 2 UI Bootstrap 4 Error: Unexpected value 'undefined' imported by the module 'NgbDatepickerModule'Angular 2 UI Bootstrap 4 错误：模块“NgbDatepickerModule”导入的意外值“未定义”
【发布时间】：2016-12-14 04:00:03
【问题描述】：

我正在尝试使用来自 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
    ])
}])

得到这个错误

package.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 中的某种错误

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

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

【问题讨论】：

你使用的是 SystemJS 还是 Webpack？
使用 Web Pack。
你在使用 angular-cli 吗？如果是这样，你的 angular-cli.json 脚本中有什么：[]
不，我正在使用 gulp 和 webpack，我已经添加了我的 package.json
你也可以添加你的 webpack.config.js

标签： angular angular-ui-bootstrap bootstrap-4 twitter-bootstrap-4 ng-bootstrap

【解决方案1】：

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

改变自

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

到

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

【讨论】：