hello, I'm facing an error in the console after installing the popper "index.js:1 Uncaught ReferenceError: module is not defined at index.js:1" gave path correctly where m I wrong?
@@pandarzzz The issue is now resolved. Its due to a particular version of Bootstrap. Please see this video tutorial I created, we have to use Bootstrap v5. ua-cam.com/video/qRlayPjeGoM/v-deo.html
Hi. Coming late but I just found this tutorial. The problem you are facing is that the file is not in css folder. It is in "js" folder under node_modules. Just change the css in js and you'll be fine.
I was looking for easy to follow along tutorial, your method seems to be working out the best so far. Enjoy that you keep your videos short and sweet. I would love to see you make videos on SSPA using module federation.
**UPDATE** For who follow everything in the video in regards to bootstrap v4 or v5. And even managed to compile successfully, but whenever go to the localhost:4200 it does not display the message “Welcome to Bootstrap Framework in Angular” Workaround: please remember to hit "Ctrl + s" at the files that you made the changes. And run cmd "ng serve" again.
Your explanations are great and I really enjoy learing angular but it would be nice if they could agree on some standards becaue the errors are endless.
NPM BOOTSTRAP INSTALLATION ERROR I was getting a lot of deprecated errors when using the "npm install bootstrap popper --save" command. I am using Angular 11 and I found that if I went through each component/library I had successful results. The exception to these commands was that Popper needed to be popper.js in the command line in order to work this way. After following each of the install commands separately I saw them added to the package.json file. npm install bootstrap --save (result - "bootstrap": "^4.5.3") npm install jquery --save (result - "jquery": "^3.5.1") npm install popper.js --save (result - "popper.js": "^1.16.1") The Popper library had the most issues and declared that it was deprecated and installed v1.16.1 (video shows different version), it then mentions getting the new Popper v2 at @popper/core which looks to me like angular script. ** IF THIS IS THE CASE ** When you add the script lines make sure you add: "./node_modules/popper.js/index.js.flow" for the popper directory. "./node_modules/jquery/dist/jquery.min.js" for the jquery directory. I'm not a pro (actually I am a complete noob to angular) but so far by the end of this video it seems to have worked: it compiles properly and looks the same way as when we used the CDN tags in the index. I hope this helps, good luck!
Hi Nir. I have created step by step process here. Please follow along this tutorial and you should be able to run without any issues ua-cam.com/video/qRlayPjeGoM/v-deo.html
Hi Dev. Yes its the easiest but not the best option as the CDN links will keep changing, versions will be outdated etc and the most important thing is the dependencies, which are mostly version compatible. Hence we prefer to add it to our application angular.json
Excellent Tutorial. But one confusion is when you install bootstrap with "npm i" command how do you know before hand which BS version 4 or 5 will get installed? I say this because there is no mention of version in "npm i bootstrap" command.
hi sir, i am getting like this 'node' is not recognized as an internal or external command, operable program or batch file. when i am checking the node
Hi, I'm confused. I was having trouble installing Popper. I read something in this thread that referred me to this tutorial for installation of Bootstrap:- Mean stack project from scratch Part #3 - Install Angular 11, Bootstrap 5 and Express App I followed that and everything is working as it should.Only problem is I don't have Popper in the package.json file. Is this correct with Version 5 of Bootstrap. Popper isn't needed? Thanks
X [ERROR] Could not resolve "~bootstrap/dist/css/bootstrap.min.css" src/styles.scss:2:8: 2 │ @import '~bootstrap/dist/css/bootstrap.min.css'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You can mark the path "~bootstrap/dist/css/bootstrap.min.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. I am getting above .Can u plz help me to resolve the issue.
Due to error i have to install bootstrap and jquery separately, bur while installing popper i am getting error. Do we need to use popper or popper.js in npm command. Thanks in advance.
@@ARCTutorials I have ran this command but now i am seeing popper.js in node modules folder instead of popper. Index.js is also not there, instead popper.js and popper.min.js is present in popper.js->dist-> folder
@@dverma587 hi Deepak. The popper v1 is deprecated and v2 is having some issues. I would request u to hold on to this as its not needed immediately for you. I will cover it for you
@@ARCTutorialshi , tnx for replying , actually i think the problem solved, it was about that >>> npm i popper command did not work and i used command >>> npm install @popperjs/core --save
Hello sir, I managed to do follow everything in the video in regards to popper, jquery & bootstrap. I even managed to compile successfully, but whenever I go to the localhost:4200 it does not display the message “Welcome to Bootstrap Framework in Angular”? what exactly could be the error?
Hi Sir i installed the angular11 version and installed the bootstrap using npm. after installed the bootstrap i restarted the application. however bootstrap not working in my application. could you pls help me sir. Thx.
hi, when I run this command npm i bootstrap jquery popper --save, I am getting warnings and npm ERR! code ENOENT npm ERR! syscall spawn git npm ERR! path git many errors like above.
Hi, I am facing the below issue when trying to install the bootstrap jquery popper 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.
I think, in Angular.json file, need to place CSS libraries above the existing global css file called "Styles.scss". Which helps to we can override existing styles of css libraries. Please, provide me you're feedback on this in ASAP
Hello sir, After installing successfully and changing scripts in angular.json i am getting the following error pls can u clarify what i should do Error: Schema validation failed with the following errors: Data path "/scripts/0" must be object. Data path "/scripts/0" must match pattern "\.[cm]?jsx?$". Data path "/scripts/0" must match exactly one schema in oneOf.
Hi sir I'm trying to install boostrap but it showing error like this package no longer supported and has been deprecated and in node_module after that only boostrap folder is showing under boostrap subfolders are not showing and I'm also trying Npm i boostrap@next command to install next version but it showing Npm error code ETARGET Npm error notarget no matching version found for boostrap@next. Npm error notaries in most cases you or one of your dependencies are requesting What should I do??
Hello , Popper is not working for me instead popper.js is coming in script tag it is showing invalid address of popper. While i try to install popper by npm install bootstrap popper --save it is giving me errors I'm using "bootstrap": "^4.6.0", "jquery": "^3.6.0", "popper.js": "^1.16.1", This are details i can see in dependencies Kindly help. Thanks
I am getting the following error when i try to issue the following command in my project folder command prompt C:\Angular 10\crpapp>npm i bootstrap jquery popper --save Error: C:\Angular 10\crpapp>npm i bootstrap jquery popper --save npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 =4
Hi, Im facing an issue while installing bootstrap. Its showing like this in the terminal. 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.
Hii ,Im getting below error after installing bootstrap popper 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 npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Local pm-cache\_logs\2023-02-04T07_07_00_555Z-debug-0.log
hello, I'm facing an error in the console after installing the popper
"index.js:1 Uncaught ReferenceError: module is not defined at index.js:1" gave path correctly where m I wrong?
Hi Ritik. Can you pls send details to my email address soorya.aaradhya@gmail.com
@@ARCTutorials Hi, is there a solution to this problem? Thanks,
@@pandarzzz The issue is now resolved. Its due to a particular version of Bootstrap. Please see this video tutorial I created, we have to use Bootstrap v5. ua-cam.com/video/qRlayPjeGoM/v-deo.html
Hi. Coming late but I just found this tutorial. The problem you are facing is that the file is not in css folder. It is in "js" folder under node_modules. Just change the css in js and you'll be fine.
I was looking for easy to follow along tutorial, your method seems to be working out the best so far. Enjoy that you keep your videos short and sweet. I would love to see you make videos on SSPA using module federation.
Awesome, thank you!
**UPDATE**
For who follow everything in the video in regards to bootstrap v4 or v5. And even managed to compile successfully, but whenever go to the localhost:4200 it does not display the message “Welcome to Bootstrap Framework in Angular”
Workaround:
please remember to hit "Ctrl + s" at the files that you made the changes. And run cmd "ng serve" again.
Thanks for sharing your knowledge with our community
Thank you so much ..... For deep efforts that you have put in all the videos.
It's my pleasure
Thanks Sridhar
Thanks buddy. Drop me email what happ to your interview?
I like your way of teaching bro thank u very much. Please do more and more tech videos
Thank you Anand, I will
Your explanations are great and I really enjoy learing angular but it would be nice if they could agree on some standards becaue the errors are endless.
you shouldn't put the bootstrap's CSS file before your project CSS file. It will prevent you from overwriting bootstrap styles in the future
NPM BOOTSTRAP INSTALLATION ERROR
I was getting a lot of deprecated errors when using the "npm install bootstrap popper --save" command. I am using Angular 11 and I found that if I went through each component/library I had successful results. The exception to these commands was that Popper needed to be popper.js in the command line in order to work this way.
After following each of the install commands separately I saw them added to the package.json file.
npm install bootstrap --save (result - "bootstrap": "^4.5.3")
npm install jquery --save (result - "jquery": "^3.5.1")
npm install popper.js --save (result - "popper.js": "^1.16.1")
The Popper library had the most issues and declared that it was deprecated and installed v1.16.1 (video shows different version), it then mentions getting the new Popper v2 at @popper/core which looks to me like angular script.
** IF THIS IS THE CASE **
When you add the script lines make sure you add:
"./node_modules/popper.js/index.js.flow" for the popper directory.
"./node_modules/jquery/dist/jquery.min.js" for the jquery directory.
I'm not a pro (actually I am a complete noob to angular) but so far by the end of this video it seems to have worked: it compiles properly and looks the same way as when we used the CDN tags in the index.
I hope this helps, good luck!
Hi Nir. I have created step by step process here. Please follow along this tutorial and you should be able to run without any issues ua-cam.com/video/qRlayPjeGoM/v-deo.html
@@ARCTutorials This is fantastic, thank you very much for the update!!
Most welcome 👍
Super sir always help full
Thanks Raghu for your kind words
Adding cdn links in index.html is easiest way to add bootstrap as i observed till now..
Hi Dev. Yes its the easiest but not the best option as the CDN links will keep changing, versions will be outdated etc and the most important thing is the dependencies, which are mostly version compatible. Hence we prefer to add it to our application angular.json
videos are really helpful and the pace is quite good and understandable.
Glad you liked them deepak 👍
@@ARCTutorials I could install bootstrap and jquery but for popper it is still throwing me the same error
way of explanation is good
Like your videos very much.. Came to know that angular 11 has released.. Try post new video on updates in angular 11..
Hi Dinesh. Yes Angular 11 is more of smaller maintenance release. I will cover new things about it soon
Excellent Tutorial. But one confusion is when you install bootstrap with "npm i" command how do you know before hand which BS version 4 or 5 will get installed? I say this because there is no mention of version in "npm i bootstrap" command.
hi sir, i am getting like this 'node' is not recognized as an internal or external command,
operable program or batch file.
when i am checking the node
You need to install nodejs on ur machine
Sir..I m total confused.your writing coding n installing ackeging but what's the output comes.and why we re doing such operations..
Help!! My bootstrap highlighted blue strip is coming at the top of the page. It’s not coming at the bottom like yours.
Hello I'm facing the problem when I have added the node_modules path. Can you help me out with this
Hi, I'm confused.
I was having trouble installing Popper. I read something in this thread that referred me to this tutorial for installation of Bootstrap:- Mean stack project from scratch Part #3 - Install Angular 11, Bootstrap 5 and Express App
I followed that and everything is working as it should.Only problem is I don't have Popper in the package.json file. Is this correct with Version 5 of Bootstrap. Popper isn't needed?
Thanks
Hi David. Popper has undergone changes in its versions. Please install @popperjs/core
Very nice, thank you.
Thanks buddy. Do let me know if you have any doubts. I will try and help you as much as i can!!!
I have a problem, I want to install bootstrap 5 but popper is not installing for me 😢
X [ERROR] Could not resolve "~bootstrap/dist/css/bootstrap.min.css"
src/styles.scss:2:8:
2 │ @import '~bootstrap/dist/css/bootstrap.min.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "~bootstrap/dist/css/bootstrap.min.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. I am getting above .Can u plz help me to resolve the issue.
I am getting can't bind ngswitch since it isn't a known property after writing that h2 tag and compiling
Did you import FormsModule in AppModule? If not, you will see this error
@@ARCTutorials don't know but when I installed git then this errors gone..
Thankyou.
Please make a video on login authentication system using api with jwt token
Hi Srikanth. Yes I will cover authentication system when we reach Angular HTTP, which will be very soon.
@@ARCTutorials Thankyou
Due to error i have to install bootstrap and jquery separately, bur while installing popper i am getting error.
Do we need to use popper or popper.js in npm command.
Thanks in advance.
Try this command npm i @popperjs/core
@@ARCTutorials I have ran this command but now i am seeing popper.js in node modules folder instead of popper. Index.js is also not there, instead popper.js and popper.min.js is present in popper.js->dist-> folder
@@dverma587 hi Deepak. The popper v1 is deprecated and v2 is having some issues. I would request u to hold on to this as its not needed immediately for you. I will cover it for you
Hii when I using npm command for bootstrap , jquery and popper it shows an error like npm err! Code enoent and all other things so what should I do
hi sir first of all thank you for your fluent explanation , there is an issue when i want to install popper could you help me ?
Hi Mahsa. Whats the issue you are facing? Can u pls elaborate more? Whats not working?
@@ARCTutorialshi , tnx for replying , actually i think the problem solved, it was about that >>> npm i popper command did not work and i used command >>> npm install @popperjs/core --save
Hello sir, I managed to do follow everything in the video in regards to popper, jquery & bootstrap. I even managed to compile successfully, but whenever I go to the localhost:4200 it does not display the message “Welcome to Bootstrap Framework in Angular”? what exactly could be the error?
same here
How can we install boot strap u have directly shown the page
Hi Archana. Can u pls tell what issue ur facing? How can i help you
Hi Sir
i installed the angular11 version and installed the bootstrap using npm.
after installed the bootstrap i restarted the application.
however bootstrap not working in my application.
could you pls help me sir.
Thx.
Hi Whats the error you are seeing? Did you stop and start the ng serve command again?
Sir after copy pasting the links in index.html file when I'm seeing the output color is not coming in the output page
hi, when I run this command npm i bootstrap jquery popper --save, I am getting warnings and npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
many errors like above.
Hi Prajna. Pls try installing them individually like npm i jquery -save
@@ARCTutorials thank you
Hi, I am facing the below issue when trying to install the bootstrap jquery popper
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.
Hi Sirisha. Install them individually. Popper js changed so thats y ur getting the error
bootstrap is installed but can't see the bootstrap and jquery under package json
I think, in Angular.json file, need to place CSS libraries above the existing global css file called "Styles.scss". Which helps to we can override existing styles of css libraries. Please, provide me you're feedback on this in ASAP
Thats correct prakash 👍
Hello sir, After installing successfully and changing scripts in angular.json i am getting the following error pls can u clarify what i should do
Error: Schema validation failed with the following errors:
Data path "/scripts/0" must be object.
Data path "/scripts/0" must match pattern "\.[cm]?jsx?$".
Data path "/scripts/0" must match exactly one schema in oneOf.
Hi sir
I'm trying to install boostrap but it showing error like this package no longer supported and has been deprecated and in node_module after that only boostrap folder is showing under boostrap subfolders are not showing
and I'm also trying
Npm i boostrap@next command to install next version but it showing
Npm error code ETARGET
Npm error notarget no matching version found for boostrap@next.
Npm error notaries in most cases you or one of your dependencies are requesting
What should I do??
It's not working bcoz it's the old process. Now you have to run a command: ng add @ng-bootstrap/ng-bootstrap
Is there any way/possible to drag and drop the script files to angular.json page?
Sorry i didnt get your question. Can u pls elaborate?
@@ARCTutorials How we can drag and drop script files in our HTML page like that is possible in angular. JSON page
Hi boss I'm getting an error while installing the bootstrap frame work...plz help
hi boss I'm getting an error while installing bootstrap frame work...so plz help me to overcome the issue
Hello , Popper is not working for me instead popper.js is coming in script tag it is showing invalid address of popper. While i try to install popper by npm install bootstrap popper --save it is giving me errors I'm using "bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"popper.js": "^1.16.1", This are details i can see in dependencies Kindly help. Thanks
You do not show what happen on. New page for whom we are working
how to get to know the version of bootstrap?
I'm getting error after run this command ... Could you explain
downloaded bootstrap but nothing changed in package.json
Hi Rasplili. Can you pls send me screenshot of issue at soorya.aaradhya@gmail.com
@@ARCTutorials thank you, it is worked later
I am getting the following error when i try to issue the following command in my project folder command prompt
C:\Angular 10\crpapp>npm i bootstrap jquery popper --save
Error:
C:\Angular 10\crpapp>npm i bootstrap jquery popper
--save
npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 =4
Looks like you got lower version of Node. You will most likely need to upgrade. Just go to Nodejs website and download the latest stable version
I need the notes which you write?
Update a Angular 11 for beginner
Sure i will cover live project on Angular 11 very soon
bro i am getting error bootstrap file doesn't exist
Nima mat
Hi, Im facing an issue while installing bootstrap. Its showing like this in the terminal.
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.
Hii ,Im getting below error after installing bootstrap popper
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
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Local
pm-cache\_logs\2023-02-04T07_07_00_555Z-debug-0.log