How to install bootstrap, jquery & font-awesome in angular 2/4

Hello friends
Today i will share how to install bootstrap, jquery & font-awesome in angular 2/4. If you’re developing with Angular 2/4 you probably use angular-cli as well. If not, then I strongly recommend to take a look at it!

With the latest angular-cli and Webpack you are able to merge and minify all your stylesheet (*.css) and javascript (*.ts) files into so called bundles. This has the advantage that your website loads much faster due to less static file requests and smaller download sizes.

Many of the newly build websites come with the Bootstrap CSS frameworkand the Font Awesome font and css toolkit.
If you would like to integrate them to your Angular 2 project proceed with the steps below.

Install Bootstrap 3

To install the V3 version of Bootstrap you also need to install the latest 1.x jQuery framework as well. To do so, open up a terminal in your project’s base folder (where package.json is located) and type the following:

 
1
npm install bootstrap@3 jquery font-awesome --save

Now you have both frameworks installed on your computer, now it is time to add them to your Angular 2/4 project’s build process.
Go to your angular-cli.json file and add the highlighted entries to it:

 
1
2
3
4
5
6
7
8
9
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],