Tag: Angular and bootstrap

Having bootstrap in any web project is becoming crucial because it is making developer’s life much easier and making the web project mobile-friendly portals. I’ve been using bootstrap for more than 8 years by now and it is becoming a main component for any project that I’m working on. In this post we will cover how to install bootstrap on Angualr project, we will be covering this step by step starting form creating a new angular project, below are steps:

1. Open command prompt with admin permissions. To do so, on start menu search for “command prompt” and right click on it then select “Run as Administrator”
2. Navigate to the location you want to store the project.
3. Type the following command

ng new <Project Name>

it will be taking few minutes to download files from internet and creating the needed angular files for your project to run.

After this command completed, you will have angular project ready for run. But without bootstrap.

4. Above command will create a new folder with your project name, navigate to it
5. Type the following command on cmd

            npm install bootstrap jquery –save

           what above command do, is basically instructing npm to download and save bootstrap and jquery for you on the project.

6.  Now you have bootstrap installed on your project. Let’s try to run the project, type the following command:

                  ng s -o

              sometimes, you will get the following error message

              “node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected”

             To fix this issue, we need to use older version of RX to do that type the following command

                            npm install rxjs@6.0.0 –save

7. Try run the project again.. it should be working. Next is to import the needed css files and js, Open angular.json file with any text editor file
8. On styles tag, add the following value which is basically CSS path

               “node_modules/bootstrap/dist/css/bootstrap.min.css”

        On script tag, add the following values which is basically JS path

                 “node_modules/jquery/dist/jquery.min.js”, 

                 “node_modules/bootstrap/dist/js/bootstrap.min.js”

9. Try to run the project using the following command

ng s -o

              you should be getting the new project open on your web browser. To test if the bootstrap is installed correctly or not, basically you can open app.component.html and add the following tag

<button class=”btn btn-primary”>test bootstrap</button>

By doing above, you will get a blue button on the main page.