Angular 9 Tutorial For Beginners #40 - Install Bootstrap In Angular

[@jonguyen4246]

Thanks for the course!! its the best tutorial I have seen.

[@ARCTutorials]

Thank you for your kind words Nguyen. Ur words are very encouraging and motivating for me. I am right here to help you if you have any doubts or queries in any of the tutorial from Angular 9 full series. Regards Sridhar

[@jacksm8709]

awesome... u r just great...

[@ARCTutorials]

Thank you so much 😀

[@asatyababuvallabhudasu7379]

Thanks sir for giving clear explanation and I want notes of folders and structures and boot process video notes

[@maneshpunde2509]

Really nice tutorial

[@ARCTutorials]

Thank you so much Manesh. Appreciate your kind words. Please do let me know if you have any issues or have any queries. Regards Sridhar

[@vishalchaugule8633]

sir in npm method from style path and script path where do u get it

[@podugumonika1972]

I've tried installing bootstrap, jquery and popper and imported, followed as guided but I couldn't see the Nav Bar, was there anything implemented in html?? please let me know what should I follow to get that Nav Bar after installation and importing those packages.

[@ARCTutorials]

Hi Monika. Try installing all 3 individually. Here's the latest video tutorial with Angular 10 kzbin.info/www/bejne/opSmlnhnopWllc0

[@podugumonika1972]

@@ARCTutorialsthank you so much

[@bhupendra1807]

Hi Sridhar, looks like now we need to use popper.js instead of popper. I also get the when I use NPM install as one comment below. Please correct me if wrong.

[@ARCTutorials]

Hi Bhupendra. I used just popper and it worked charm. This was just couple of weeks back. Not sure if anything changed. I will check again and update this thread👍

[@rakeshkalluri2463]

Good explanation sir, just want to know the next one is forms concept, so are you covering how to install material design? and how to get ppts can you help with that it will be great so I can refer it has notes

[@ARCTutorials]

Hi Rakesh. For this tutorial i started with Bootstrap framework. I can cover material design as well. Let me know. Check out the playlist i posted more videos on Forms

[@kevinstadler6206]

First of all, I am really enjoying the series so far, I have learned a great deal up until now. I am looking forward to the following videos. In the Angular 9 Tutorials For Beginners video titled #40 Install Bootstrap in Angular at the end of the video, it states the next video will be Install Material Design in Angular app. The next video after this bootstrap video goes into forms. Can you please point me to the location of the Material Design in Angular video? Even the outline at the end of video #39 has Material Design in Angular after Bootstrap in Angular.

[@ARCTutorials]

Thanks Kevin for your kind words and encouragement. Here’s the playlist you should follow to learn and master Angular kzbin.info/aero/PLp50dWW_m40WYX5tynzpPf0a3ZgjGT1bI

[@kevinstadler6206]

@@ARCTutorials I am pretty sure that is the same playlist I have been following, but I still don't see that material design in angular video.

[@ARCTutorials]

Oh yes i didnt add Angular Material in this to avoid confusion for folks. I have covered it separately kzbin.info/aero/PLp50dWW_m40V5ZNjLJiL1cMp1Fcww2V29

[@kevinstadler6206]

@@ARCTutorials That's more than what I was looking for. I look forward to that playlist after I get through the rest of the current playlist. Thanks much.

[@sreenuksr]

Angular 9 Tutorial For Beginners #40 - Install Bootstrap In Angular - there are two ways to install bootstrap (CDN and NPM), preferable is NPM - there maybe changes to URL if we use CDN and lead to issues in the production environment - copy links from - getbootstrap.com, if it is CDN and include them in index.html - npm i bootstrap jquery popper --save (NOTE: It will download latest packages, you can download specific version by adding other conditions in this command) - after installing bootstrap these entries will be in package.json - we will need to import styles and scripts in order to use bootstrap - without bootstrap will NOT work - go to -> angular.json add styles and scripts under 'architecture' section as shown below "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.main.css" ], "scripts": [ "node_modules/jquery/dist/jquery_min.js", "node_modules/bootstrap/dist/js/bootstrap_min.js"]

