不能将 ng-bootstrap 与 Webpack 和 Angular2 一起使用

Question

首先我安装并导入了 NgbModule:

npm install --save @ng-bootstrap/ng-bootstrap
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'

此时，一切正常，我可以运行我的应用程序像 ng-bootstrap

之前一样

一旦我将 NgbModule 添加到我的 NgModule 的 imports 数组中，如下所述：

@NgModule({
    imports: [
        NgbModule, ....
    ],
    declarations: [AppComponent, ....],
    bootstrap: [AppComponent],
})

我无法运行 npm start 使用 webpack-dev-server，因为它喊道：

这是我的 webpack.config.js:

module.exports = {
  entry: "./app/boot",
  output: {
    path: __dirname,
    filename: "./dist/bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [
      { test: /\.ts/,   loader: ["ts-loader"], exclude: /node_modules/ },
     ],
     preLoaders: [
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
    ]
  },
  debug: true,
  devtool: 'source-map'
};

如有任何帮助和解释，我们将不胜感激！

提前致谢！

更新：

从 preLoaders 中删除 source-map-loader 的用法可消除错误，但会导致浏览器中没有 Typescript 源。

知道该怎么做吗？为什么会这样？

Answer 1

是否安装了 source-map-loader 模块，即它是否在您的 node_modules 文件夹中？如果不使用此命令安装它：

npm install source-map-loader --save-dev

Answer 2

看起来 webpack 在您的本地计算机文件中搜索 source-map-loader 而不是在您的项目中。因此我的猜测是 npm install source-map-loader --save-dev 不行。

当从您的本地 PC 而不是您的项目请求某个模块时，它可能是一个应该全局安装的模块。

尝试： npm install source-map-loader -g

不能将 ng-bootstrap 与 Webpack 和 Angular2 一起使用

Cannot use ng-bootstrap with Webpack and Angular2

javascript

webpack

ng-bootstrap

angular

更新：