Bootstrap 4 not working with Angular CLI - node.js

Question

I've installed Bootstrap 4 using node into an Angular 2 project by following this guide:
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
Followed the instructions to the letter, but now when I try and run the application using ng serve I get compile errors.
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: BrowserslistError: Unknown browser major
at error (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:320:18)
at Function.select (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:438:37)
at D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:207:41
at Array.forEach (native)
at browserslist (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\browserslist\index.js:196:13)
at Browsers.parse (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:44:14)
at new Browsers (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\browsers.js:39:28)
at loadPrefixes (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
at plugin (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
at LazyResult.run (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
at LazyResult.asyncTick (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
at processing.Promise.then._this2.processed (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
at LazyResult.async (D:\GitKracken\KnightOwlUI2018\KOWebUi\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:228:27)
# ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
# multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
My apps section of my .angular-cli.json file (as far as I can see) seems ok and is the only file I changed since installing Bootstrap 4 and the physical bootstrap files are in the node modules folder. My node_modules folder is in the root of the project on the same level as the src folder just as the cli sets it up by default.
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
Have I missed a step somewhere? Or maybe the guide I'm ready is out of date, I'm just not sure, but this feels like it should be really simple and should just work?

Answer 1

Have you seen this bug report?
Basically, two main solutions I get from this:
Try with other minor versions of Bootstrap
Use Sass and import Bootstrap Sass files instead of adding Bootstrap minified CSS in angular-cli.json
Personally I copy the entire Sass code from Bootstrap Github tags into my project. This gives me more flexibility.