Cannot compile angular app with bootstrap

Question

I'm having problems compiling my Angular app when including bootstrap. I'm new to Angular but I've used this before and I thought the below is all I had to do but I can't get it to work.

I installed bootstrap from CLI via Powershell using the following command:

npm install bootstrap --save

It seems to have installed it as I can see in my node_modules folder.

I've included the Boostrap style line in the [Styles] section of .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

but when I try to start my angular app using ng serve, I get the following error:

PS C:\angular\apps\MyApp\MyApp.webapp> ng serve ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2018-01-22T22:55:02.306Z Hash: 55d32425f16b07bf6645 Time: 46713ms chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 8.64 kB {vendor} [initial] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 218 kB {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 14.7 kB {inline} [initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.3 MB [initial] [rendered]

ERROR in ./node_modules/css-loader? {"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader ?{"ident":"postcss"}!./node_modules/bootstrap/dist/css/bootstrap.min.css Module build failed: BrowserslistError: Unknown browser query >= 1% at error (C:\angular\apps\MyApp\MyApp.webapp\node_modules\browserslist\ index.js:37:11) at C:\angular\apps\MyApp\MyApp.webapp\node_modules\browserslist\ index.js:222:9 at Array.forEach (native) at browserslist (C:\angular\apps\MyApp\MyApp.webapp\node_modules\browserslist\ index.js:196:13) at Browsers.parse (C:\angular\apps\MyApp\MyApp.webapp\node_modules\autoprefixer\lib\ browsers.js:44:14) at new Browsers
(C:\angular\apps\MyApp\MyApp.webapp\node_modules\autoprefixer\lib\ browsers.js:39:28) at loadPrefixes (C:\angular\apps\MyApp\MyApp.webapp\node_modules\autoprefixer\lib\ autoprefixer.js:56:18) at plugin
(C:\angular\apps\MyApp\MyApp.webapp\node_modules\autoprefixer\lib\ autoprefixer.js:62:18) at LazyResult.run
(C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:274:20) at LazyResult.asyncTick
(C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:189:32) at LazyResult.asyncTick (C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:201:22) at processing.Promise.then._this2.processed
(C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:228:20) at LazyResult.async (C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:225:27) at LazyResult.then (C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss\lib\ lazy-result.js:131:21) at C:\angular\apps\MyApp\MyApp.webapp\node_modules\postcss-loader\ index.js:129:55 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-127 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

webpack: Failed to compile.

The error disappears when I remove the boostrap line from the [Styles] section.

Any idea what's causing this?

Thanks

Answer 1

Above approach didn't work for me. When I tried to build the project it couldn't find the package reference and displayed the below error message.

---

Instead of using "../node_modules/bootstrap/dist/css/bootstrap.min.css" I used "node_modules/bootstrap/dist/css/bootstrap.min.css" in package reference in angular.json and it worked.

Answer 2

version: Angular 6

cli: 6.2.3 (ng --version)

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/style.css"              
            ],

Answer 3

When following my notes from the tutorial I'm following, I had written down that to install bootstrap 3.x, I had to use the following command line:

npm install bootstrap --save

and to install bootstrap 4.x, I had to use the following command

npm install bootstrap@next --save

but when I opened package.json for bootstrap I noticed that it was referencing 4.0.

To resolve my problem, I went to my node_modules folder and uninstalled the current version of boostrap:

npm uninstall bootstrap --save

and re-installed the highest version before 4.0 i.e.

npm install [email protected] --save

This resolved my problem and my app is now running as expected when running ng server with the bootstrap style line mentioned in my original post included in [style] question.

Hope this helps other.