Kesem David Kesem David - 3 months ago 54
Javascript Question

Cannot use ng-bootstrap with Webpack and Angular2

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 :

enter image description here

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

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

Comments