Bootstrap 4 not working with Angular 2 app

Question

I just created a new Angular app in VS Code. I added Bootstrap 4 as per these directions:

https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

and changed the "styles" and "scripts" to add these lines (the jquery and popper lines were found in some other directions, I get the same error with or without those):

    "../node_modules/bootstrap/dist/css/bootstrap.css"

    "../node_modules/jquery/dist/jquery.slim.js",
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"

but I'm getting the following error:

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.css Module build failed: BrowserslistError: Unknown browser major at error (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:37:11) at Function.browserslist.checkName (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:320:18) at Function.select (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:438:37) at D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:207:41 at Array.forEach () at browserslist (D:\Users\Andrew\Documents\code\JobSolution\node_modules\browserslist\index.js:196:13) at Browsers.parse (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:44:14) at new Browsers (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\browsers.js:39:28) at loadPrefixes (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:56:18) at plugin (D:\Users\Andrew\Documents\code\JobSolution\node_modules\autoprefixer\lib\autoprefixer.js:62:18) at LazyResult.run (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at LazyResult.asyncTick (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22) at processing.Promise.then._this2.processed (D:\Users\Andrew\Documents\code\JobSolution\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20) at new Promise () @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127 @ multi ./src/styles.css ./node_modules/bootstrap/dist/css/bootstrap.css

webpack: Failed to compile.

which of course I have no clue as to what that means. Any ideas?

I suggest taking a look at ng-bootstrap. It is adapted to Angular and needs only the Bootstrap CSS, not the Javascript/jQuery code. — ConnorsFan
I appreciate the thought, but that doesn't really answer my question. Not to mention that I want the full Bootstrap library and its abilities. — Starfleet Security
@StarfleetSecurity What gives you the impression that ng-bootstrap doesn't support all of Bootstrap 4's capabilities? Installing and loading jQuery in an Angular app just to support Bootstrap widgets seems pretty inefficient. — user8651755

Melchia Melchia · Accepted Answer · 2017-12-29T22:28:56

That's an old tutorial you were following. Use this command to install Bootstrap 4:

npm install [email protected] popper.js jquery --save

in angular-cli.json add these lines:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

EDIT:

Internet Explorer For Bootstrap 4:

Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit Can I use… for details on browser support of CSS3 and HTML5 features.

If you require IE8-9 support, use Bootstrap 3. It’s the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it.

Bootstrap 4 not working with Angular 2 app

2 Answers