Introduction
In this article, you will learn how to install and configure Bootstrap into the Angular 6 Application. Before proceeding further, I would recommend that you will Learn how to create a new Angular 6 Project using the Angular CLI command.
Install Bootstrap
Here is the NPM command for installing Bootstrap and some of the features in Bootstrap. so it has a dependency on JQuery so this command installs both Bootstrap3 and JQuery to your angular application.
The angular application is present in this project directory. Let’s execute the following command. which is going to install both Bootstrap and JQuery into the node_modules folder.
Project Dependencies
The dependencies within our package.json file. we have an entry for both bootstrap and jQuery version3.
Let’s see the node_modules folder we should have a folder for Bootstrap and in that bootstrap folder inside that, we have both minified and non-minified CSS versions of the CSS files.
We have a folder for JQuery. the inside JQuery folder has non-minified and minified versions of the JQuery.
After successfully executing the NPM command to install bootstrap. you may not find the node_modules folder in Visual Studio Code. If that is the case restart visual studio code.
Using angular.json configuration file
Then we need to configure it for use in the angular CLI configuration file angular.json in angular 6. Because of the angular CLI configuration file rename from angular-cli.json to just angular.json
In this file in the Style section. we include the path to the bootstrap CSS file and in the script section. we include the path to the jQuery file.
Add root component file
Let’s include a button in the root component (app.component.html) file.
Let’s build and run this project in command line.
And see the output in Browser as we expected.
Thank you for reading this article. I hope you get started your application using Angular 6 CLI and also read more articles related to mechanical
