How to include Bootstrap & Jquery in Angular 11 app

 3 Steps:

1. Step 1 : Installing Angular CLI
2. Step 2: Installing Bootstrap and Jquery in our project
3. Step 3: Adding Bootstrap and jquery in our project using angular.json  

Step 1 : Installing Angular CLI 

If Angular CLI is not installed in your machin yet, Install it firs by using the below command in a new terminal.

$ npm install -g @angular/cli

Now, Create a new Angular project by using the ng utility.

$ ng new myApp

Now navigate to your root of the project by using 

$ cd myApp

Now we can serve the Angular app by using 

$ ng serve

This command will run the application in the default port http://127.0.0.1:4200/

Step 2 — Installing Bootstrap & Jquery in Your Angular Project

Go back to your command-line interface and install Bootstrap 4 via npm as follows:

$ npm install bootstrap

Next, you also need to install jQuery using the following command:

$ npm install jquery

Step 3 :  Adding Bootstrap & Jquery to Angular Using angular.json

Now open angular.json file from your project root

In your projects->architect->build->styles array,

node_modules/bootstrap/dist/css/bootstrap.css

In your  projects->architect->build->scripts array,

node_modules/bootstrap/dist/js/bootstrap.js

In your   projects->architect->build->scripts array,

node_modules/bootstrap/dist/js/bootstrap.js

Now restart your server and Bootstrap and Jquery is added into your application.

Image taken from freepik