Kesem David Kesem David - 1 year ago 292
Javascript Question

Cannot use ng-bootstrap with Webpack and Angular2

First I installed and imported the


  • 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

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

imports: [
NgbModule, ....
declarations: [AppComponent, ....],
bootstrap: [AppComponent],

I'm unable to run
npm start
, as it shouts :

enter image description here

This is my

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!


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

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download