Cannot use ng-bootstrap with Webpack and Angular2

Question

First I installed and imported the NgbModule:

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

At this point, everything works fine, I'm able to run my application the way it was before ng-bootstrap

As soon as I added the NgbModule to the imports array of my NgModule, as described here:

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

I'm unable to run npm start using webpack-dev-server, as it shouts :

This is my 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'
};

Any help and explanation would be appreciated!

Thanks in advance!

UPDATE:

Removing the usage of source-map-loader from the preLoaders removes the error, but resulting no Typescript source in browser.

Any idea what to do? and why does this happen?

Answer 1

It looks like webpack searches source-map-loader in your local computer files and not in your project. Therefore my guess would be that npm install source-map-loader --save-dev won't work.

When some module is asked from your local PC and not from your project, it's probably a module that's supposed to be installed globally.

Try: npm install source-map-loader -g