How to Install Angular 17 on Windows 10/11 [ 2024 Update ] Demo Angular Project | Complete Guide

Поділитися
Вставка
  • Опубліковано 20 жов 2024
  • Hello Everyone! Today in this video I am going to step-by-step guide you on How to install Angular 17 on Windows 10/11. And then I will also show you how to create a simple Hello World project in Angular. Windows (64-bit).
    ► Follow me on Instagram: / geekyscript
    ► Subscribe to Geeky Script Vlog Channel: / @geekyscriptvlogs
    ► Subscribe to Geeky Syntax Channel: / @geekysyntax
    Geeky Script (
    @GeekyScript) is a Computer Science - Educational Videos Creator 🎉
    You can support us by buying a coffee ☕️ here -
    www.buymeacoff...
    ✻ I really hope you find this video useful. ♥
    ✻ Please click on the CC button to read the subtitles of this video.
    Now before installing Angular 17, you need to first install NodeJS in your system. So for that just go to step 1.
    Step 1: How to Download NodeJS?
    nodejs.org/en/...
    This page will lead to the NodeJS download page.
    Find the installation file (download the LTS version only) and click on it to download. Here is this video we showed how to download and install the NodeJS LTS version in Windows 10/11.
    Step 2: Install NodeJS LTS version
    Double-click to run the NodeJS download file.
    Step 3: Now after installing NodeJS in your system, it's time to install Angular. So for that open your command prompt and simply type:
    npm install -g @angular/cli
    Step 4: Now after installing Angular, you can create an Angular project by simply typing:
    ng new your-project-name
    Step 5: Now it's time to install VS Code. You will get a detailed video about VS Code here: • How to install Visual ...
    So How to install Visual Studio Code?
    First You need to download Visual Studio Code for Windows 10/11. For that just go to the following link:
    code.visualstu...
    This page will lead to the Visual Studio Code download page.
    Here find the exe setup installation file as shown in the video and click on it to download.
    Now after downloading Visual Studio Code save the file to the disk and follow the next step for installation.
    Step 6: Install Visual Studio Code
    Double-click to run the Visual Studio Code installation file. Just follow the prompt as shown in the video and install Visual Studio Code on your OS.
    #Angular17 #AngularInstallation #Angulartutorialforbeginners #Angulartutorial #Angularprogramming #Angularprogrammingtutorial #Angularbasicsforbeginners #Windows10
    Topics addressed in this tutorial:
    How To Download And Install Angular 17 On Windows 10 64-bit OS
    Install Angular 17 on Windows 10/11
    How to Install Angular 17 and Get Started
    ► Laptop I use:
    amzn.to/3NkBqbk
    amzn.to/4h67v48
    amzn.to/4f2sCmk
    ► Recommended Laptops (35k Range):
    amzn.to/3Nrn9JX
    amzn.to/4h27Ip6
    amzn.to/3zWWYri
    ► Laptops 50k Range:
    amzn.to/4f1F31t
    amzn.to/4h1MqrI
    amzn.to/3YmuZL6
    ► SmartPhones:
    amzn.to/3YwSa5D
    amzn.to/3NwqveF
    amzn.to/3A1f8Z9
    amzn.to/3A8ZZF5
    amzn.to/3A5bY6w
    amzn.to/3Nxpl2z
    ► Tablets:
    amzn.to/4f8Pxwi
    amzn.to/48e8V8M
    amzn.to/4dVuxbl
    amzn.to/4dMOsJm
    ► Rode Wireless Mike:
    amzn.to/3BEs47M
    amzn.to/3Yn4yoH
    ► Windows 11 Pro 64-Bit: amzn.to/3zSF7BX
    ► Windows 10 Pro 64-Bit: amzn.to/4h57Ynq
    ► Quick Heal Antivirus: amzn.to/49gnsAJ
    ► McAfee Antivirus: amzn.to/487Tgrp
    MY RELATED VIDEOS:
    ✻ All about WordPress: • Complete WordPress Tut...
    ✻ All about ECommerce WordPress: • How to Create a FREE e...
    ✻ All about Portfolio Website WordPress: • How To Make A Portfoli...
    ✻ All about Android Studio: • How to install Android...
    ✻ All about PostgreSQL: • How to Install Postgre...
    ✻ All about MongoDB: • How to install MongoDB...
    ✻ All about MySQL: • How to install MySQL 3...
    ✻ All about eBook: • How to Create an Ebook...
    ✻ All about React: • How to Install React o...
    ✻ All about NextJS: • How to Install Next.js...
    ✻ All about Angular: • How to Install Angular...
    ✻ All about Microsoft SQL Server: • How to Install Microso...
    ✻ All about Wamp: • How to Install WAMP Se...
    ✻ All about Visual Studio: • How to Install Microso...
    THANK YOU so much for watching!
    Please make sure to LIKE and SHARE the video and SUBSCRIBE to the channel for more such videos :)
    CONNECT WITH ME ON:
    ✻ Website: geekyscript.com/
    ✻ Instagram: / geekyscript
    ✻ LinkedIn: / geekyscript
    ✻ X: x.com/GeekyScript
    ✻ Email: geekyscript@outlook.com
    ✻ UA-cam channel: / geekyscript
    Affiliate Disclaimer: Some of the links above are affiliate (referral) links which means if you do click and purchase through them, then I may receive a commission. This helps support the free content on this channel.

