Angular Project Setup in Visual Studio Code

  Рет қаралды 256,460

DHub

DHub

5 жыл бұрын

#Angular #GitHub #Node
Complete guide to setup and configure -
1. Visual Studio Code
2. Node JS and NPM (Node Package Manager)
3. Angular 7 CLI (Command Line Interface)
4. GitHub repository using GitHub desktop
Also create first Angular 7 application and see it working in real time!!
Useful links:
Visual Studio Code : code.visualstudio.com/download
Angular CLI : cli.angular.io/
Node JS Download : nodejs.org/en/
My GitHub Account : github.com/hrabhijith
GitHub Desktop download : desktop.github.com/

Пікірлер: 140
@rajasekharreddyg4704
@rajasekharreddyg4704 2 жыл бұрын
As a beginner, I'm very comfortable to start Angualr with help of your video... thanks for your support !
@tejasreegudi5659
@tejasreegudi5659 3 жыл бұрын
Tquu sir ,after watching so many vedios ,I got clearcut download method through ur vedio ,for beginner it is awesome sir.
@Smilieface2k9
@Smilieface2k9 2 жыл бұрын
Thank you so much for the help! I am excited to see the new upcoming tutorials, you did a great job explaining things which is great getting back into using Angular! :)
@nallidremylc
@nallidremylc 3 жыл бұрын
Great introduction video, very informative!
@sushanttudu8901
@sushanttudu8901 4 жыл бұрын
I got help to start with Visual Studio Code, Angular CLI, Node JS. Please upload more videos
@sawamuradaichi248
@sawamuradaichi248 3 жыл бұрын
thank you so much bro. It helped me to get started in angular.
@anjalidarokar2408
@anjalidarokar2408 3 жыл бұрын
Life saving video.....!!!!! Thank you for this Sir.....!!!!!
@satyajeetkumar9223
@satyajeetkumar9223 Жыл бұрын
good work sir it is very helpfully to all student
@kalisettysaikumar7
@kalisettysaikumar7 3 жыл бұрын
thank you so much bro..............! very useful content nice explanation
@agarShiv2020
@agarShiv2020 4 жыл бұрын
*Great tutorial love it🙏*
@saivaraprasadarao6990
@saivaraprasadarao6990 Жыл бұрын
very well explained , Thank you dear!
@saidivyam5204
@saidivyam5204 2 жыл бұрын
very helpful,informative
@jsalehinmodasiya6087
@jsalehinmodasiya6087 3 жыл бұрын
Thanks for Video! Its very helpful.
@aldrinaldrinald
@aldrinaldrinald 3 жыл бұрын
Wonderful. It's working ❤️
@secretofallthings6962
@secretofallthings6962 2 жыл бұрын
sir you are my life saver😊😊😊
@NOURTCS
@NOURTCS 3 жыл бұрын
Thank you are Great Man prefect Details
@Habesha
@Habesha 2 жыл бұрын
thanks brother it was very helpful
@noothansh8195
@noothansh8195 3 жыл бұрын
Thank you so much this video helped me here by I am subscribkng ur channel
@theplugsa7773
@theplugsa7773 Жыл бұрын
Thank you my man all love
@kishorejammi274
@kishorejammi274 4 жыл бұрын
Thank you so much bro
@datenshi230
@datenshi230 2 жыл бұрын
Thx for explanations
@amakanicoleeguzoro6096
@amakanicoleeguzoro6096 3 жыл бұрын
This was so helpful
@lakshminarayana3356
@lakshminarayana3356 4 жыл бұрын
Thanks brother for a nice explanation. Very useful to the beginners.
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe if you haven't done it already!
@dhanalakotikeerthivarma4250
@dhanalakotikeerthivarma4250 2 жыл бұрын
when I type ng new firstApp, installing packages(npm) message is blinking how to resolve this thing?
@lokeshreddy9893
@lokeshreddy9893 3 жыл бұрын
in my visual studios giti not recognised internally and externally so how can we solve that bro,and also explian how to open a TERMINAL when we open a components.ts ....
@sstilsons
@sstilsons 4 жыл бұрын
Thank you! I had a problem and this video solved it! :-)
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Hope you subscribed! If not, would you please?
@sstilsons
@sstilsons 4 жыл бұрын
Yes
@projavadevelopers
@projavadevelopers 3 жыл бұрын
ng command is not supported after installing angular cli
@meghnam7918
@meghnam7918 3 жыл бұрын
thankyou so much 👍
@swaroopkulkarni9961
@swaroopkulkarni9961 Жыл бұрын
Thank you sir.
@tanyasrivastava6921
@tanyasrivastava6921 2 жыл бұрын
Helpful video
@prachikate545
@prachikate545 3 жыл бұрын
Thank you so much
@shruthigowda7934
@shruthigowda7934 2 жыл бұрын
Hi sir it was helpful can you upload still more videos
@AhamedKabeer-wn1jb
@AhamedKabeer-wn1jb 4 жыл бұрын
Thank you so much bro....
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe if you haven't done it already!
@anjaliraj3842
@anjaliraj3842 3 жыл бұрын
Sir I got error, one more q I want to know about how to edit in c like in my laptop after users there is hp visible and i cant edit on that please help sir how can i overcom from this problem
@yazervlog5031
@yazervlog5031 3 жыл бұрын
Hello there... Thank you for your video... Im getting this error ( Unknown error: SyntaxError: Unexpected token 'export' ) when i create ng new firstApp... please help me... Im using windows 7. Thanks....
@Theycallmechari007
@Theycallmechari007 3 жыл бұрын
"The Schematic workflow failed. See above." this the error while creating firstapp please help
@amishagoel2883
@amishagoel2883 3 жыл бұрын
for me its showing only 12 packages added for angular cli
@alokranjantripathy9978
@alokranjantripathy9978 4 жыл бұрын
C:\Users\BAPUN>npm install -g @angular/cli 'npm' is not recognized as an internal or external command, operable program or batch file. how to settled this error?
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
The below video shows how to solve the same error but for Java. You need to do the same thing. Find the npm .exe in your pc and add the environment variables. Restart command line afterwards. kzfaq.info/get/bejne/mrmfZ7pkyMewcpc.html
@abhichohan8837
@abhichohan8837 3 жыл бұрын
Thanks for good information! I need help: when I run 'ng serve' command from VS code terminal or even via powershell it gives me red line written: 'You seem to not be depending on "@angular/core" and/or "rxjs". This is an error' How to fix this? please help!
@abhichohan8837
@abhichohan8837 3 жыл бұрын
I fixed it!! for other users: run command at same path: "npm link" then run: "ng serve"👍
@sowmyah.s.81
@sowmyah.s.81 5 ай бұрын
​@@abhichohan8837I didn't get
@AmbarDudhane
@AmbarDudhane 4 жыл бұрын
It was helpful
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe and support!
@piyushpatil4604
@piyushpatil4604 2 жыл бұрын
Thank you
@manitejavanam5047
@manitejavanam5047 2 жыл бұрын
Hyy broo is internet required to run angular code??
@gottipatiashok7298
@gottipatiashok7298 2 жыл бұрын
Bro how to choose in firstapp in your computer
@user-yt2nt1me1w
@user-yt2nt1me1w Жыл бұрын
Sir browser pr open nhi ho rha hai local host did not send any data, this page is not working
@akashlandge6739
@akashlandge6739 Жыл бұрын
I don't have the path how to add it can you help
@versatileakash9004
@versatileakash9004 4 жыл бұрын
sir 5:11 enter pr error show kr rha what 's wrong with that ?????
@janarthanan5957
@janarthanan5957 4 жыл бұрын
Thanks bro
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe if you haven't done it already!
@nishitadash971
@nishitadash971 4 жыл бұрын
i tried out everything that u told but i ended up in an error saying : npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm install -g @angular/cli@latest + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], Comma ndNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Reinstall node js. And try again
@ChizMoraga
@ChizMoraga Жыл бұрын
i have same error i do reinstall the nodejs and not include core manager in installation and it works
@Oh_Deardiary
@Oh_Deardiary 2 жыл бұрын
i am not getting administration after the user 5:57. need help
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
Can you please give details of the issue?
@parigupta9673
@parigupta9673 4 жыл бұрын
After ng new firstApp I'm getting an error npm ERR! Unexpected end of JSON input for parsing near '....vhuf0Zoww01SgOt2Rm3th' How do i solve this.
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Try the below steps. Hope it works. Using following commands to uninstall : npm uninstall -g @angular/cli npm cache clean --force To verify: ng --version /* You will get the error message, then u have uninstalled */ Using following commands to re-install : npm install -g @angular/cli
@parigupta9673
@parigupta9673 4 жыл бұрын
@@DevelopersHubChannel Thank you. That helped.
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
I hope you subscribed..if not, would you please subscribe :-)
@Theycallmechari007
@Theycallmechari007 4 жыл бұрын
when creating new project file ng new covid the following error is coming pls find me the way to resolve this ng : File C:\Users\charan teja kasa\AppData\Roaming pm g.ps1 cannot be loaded because running scripts is disabled on this system.
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Run the below command in cmd or powershell command line and rerun your command. Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted
@Theycallmechari007
@Theycallmechari007 4 жыл бұрын
@@DevelopersHubChannel problem solved thank u bro
@asyiqinmahmud2764
@asyiqinmahmud2764 4 жыл бұрын
how to open existing project in VS code , did i need to type the npm -g @anglular/cli again ? PLEASE ANSWER THIS QUESTION .tq
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Thanks for asking!!. First thing, running the "npm install -g @angular/cli" is different than opening an existing Angular project folder. When you run the above command you are actually telling the NPM(Node package manager) to install Angular CLI(Command line interface, which allows you to run Angular related commands in terminal. Eg. "ng"). But when you open an existing folder from your computer it is just like opening a video in video player. However, in VS code you can open a folder by navigating to File->Open Folder->"Select the folder which you desire".
@asyiqinmahmud2764
@asyiqinmahmud2764 4 жыл бұрын
@@DevelopersHubChannel alright thankyou :)
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe if you haven't done it already!
@Theycallmechari007
@Theycallmechari007 4 жыл бұрын
project is not compiling it is showing AS BELOW The serve command requires to be run in an Angular project, but a project definition could not be found.
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Few others have also reported this problem. Make sure you are running 'ng serve' inside angular project where angular.json resides. Also try running 'npm install' and then retry.
@Bhaskarriazz
@Bhaskarriazz 2 жыл бұрын
My app roaming npm cannot be loaded is not digitally signed ...what I do now please tell me
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
stackoverflow.com/questions/66288653/i-am-trying-to-make-ng-serve-but-i-got-this-error-in-terminal
@kuldeeptripathi4558
@kuldeeptripathi4558 Жыл бұрын
can we push code by using command of git via terminal of vscode .....git add . git commit -m "first commit" git push origin master
@DevelopersHubChannel
@DevelopersHubChannel Жыл бұрын
Yeah..you can...the terminal in VS code can be PowerShell, cmd, git, etc...it detects commands and adapts to it....so you can basically run any command line tool which is installed in that computer from VS code terminal.
@avidreader6534
@avidreader6534 3 жыл бұрын
HELP?! i use the cmd ng new project and whenever it starts to create a new project, its missing the e2e folder with its components so I cant serve it !!! does someone know how to fix this please?
@leetruong7810
@leetruong7810 2 жыл бұрын
Same problem here.
@avidreader6534
@avidreader6534 2 жыл бұрын
@@leetruong7810 I ended up learning react because I haven’t heard of any solution for this lol
@shankerreddy2764
@shankerreddy2764 3 жыл бұрын
when creating angular app then getting this error pls pls help me bro error An unexpected error occurred: "registry.yarnpkg.com/rxjs/-/rxjs-6.6.2.tgz: ESOCKETTIMEDOUT". × Package install failed, see above. The Schematic workflow failed. See above.
@shankerreddy2764
@shankerreddy2764 3 жыл бұрын
@Developers Hub bro help me this bro
@sanjanabv9333
@sanjanabv9333 2 жыл бұрын
I am unable to add local repository " This directory does not appear to be a Git repository. Would you like to create a repository here instead?"
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
Use "git clone" to import an existing project or use "git init" to initialize a new project folder and then use "git remote add" to tag it to a remote reposotory, eg. GitHub.
@sanjanabv9333
@sanjanabv9333 2 жыл бұрын
Thank you 😊
@knocktheblogworld1270
@knocktheblogworld1270 4 жыл бұрын
sir i am tired lot but the eacce error show. plz help me sir
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please paste the entire error log here.
@hemanthchowdary7162
@hemanthchowdary7162 2 жыл бұрын
Sir I need help from you I mailed you 5 times but no response sir......I installed one angular project from Git hub but in my laptop not running using ng serve can you please help me to sort this thing
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
If you download an angular project from Github, first this is to run 'npm install' inside the project root path. The required packages for the app will be installed. Then run 'ng serve'
@hemanthchowdary7162
@hemanthchowdary7162 2 жыл бұрын
@@DevelopersHubChannel sir can you give your contact details please
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
404notfounddevelopers@gmail.com
@kids6130
@kids6130 5 жыл бұрын
how to run the project on git hub without downloading. Is this possible?
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
To run any code you need a computer. The computer could be your PC or a Virtual Machine (Cloud). Either you can download code to your PC or a VM manually and run or you could set an automated process (Jenkins) to download the code from GitHub and run it in your PC or a VM. I think the process you are thinking is not possible without an additional plugin to Github .
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Please subscribe if you haven't done it already!
@rishithainturi9650
@rishithainturi9650 4 жыл бұрын
ng serve this command requires to be run in Angular project, but project definition could not be found
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Check if you are running 'ng serve' command inside the Angular project folder, in the sense where index.html resides.
@rishithainturi9650
@rishithainturi9650 4 жыл бұрын
@@DevelopersHubChannel yes i did and i have used npm install -g @angular/cli then ng serve
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
So, you installed angular cli. Then you created new angular app 'ng new appname' , then 'cd appname' and then 'ng serve'?
@rishithainturi9650
@rishithainturi9650 4 жыл бұрын
@@DevelopersHubChannel actually i have a real time code in my work area i used tomcat but never did Node JS now have a requirement for Node yes i did i am getting a weird error if that is rectified then getting this error but i am failing at ng serve
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
'ng update --all --force' Run the above command and try 'ng serve'
@ItzMeEGGSY
@ItzMeEGGSY 3 жыл бұрын
Sir i need to contact you for a big problem
@DevelopersHubChannel
@DevelopersHubChannel 3 жыл бұрын
404notfounddevelopers@gmail.com
@versatileakash9004
@versatileakash9004 4 жыл бұрын
sir path kaise set or edit krenge ?????
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Glad to hear from you.. this is a common error i guess.. check other comments and if your error is mentioned there, i would have definitely answered that. If not, put your error log here, i will help you.
@SankarJankoti
@SankarJankoti 2 жыл бұрын
What do u mean by npm install
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
NPM - Node Package Manager In an existing project, When "npm install" is executed, the dependencies mentioned in the package.json file is downloaded or updated. And will be available in "node-modules" folder.
@SankarJankoti
@SankarJankoti 2 жыл бұрын
@@DevelopersHubChannel thank you
@SankarJankoti
@SankarJankoti 2 жыл бұрын
How to find which version angular is used in code?
@raziyashaik7145
@raziyashaik7145 4 жыл бұрын
npm WARN deprecated request@2.88.2: request has been deprecated, see github.com/request/request/issues/3142 " I am getting this error can you please tell me wjy I am getting this and how to resolve this??
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Try the below steps. Hope it works. Using following commands to uninstall : npm uninstall -g @angular/cli npm cache clean --force To verify: ng --version /* You will get the error message, then u have uninstalled */ Using following commands to re-install : npm install -g @angular/cli
@raziyashaik7145
@raziyashaik7145 4 жыл бұрын
@@DevelopersHubChannel no I got the same error
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Can you give details about it. Like after which step you got this error and the complete error log. The log which have posted is incomplete i guess, it must have more details.
@raziyashaik7145
@raziyashaik7145 4 жыл бұрын
@@DevelopersHubChannel after installation of node js VS -> terminal-> npm install -g @angular/cli@latest /* here I am getting the deprecated request error */ -> Its showing like file already exists -> when I try to find the version then it is showing the error (ie. Cannot find module) -> then I tried to uninstall and installed again using ' ng install -g @angular/cli ' then also I am facing the same issue
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Sorry. Its strange. Uninstall and install node again. It might help. By that time i will try to find out some solution.
@newjersey179
@newjersey179 3 жыл бұрын
Why si this useful?Can anyone help mein this.
@SHREYATIWARI-lk5rc
@SHREYATIWARI-lk5rc 4 жыл бұрын
Installing packages...npm WARN deprecated tslint@6.1.2: TSLint has been deprecated in favor of ESLint. Please see github.com/palantir/tslint/issues/4534 for more information. npm WARN deprecated request@2.88.2: request has been deprecated, see github.com/request/request/issues/3142 npm WARN deprecated chokidar@2.1.8: 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 deprecated urix@0.1.0: Please see github.com/lydell/urix#deprecatednpm WARN deprecated resolve-url@0.2.1: github.com/lydell/resolve-url#deprecated npm ERR! Unexpected end of JSON input while parsing near '...RJQfTQe/Ly+evwqbDrZK6' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\shreya\AppData\Roaming pm-cache\_logs\2020-06-01T19_50_03_896Z-debug.log × Package install failed, see above. The Schematic workflow failed. See above. this error occur please solve it
@DevelopersHubChannel
@DevelopersHubChannel 4 жыл бұрын
Try the below steps. Hope it works. Using following commands to uninstall : npm uninstall -g @angular/cli npm cache clean --force To verify: ng --version /* You will get the error message, then u have uninstalled */ Using following commands to re-install : npm install -g @angular/cli
@vairavelg5992
@vairavelg5992 2 жыл бұрын
I create project name and hit enter then it shows running script is disabled on this system . Roaming pm g.ps1
@DevelopersHubChannel
@DevelopersHubChannel 2 жыл бұрын
Answer is in the comments
БИМ БАМ БУМ💥
00:14
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 4 МЛН
Clown takes blame for missing candy 🍬🤣 #shorts
00:49
Yoeslan
Рет қаралды 44 МЛН
How to Run Node.js in Visual Studio Code | Node.js in VSCode
26:17
ProgrammingKnowledge
Рет қаралды 273 М.
Using Git with Visual Studio Code (Official Beginner Tutorial)
6:56
Visual Studio Code
Рет қаралды 1,2 МЛН
How to Set Up a Node.js Project
24:44
The Coding Train
Рет қаралды 66 М.
How To Run Angular in VSCode (Visual Studio Code)
4:56
Ghost Together
Рет қаралды 32 М.
How to Install React JS In Visual Studio Code
8:03
OnlineITtuts Tutorials
Рет қаралды 80 М.
How to set up C++ in Visual Studio Code
6:53
Kenny Yip Coding
Рет қаралды 578 М.
8 Товаров с Алиэкспресс, о которых ты мог и не знать!
49:47
РасПаковка ДваПаковка
Рет қаралды 169 М.
Rate This Smartphone Cooler Set-up ⭐
0:10
Shakeuptech
Рет қаралды 6 МЛН
Как бесплатно замутить iphone 15 pro max
0:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 8 МЛН
Копия iPhone с WildBerries
1:00
Wylsacom
Рет қаралды 8 МЛН