Unable to add bootstrap to Angular Typescript project

Question

I am developing a web application using Angular and Typescript. I am trying to add to my project. I am new to Angular and Typescript. I followed this link - Angular 4: How to include Bootstrap?. When I run my project, it is giving me the error.

I installed the required packages using npm running following commands

npm install bootstrap@next --save
npm install jquery --save
npm install popper.js --save

Then in angular-cli.json, I modified the styles and scripts like this.

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

When I run my code, I got this 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.min.css
Module build failed: BrowserslistError: Unknown browser major
    at error (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:37:11)
    at Function.browserslist.checkName (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:320:18)
    at Function.select (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:438:37)
    at C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:207:41
    at Array.forEach (<anonymous>)
    at browserslist (C:\Users\Acer\Desktop\umyataung\web\node_modules\browserslist\index.js:196:13)
    at Browsers.parse (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\browsers.js:44:14)
    at new Browsers (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\browsers.js:39:28)
    at loadPrefixes (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
    at plugin (C:\Users\Acer\Desktop\umyataung\web\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
    at LazyResult.run (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:204:22)
    at processing.Promise.then._this2.processed (C:\Users\Acer\Desktop\umyataung\web\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:231:20)
    at new Promise (<anonymous>)
 @ ./node_modules/bootstrap/dist/css/bootstrap.min.css 4:14-131
 @ multi ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

Following this solution- https://github.com/angular/angular-cli/issues/9080, I downgraded my CLI as well

 "@angular/cli": "1.6.3"

When I run my code, it is giving me the same error. What is wrong with my code?

Do you have some kind of CSS import statement inside your styles.css that is attempting to load bootstrap.min.css? — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 23, 2018 at 18:16
Also would you consider using Bootstrap modules/components specifically designed to work with Angular 2+? You may have serious issues trying to use Bootstrap's default JavaScript modules/components as well as using jQuery within Angular. — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 23, 2018 at 18:18
use ng-bootstrap or ngx-bootstrap as required version which is designed specifically for angular. You just need to add the .css file which you are already using in angular-cli.json — Niladri
– Niladri, Commented Mar 23, 2018 at 18:29

Bhavesh Ajani · Accepted Answer · 2020-05-20 06:40:20Z

0

I think your installation and setup is true but next import bootstrap.min.css file in style.css file. like this.

style.css

@import '~bootstrap/dist/css/bootstrap.min.css';

you can read a full blog about how to install & setup bootstrap in angular, click here to read full blog about this

answered May 20, 2020 at 6:40

Bhavesh Ajani

1,29114 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to add bootstrap to Angular Typescript project

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related