CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-4
Starfleet Security
Starfleet Security

Reputation: 1843

Bootstrap 4 not working with Angular 2 app

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?

Upvotes: 3

Views: 1743

Answers (2)

Alpesh Nakrani
Alpesh Nakrani

Reputation: 35

I used this command to install bootstrap version and with jquery and it worked for me. Hope it will work for you as well.

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

Upvotes: 0

Melchia
Melchia

Reputation: 24224

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.

Upvotes: 3

Related Questions