How to add bootstrap to an angular-cli project

Jerome picture Jerome · Jun 6, 2016 · Viewed 423k times · Source

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

and import them in our index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

This worked fine with ng serve but as soon as we produced a build with -prod flag all these dependencies disappeared from dist/vendor (surprise !).

How we are intended to handle such scenario (i.e. loading bootstrap scripts) in a project generated with angular-cli ?

We had the following thoughts but we don't really know which way to go...

  • use a CDN ? but we would rather serve these files to guarantee that they will be available

  • copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?

  • adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).

Answer

pd farhad picture pd farhad · Jun 7, 2016

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.

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

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
    
  2. 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"
    ],
    
  3. 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'
  }
};