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?

Bar Goldinfeld · Accepted Answer · 2016-09-03 17:09:39Z

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

answered Sep 3, 2016 at 17:09

Bar Goldinfeld

2211 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik Barke · Accepted Answer · 2016-09-03 10:44:09Z

0

Is the source-map-loader module installed, ie is it in your node_modules folder? If not install it with this command:

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

answered Sep 3, 2016 at 10:44

Erik Barke

4545 silver badges12 bronze badges

3 Comments

Kesem David Over a year ago

Hey Erik, thanks for the quick reply. yes the source-map-loader is installed and is present in my node_modules

Kesem David Over a year ago

The weird thing is that this error pops up only when i import that NgbModule, without the importing, everything works just fine, but then i cannot use the ng-bootstrap of course

Kesem David Over a year ago

@Cieja Yes I have, please note the accepted answer :)

Collectives™ on Stack Overflow

Cannot use ng-bootstrap with Webpack and Angular2

UPDATE:

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related