[@ARCTutorials]

Thanks for sharing!!! Happy Learning. Regards Sridhar

[@abhabhardwaj8351]

@sreenivasa updated the names of file as it has typo mistakes . File names are bootstrap.min.css,jquery.min.js and bootstrap.min.js instead of bootstrap.main.css, jquery_min.js and bootstrap_min.js. In vedio names are displayed correctly. "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

[@sreenuksr]

@@abhabhardwaj8351 Thank you!

[@sreenuksr]

@ARC/Sridhar, what is the option we need to use if we encounter this type of error - An unhandled exception occurred: Port 4200 is already in use. Use '--port' to specify a different port.

[@ARCTutorials]

It seems you already have an application running on port 4200!! If its not important stop the app else u can also start app by running the command ng serve -port=4400 u can use any port which is not in use. Simple

[@sreenuksr]

@@ARCTutorialsthanks for prompt response. I did not opened the application on 4200 port but sometimes I am getting that error. in that case i used to kill that port but this is not suggestable approach as per your one of comment. Just would like to know any other option without having impact. thanks!

[@ARCTutorials]

Just configure app on any other port instead of 4200. There is no restrictions

[@nareshvesamsetti7655]

Hi Sreedhar, Really appreciating your hard work in extending our techies knowledge. I've tried installing bootstrap, jquery and popper and imported, followed as guided but I couldn't see the Nav Bar, was there anything implemented in html?? please let me know what should I follow to get that Nav Bar after installation and importing those packages. Regards, Naresh

[@ARCTutorials]

Hi Naresh. If you are free tomorrow, I can do a quick debug session with you to help you with your query. Thanks Sridhar

[@nareshvesamsetti7655]

@@ARCTutorials Thank you so much for your kind words, please let me know when and how do you want to connect. please drop and email to [e-mail]

[@BhagyaNN]

@@ARCTutorialsI am also facing the same issue. I have installed bootstrap,jquery, popper and imported the scripts and styles. Can you tell me what is the issue?

[@BhagyaNN]

@@ARCTutorials @ARC Tutorials I think we were not able to see the nav bar but, bootstrap features are enabled. As i am working on angular forms(session No:42) can able to see the forms. I am new to Angular please let me know if i am wrong

[@nareshvesamsetti7655]

@@BhagyaNN yes they are enabled but not sure how to enable the nav bar I'm still waiting for sreedhar to respond if he could help I'll help you.

[@pragnyakulkarni1748]

Sir please make a video on Angular Tables with vertical and horizontal scrolling with out using angular material module

[@mayurnaktode592]

Hello sir your tutorial is awesome. Requesting you to make a video on one CRUD operation where we can use most of the things under one video and i think this will help. Thank you

[@ARCTutorials]

Hi Mayur. Yes i have that in plan after i cover forms and HTTP. These are must to know before we start full live application. Thank you.

[@vikneshramesh3529]

For installing popper It must npm install --save popper.js Is it correct?

[@ARCTutorials]

You will need to run the npm command - "npm install --save bootstrap jquery popper"

[@vikneshramesh3529]

@@ARCTutorials thank you sir

[@krishnachaitanya3169]

Sir, We also have to add popper in angular.json file know sir????

[@ARCTutorials]

Yes we have to add. If ur following the tutorial playlist, i have shown it there in installation tutorial. Pls check

[@MrRajathirupathi]

Hello Sir, I getting the below error could you please help. PS C:\Angular_Workspace\oneconversion> npm i bootstrap jquery popper -save npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules ijs.resdir ode_modules\chokidar ode_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! code ENOENT

[@ARCTutorials]

Hi Raja. I see that you have a module chokidar used which is not compatible. So first you update that package to version 3. And then run the command to install Bootstrap.

