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\'

Answer 1

Use npm install bootstrap to install Bootstrap 4.0.0. Take a look at Bootstrap itself and its npm-package.

(The package for Bootstrap 3.3 is bootstrap@3)

Answer 2

Bootstrap has dependency on popper and jquery. It is always a good idea to install these modules along with bootstrap.

npm install --save bootstrap@4 jquery@version popper@version

using --save adds these dependencies in your package.json.

Then you can go to angular.json (Angular 6 and cli v6) or angular-cli.json (Angular 5 or below and cli v1.7) and paste the css of bootstrap in node modules under styles array. And add jquery, popper and bootstrap.js files under scripts.

Hope that helps!

Answer 3

Make sure you have,

1. Added the bootstrap.css file
2. Copied the fonts folder of bootstrap into the project
3. Added the file name in angularcli.json file

Answer 4

You can add ngbootstrap by using the command

ng add @ng-bootstrap/schematics by adding schematics it will add necessory import to angular.json file.

Answer 5

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.

Answer 6

npm install bootstrap --save

Open .angular-cli.json or angular.json file and update script section as shown in above answers. Also add it to styles array:

"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ]

If this doesn't work, then open src\styles.css and add:

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