Post
Ask Question

How To Install JQuery, Popper JS AND Bootstrap 4 IN Angular 6

Introduction

In this article, I will demonstrate how to install Bootstrap 4 in Angular 6. There are two ways to install Bootstrap in Angular. If you are new to how to setup a development environment then check out my article. Click here:

To install Bootstrap there are two methods:

  1. Direct using CDN link in project
  2. Using npm or angular CLI

First Method

Step 1

Open browser type https://getbootstrap.com/  and copy the css and script links. 

  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">  
  2.   
  3. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>  
  4.   
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>  
  6.   
  7. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>  

Step 2

Open project folder, find scr folder, under src folder open index.html file copy and paste above CDN links as show in below image.

Angular

Code for CDN link in index.html

  1. <!doctype html>  
  2. <html lang=”en”>  
  3.   
  4. <head>  
  5.   <meta charset=”utf-8”>  
  6.   <title>HelloWorld</title>  
  7.   <base href=”/”>  
  8.   <meta name=”viewport” content=”width=device-width, initial-scale=1”>  
  9.   <link rel=”icon” type=”image/x-icon” href=”favicon.ico”>  
  10.   <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css” integrity=”sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB”  
  11.     crossorigin=”anonymous”>  
  12. </head>  
  13.   
  14. <body>  
  15.   <app-root></app-root>  
  16.   <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo”  
  17.     crossorigin=”anonymous”></script>  
  18.   <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49”  
  19.     crossorigin=”anonymous”></script>  
  20.   <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js” integrity=”sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T”  
  21.     crossorigin=”anonymous”></script>  
  22. </body>  
  23. </html>  

Step 3

Open app folder find app.compponent.html click on it and open rit and eplace with some Bootstrap 4 theme.

Screenshot 1

Angular

 

Screenshot 1

Angular

Code for app.component.html 
  1. <div class="container">  
  2.     <nav class="navbar navbar-expand-md bg-dark navbar-dark">  
  3.         <a class="navbar-brand" href="#">Navbar</a>  
  4.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">  
  5.           <span class="navbar-toggler-icon"></span>  
  6.         </button>  
  7.         <div class="collapse navbar-collapse" id="collapsibleNavbar">  
  8.           <ul class="navbar-nav">  
  9.             <li class="nav-item">  
  10.               <a class="nav-link" href="#">Link</a>  
  11.             </li>  
  12.             <li class="nav-item">  
  13.               <a class="nav-link" href="#">Link</a>  
  14.             </li>  
  15.             <li class="nav-item">  
  16.               <a class="nav-link" href="#">Link</a>  
  17.             </li>      
  18.           </ul>  
  19.         </div>    
  20.       </nav>  
  21.   <div class="jumbotron">  
  22.     <h1 class="text-center">Welcome to angular</h1>        
  23.     <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>  
  24.   </div>  
  25.   <p>This is some text.</p>        
  26.   <p>This is another text.</p>        
  27. </div>  

Step 4

Run the project

Angular

Second Method 

Step 1

Open index.html remove all CDN links from it.

  1. <!doctype html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.   <meta charset="utf-8">  
  6.   <title>HelloWorld</title>  
  7.   <base href="/">  
  8.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.   <link rel="icon" type="image/x-icon" href="favicon.ico">  
  10. </head>  
  11.   
  12. <body>  
  13.   <app-root></app-root>  
  14. </body>  
  15. </html>  

Step 2

Right click on project and open in command prompt.

Angular

Step 3

Bootstrap has dependency on Jquery and Popper js. To install Jquery and Popper js type the following commands. 

  • To install jquery type
    npm install jquery --save

  • To install popper js
    npm install popper.js --save

    Angular

  • To install bootstrap 4 type the following command
    npm install ngx-bootstrap [email protected]

    Angular

Step 4: Open project folder find node_modules folder; under that check if Jquery, Popper js and Bootstrap folder s areinstalled.

Screenshot 1

Angular

Screenshot 2

Angular

Screenshot 3

Angular

Step 5: Open Angular.json from project and type the following code.

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

Step 6: Terminate running server. To terminate running server press ctrl+c

Terminate batch job (Y/N)?
Type Y hit enter
Now type ng serve to re start server and open in browser.
 
Angular

 

Conclusion

In this article, I have explained installation of Jquery, Popper js and Bootstrap 4 step by step. Hopefully it will be helpful for beginners.   


Similar Articles