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, Mar 23 '18 at 18:16
Also would you consider using Bootstrap [modules/components](https://ng-bootstrap.github.io/) 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, Mar 23 '18 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, Mar 23 '18 at 18:29

score 0 · Answer 1 · answered May 20 '20 at 06:40

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

Unable to add bootstrap to Angular Typescript project

1 Answers1