How to add bootstrap to an angular-cli project

IMPORTANT UPDATE: ng2-bootstrap is now replaced by ngx-bootstrap

ngx-bootstrap supports both Angular 3 and 4.

Update : 1.0.0-beta.11-webpack or above versions

First of all check your angular-cli version with the following command in the terminal:

ng -v

If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps:

1. Install ngx-bootstrap and bootstrap:

   npm install ngx-bootstrap bootstrap --save

This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.

2. Open src/app/app.module.ts and add:

   import { AlertModule } from 'ngx-bootstrap';...@NgModule({...imports: [AlertModule.forRoot(), ... ],... })

3. Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the styles array:

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

4. Open src/app/app.component.html and add:

   <alert type="success">hello</alert>

1.0.0-beta.10 or below versions:

And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.

First, go to the project directory and type:

npm install ngx-bootstrap --save

Then, open your angular-cli-build.js and add this line:

vendorNpmFiles: [   ...   'ngx-bootstrap/**/*.js',   ...]

Now, open your src/system-config.ts then write:

const map:any = {   ...   'ngx-bootstrap': 'vendor/ngx-bootstrap',   ...}

...and:

const packages: any = {  'ngx-bootstrap': {    format: 'cjs',    defaultExtension: 'js',    main: 'ngx-bootstrap.js'  }};

Looking up for the key word > Global Library Installationon https://github.com/angular/angular-cli helps you finding the answer.

As per their document, you can take following steps to add Bootstrap library.

First install Bootstrap from npm:

npm install bootstrap@next

Then add the needed script files to to apps[0].scripts in angular-cli.json file:

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

Finally add the Bootstrap CSS to the apps[0].styles array:

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

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

This is best solution.But if you don't restart ng serve it never works. It is strongly recommended to do this last action.

Do the following:

npm i bootstrap@next --save

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file (choose whichever you are using) and import bootstrap there:

For style.css

/* You can add global styles to this file, and also import other style files */@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For style.scss

/* You can add global styles to this file, and also import other style files */@import "../node_modules/bootstrap/scss/bootstrap";

For scripts you will still have to add the file in the angular-cli.json file like so (In Angular version 6, this edit needs to be done in the file angular.json):

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