Angular 5 with Bootstrap 4 not working

Question

I created a new Angular 5 project. After that I followed instructions given on Angular CLI GitHub page to use Bootstrap 4.0.0 with Angular 5.2.2. I use 'npm install bootstrap' to install bootstrap. but I get...

Unknown error from PostCSS plugin. Your current PostCSS version is 
6.0.15, but autoprefixer uses 5.2.18. Perhaps this is the source of 
the error below.
...
...
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
...
...
webpack: Failed to compile.

Answer 1

The following is an understandable consolidation of various tutorials that I have gone through. Please remember that it depends on the versions you are using.

1. Install the angular cli

npm install -g @angular/cli

2. Create an Angular project using angular cli

ng new my-awesome-project

3. Install dependencies

Next, cd in your new project and install requiered dependencies:

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

Whatch out about popper.js. This lib is used by Bootstrap. However, you have to precisely run npm install popper.js --save because popper is another js lib distributed by npm.

Here is my current configuration:

angular cli: 1.6.8
angular: ^5.2.0
bootstrap: ^4.0.0
jquery: ^3.3.1
popper.js: ^1.12.9

4. Integrate the dependencies to your project

Now that you have all your dependencies, you'll have to "plug" bootstrap into your project.

Open .angular-cli.json file and update script section as follows:

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

Finally, open src\styles.css and add:

@import "~bootstrap/dist/css/bootstrap.css";

The last operation to be necessary when running angular project in production mode.