КОМЕНТАРІ • 60

  • @GeekyScript
    @GeekyScript  11 місяців тому +7

    Did this tutorial help you to install Angular?
    Comment Now!! And let me know your opinion...
    And Please SUBSCRIBE for more! Also, you can Support my work through UA-cam Thanks!

    • @hishamalaa6001
      @hishamalaa6001 6 місяців тому

      a question please i hope you have an answer for it.
      I have installed it successfully but there is a problem, after building the project any changes in the index.html file doesn't detected and I always need to rebuild it again to see the changes.

  • @soaresbatistabruno
    @soaresbatistabruno 10 місяців тому +7

    the difference between this tutorial and the official one is that this one works.

  • @NikhilSharma-cu9ww
    @NikhilSharma-cu9ww 9 місяців тому +2

    thanku so much bro im suffering from last two days to install angular/cli in my pc and it gives me errors finally i get it into my computer, thankyu so much

    • @GeekyScript
      @GeekyScript  9 місяців тому

      Most Welcome! :)
      Also Subscribe to Geeky Syntax Channel: www.youtube.com/@geekysyntax/ and www.youtube.com/@GeekyScriptVlogs/

  • @touristguidebyanitha467
    @touristguidebyanitha467 11 місяців тому +6

    why app.module.ts file is not present in this version
    sir!!

    • @niranjanr5001
      @niranjanr5001 11 місяців тому

      Brother,do you find the reason

    • @mordred4931
      @mordred4931 10 місяців тому

      its a new update of angular

    • @pranavpagare0109
      @pranavpagare0109 7 місяців тому

      yes same issue with me can anyone gave me resone why it is not in this version

  • @itsManLikeChiko
    @itsManLikeChiko 7 місяців тому +1

    Thank you very much for this Tutorial, it was straight forward and well explained.

    • @GeekyScript
      @GeekyScript  7 місяців тому


      Also Subscribe to Geeky Syntax Channel: www.youtube.com/@geekysyntax/ and
      www.youtube.com/@GeekyScriptVlogs/

  • @prathameshmane1885
    @prathameshmane1885 11 місяців тому +3

    'ng' is not recognized as an internal or external command,
    operable program or batch file. Showing while creating a project any solution

    • @pranavpagare0109
      @pranavpagare0109 7 місяців тому

      brother your vs code is not project folder first write cd cammand and project name like that if i make a project car so i first create it by "ng new car " if project is created then write cammand " cd car "then you write "ng serve "so your project is redy

  • @yagnasri-d9w
    @yagnasri-d9w 11 місяців тому +2

    how to create a new component in these

  • @Sasikumar.vCSE118
    @Sasikumar.vCSE118 8 місяців тому +1

    Npm scripts is not visible

  • @durgeswarandurgeswaran5703
    @durgeswarandurgeswaran5703 9 місяців тому +1

    Actually angular 17 works well with angular materials but in tw elements meet issues . I couldn't understand the flow of tw elements with angular 17.

  • @tharunismily2095
    @tharunismily2095 4 місяці тому

    Sir after installing angular,i check the version using 'ng - version ' ,but it said ng is not recognised, what i do sir

  • @sonupambhanjadeo3010
    @sonupambhanjadeo3010 11 місяців тому +2

    So I think in latest version they're not providing app.module and app.routingmodule.ts . Or they convert app.module.ts file in to app.component.ts
    And app.routing module.ts in to app.routes.ts

    • @sonupambhanjadeo3010
      @sonupambhanjadeo3010 11 місяців тому

      I'm not sure but whenever m creating a angular project it only have app.component.ts and app.routes.ts
      .......
      Expect of app.module.ts or app.routingmodule.ts

    • @pari5931
      @pari5931 10 місяців тому

      ​@@sonupambhanjadeo3010AP ko solution mila

  • @sathyaPriya-xc4oi
    @sathyaPriya-xc4oi 8 місяців тому

    Hiii
    An unhandled exception occurred: The service was stopped
    See "C:\Users\admin\AppData\Local\Temp
    g-12Vak0\angular-errors.log" for further details.
    Could you please explain how to solve this error.

  • @divinejohnson5057
    @divinejohnson5057 8 місяців тому +1

    I followed your tutorials but didn't see npm script

  • @prasaddhasade3128
    @prasaddhasade3128 8 місяців тому +4

    npm script is not visible in vs

    • @4dvanced441
      @4dvanced441 4 місяці тому

      click on 'EXPLORER' and click on npm scripts, it worked for me

  • @himanitanwar5894
    @himanitanwar5894 9 місяців тому

    (If 'app-login' is an Angular component, then verify that it is included in the '@Component.imports' of this component.) Sir How to solve this problem in angular 17

  • @snigdharoy1938
    @snigdharoy1938 11 місяців тому +2

    Thanks 😊

  • @durgeswarandurgeswaran5703
    @durgeswarandurgeswaran5703 9 місяців тому

    Hi please put the vedio how to use tailwind elements with angular 17 and make anyone project. Also

  • @kenwaaaydemonnn
    @kenwaaaydemonnn 11 місяців тому +2

    Thanks!

    • @GeekyScript
      @GeekyScript  11 місяців тому

      Welcome!

    • @vamshikrishna7945
      @vamshikrishna7945 11 місяців тому +1

      ​@@GeekyScriptI have seen ur ardunio instalation software very nice explanation

    • @GeekyScript
      @GeekyScript  11 місяців тому

      @@vamshikrishna7945 awesome.. All the best for future :)

  • @divinejohnson5057
    @divinejohnson5057 8 місяців тому

    Npm script is not present in my Vs code environment sir
    But your tutorial is great
    Can you help?

  • @ziyashaik8963
    @ziyashaik8963 7 місяців тому

    npm script is not visible how to fix it

  • @KiranBijarane-jl8cw
    @KiranBijarane-jl8cw 6 місяців тому

    Thank you so much sir for this helpful video

    • @GeekyScript
      @GeekyScript  6 місяців тому

      Most welcome 😊 ❤
      Also Subscribe to Geeky Syntax Channel: www.youtube.com/@geekysyntax/ and
      www.youtube.com/@GeekyScriptVlogs/

  • @ynsemreaydin97
    @ynsemreaydin97 8 місяців тому

    Why ı cant create app.module.ts with cli? Thx for video

  • @gokulrajk1308
    @gokulrajk1308 2 місяці тому

    For me nom script not showing in down

    • @GeekyScript
      @GeekyScript  2 місяці тому

      u need to enable it.. there will be triple dots at the top. In my video I have shown this..

  • @dissonanceparadiddle
    @dissonanceparadiddle 4 місяці тому +1

    great video

    • @GeekyScript
      @GeekyScript  4 місяці тому

      Glad you enjoyed it! ❤ Also, watch Complete ECommerce tutorial ⏩ ua-cam.com/video/76E2QmjhRtQ/v-deo.html and WordPress Tutorial Playlist ⏩ ua-cam.com/video/qt2BQt7uPbs/v-deo.html

  • @vijayarajan-bt5fk
    @vijayarajan-bt5fk 9 місяців тому

    npm scripts not shown (10.18) in vs code what to do

    • @GeekyScript
      @GeekyScript  9 місяців тому

      no issues.. but did it installed Angular?

    • @aarthi1310
      @aarthi1310 7 місяців тому

      @@GeekyScript same issues bro and i have installed angular too

    • @GeekyScript
      @GeekyScript  7 місяців тому

      @@aarthi1310 just beside explore u will see triple dots (...) Click on that, and enable npm scripts.

    • @aarthi1310
      @aarthi1310 7 місяців тому +1

      @@GeekyScript Got it now...Thanks a lot😄

    • @GeekyScript
      @GeekyScript  7 місяців тому +1

      @@aarthi1310 Most welcome 😊 😊 ❤
      Also Subscribe to Geeky Syntax Channel: www.youtube.com/@geekysyntax/ and
      www.youtube.com/@GeekyScriptVlogs/

  • @divinejohnson5057
    @divinejohnson5057 8 місяців тому

    Yes

  • @hgk1021
    @hgk1021 8 місяців тому +1

    🙏🙏🙏🙏🙏😭

    • @GeekyScript
      @GeekyScript  8 місяців тому

      All the best :)
      Also Subscribe to Geeky Syntax Channel: www.youtube.com/@geekysyntax/ and
      www.youtube.com/@GeekyScriptVlogs/

  • @SpiderWolf
    @SpiderWolf 11 місяців тому +1

    what happened to app.module.ts file on this version?

    • @touristguidebyanitha467
      @touristguidebyanitha467 11 місяців тому +1

      Yeah in updated version they've removed it..
      But at first i thought its due to some computer error in mine 😜😂

    • @kailashyandrapu851
      @kailashyandrapu851 9 місяців тому

      Then where we need to import modules

    • @pranavpagare0109
      @pranavpagare0109 7 місяців тому

      @@kailashyandrapu851 how ?

    • @pranavpagare0109
      @pranavpagare0109 7 місяців тому

      @@touristguidebyanitha467 why ? can anyone gave me this solution

  • @rishabhLEO10
    @rishabhLEO10 9 місяців тому

    Those who are not getting app.module.ts file, when setting up project, open command prompt, type "ng new MyFirstProject - -no -standalone"

  • @raghadaljohani6838
    @raghadaljohani6838 11 місяців тому +2

    Thanks!