[@simrankourb1759]

@@ARCTutorials Hi Sridhar, I am also getting this error i tried this C:\Users\paman\Angular\Angularn>npm install chokidar npm WARN @angular-devkit/build-angular@0.1001.0-next.1 requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN @ngtools/webpack@10.1.0-next.1 requires a peer of @angular/compiler-cli@>=10.0.0-next.0 < 11 but none is installed. You must install peer dependencies yourself. npm WARN codelyzer@6.0.0 requires a peer of @angular/compiler@>=2.3.1 9.0.0-beta 9.1.0-beta 9.2.0-beta =2.3.1 9.0.0-beta 9.1.0-beta 9.2.0-beta

[@srikanth-rk6wz]

@@simrankourb1759 Do "npm install bootstrap jquery popper.js --save"

[@abhabhardwaj8351]

@@srikanth-rk6wz Thank you so much Srikanth. I was getting some error but now everything is installed

[@ourhyderabad8499]

Installing popper failed with error as "Undefined ls-remote -h -t ssh://git..."

[@ARCTutorials]

Popper library has undergone changes. Please check the documentation

[@shashikantprasad6015]

Adding css and Js file path to angular.json but not working kindly help "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ]

[@ARCTutorials]

Hi Shashikant. Can you please modify the path of the node_modules to "../node_modules" and try again?

[@anjeetsharma8634]

@@ARCTutorials Add this line in this path src/style.css @import "~bootstrap/dist/css/bootstrap.min.css"

[@ARCTutorials]

Hi Anjeet. Thats one way but we should configure all configurations only in angular.json. That way managing is simple

[@anjeetsharma8634]

@@ARCTutorials i mention these three think in the angular.json file, but bootstrap does not run it on the project. after adding above statement when running the bootstrap.

[@ARCTutorials]

@@anjeetsharma8634 whats the path u gave angular.json? Did u give two dots or single dot in node_modules??

[@ramyaravichandran279]

Hi i got error while installing NPM I BOOTSTRAP JQUERY POPPER -- SAVE.. I can't able to install pls help me

[@shairaanarazon1686]

Hi sir, Angular 9 Tutorial For Beginners #41 - Install Material Design in Angular App is not on your playlist

[@ARCTutorials]

Hi Shaira, im focusing on Bootstrap in this series. I had shared earlier on how to start with Angular material do check out those tutotials. I will also share the links to you. Regards Sridhar

[@nikhathtabassum6115]

Hello sir, i got the below error while trying to execute the commang npm i bootstrap jquery popper --save.Please suggest me to resolve the errors.Thanks Errors: npm ERR! code 1 npm ERR! command failed npm ERR! command git ls-remote ssh://[e-mail]/pemrouz/buble.git npm ERR! 'git' is not recognized as an internal or external command, npm ERR! operable program or batch file.

[@bhaskaryarasi6972]

92% additional asset processing scripts-webpack-plugin✖ ｢wdm｣: Error: ENOENT: no such file or directory, open '/Users/sumithra/Desktop/Ang/oneconversion/node_modules/bootstrap/dist/js/bootstrap.min.js' Hai sir..help me i am getting this error

[@ARCTutorials]

Hi Bhaskar. It means the path given in angular.json is wrong. Can u pls check whats the path given for bootstrap.min.js file?

[@bhaskaryarasi6972]

Ok.. Thank you..sir

[@bhaskaryarasi6972]

@@ARCTutorials working fine..sir

[@avinashavi1228]

Sir it was not installing popper help me sir

[@ARCTutorials]

hi Can you please copy paste message whats happening? Send me screenshot at [e-mail]

[@ashlyvarghese7053]

dropdown not working. how to make it work?

[@ashishbaranwal4044]

on running command > npm i bootstrap jquery popper -save npm ERR! code ENOENT npm ERR! syscall spawn git npm ERR! path git npm ERR! errno -4058 npm ERR! enoent An unknown git error occurred npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent