0

I am using Webpack module bundler in my angular 2 project. I need to integrate BootStrap with my application using webpack. I have installed Bootstrap using npm. Here's the snapshot of my package.json

"devDependencies": {
    "@angular/compiler-cli": "2.4.6",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.2.34",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.2.34",
    "@types/node": "^7.0.0",
    "@types/selenium-webdriver": "~2.53.39",
    "@types/source-map": "^0.5.0",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^2.0.0",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular2-template-loader": "^0.6.0",
    "assets-webpack-plugin": "^3.5.1",
    "awesome-typescript-loader": "~3.0.0-beta.18",
    "codelyzer": "~2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.26.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^2.0.0-beta",
    "file-loader": "^0.10.0",
    "find-root": "^1.0.0",
    "gh-pages": "^0.12.0",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.0",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "^2.5.2",
    "json-loader": "^0.5.4",
    "karma": "^1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.2.2",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "2.0.1",
    "ng-router-loader": "^2.1.0",
    "ngc-webpack": "1.1.0",
    "node-sass": "^4.5.0",
    "npm-run-all": "^4.0.1",
    "optimize-js-plugin": "0.0.4",
    "parse5": "^3.0.1",
    "protractor": "^4.0.14",
    "raw-loader": "0.5.1",
    "rimraf": "~2.6.0",
    "sass-loader": "^6.0.0",
    "script-ext-html-webpack-plugin": "^1.6.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "1.0.5",
    "style-loader": "^0.13.2",
    "to-string-loader": "^1.1.4",
    "ts-node": "^2.0.0",
    "tslib": "^1.5.0",
    "tslint": "~4.5.1",
    "tslint-loader": "^3.3.0",
    "typedoc": "^0.5.3",
    "typescript": "~2.1.6",
    "url-loader": "^0.5.7",
    "webpack": "2.2.0",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "2.4.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "~3.0.0"
  }

Here's my webpack.common.js:

//rules...
{
          test: /\.css$/,
          include: [
            helpers.root('node_modules','font-awesome','css'),
            helpers.root('node_modules','bootstrap', 'dist', 'css')
          ],
          loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: [
              { loader: 'css-loader', query: {sourceMap: true} }
              ]
          })
 }
...
...
...

//plugins
[
..
..
..
new ExtractTextPlugin({filename:'styles.css', disable: false, allChunks: true })
]

When I run npm run build command. everything is working fine bu I get following error regarding to bootstrap.

ERROR in ./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?{"sourceMap":true}!./~/bootstrap/dist/css/bootstrap.css
Module build failed: Unknown word (1:1)

> 1 | // removed by extract-text-webpack-plugin
    | ^

 @ ./~/bootstrap/dist/css/bootstrap.css 2:21-235
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts

I am not sure what I am missing. I have googled it but could not find any find any solutions. Can anyone please help. Thanks.

Hitesh Kumar
  • 3,508
  • 7
  • 40
  • 71

1 Answers1

1

You are using wrong arguments in your ExtractTextPlugin.extract() method. There is no fallbackLoader key word in your version (according to the source) and it's deprecated in the most recent one (the same as the loader).

Update the extract-text-webpack-plugin dependency to the latest one and use it in the following way:

{
    test: /\.css$/,
    include: [whatever],
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
    })

}

hiper2d
  • 2,814
  • 1
  • 18
  • 14
  • Still the error is there, even after changing `options` obj to the way you suggested – Hitesh Kumar Mar 10 '17 at 11:29
  • Is the error text still the same? That's odd because it continues complaining of some unknown keys. Try to follow carefully the latest extract-text-webpack-plugin [doc](https://github.com/webpack-contrib/extract-text-webpack-plugin). And don't forget to include jQuery [like here](http://stackoverflow.com/questions/37840333/how-to-add-bootstrap-3-to-angular2-webpack-based-project) after you manage to fix the issue, it's necessary for Bootstrap usage – hiper2d Mar 10 '17 at 12:36
  • I don't need bootstrap.js in my project. so we can ignore jquery... To me it seems to be issue of `extract-text-plugin` with the version of `webpack` – Hitesh Kumar Mar 10 '17 at 12:48