How to Install and Setup Angular 7 on Windows 10

Image is loading...
Angular Windows8 Comments on How to Install and Setup Angular 7 on Windows 10

How to Install and Setup Angular 7 on Windows 10

Angular is a JavaScript open-source framework which helps in developing single-page web applications suitable for web/mobile/desktop. Angular supports the use of TypeScript instead of JavaScript in our project if we are familiar with it.

Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

The current stable version of Angular is 7.2.13 and we are going to explain the steps of installation of it on Windows 10 operating system.



Installation

For visual learners, the video below will help you to do this installation faster. It is completely based on this blog post.

For others, Please follow the below steps to install Angular 7 on Windows 10.

1. Install Nodejs

In this tutorial, we are going to install Angular CLI using the Node Package Manager(NPM). So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs.

So, the latest version of Node.js can be downloaded and installed from the official website. The URL is given below. Currently, 12.4.0 is the latest version of Nodejs.

https://nodejs.org

2.Install Angular CLI

Angular CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

It can simply be installed using NPM. So first, open our Command Prompt / Powershell and install the Angular CLI with the below command.

npm install -g @angular/cli

3. Creating a New Angular Application

We successfully installed Angular CLI on our system and now we can set up a workspace for Angular projects in our system and create a new app. This can be done with the below command.

ng new awesome-project

4. Running Our App

Now, the app we created can be run using ng serve.

cd awesome-project
ng serve --open

This launches the server, watches our files, and rebuilds the app as we make changes to those files.

The –open (or just -o) option automatically opens our browser to the below address.

http://localhost:4200

TechoTip: We recommend using Visual Studio code as the source-code editor for working with Angular projects.

Have a nice code !

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.
Website https://syam.me

8 thoughts on “How to Install and Setup Angular 7 on Windows 10

  1. Your setup instructions lack details. During the install on my windows 10 system I was asked questions to which I had to “guess” the appropriate response.

    The install of angular itself and the creation of the angular project took so much time it seems to me to not be a practical system

  2. ng serve –open
    returned:
    The serve command requires to be run in an Angular project, but a project definition could not be found.
    something is missing!

    1. First of all, you need to run this command inside your project directory.
      Still, you are getting this error, execute the below command to solve the issue.

      ng update @angular/cli --migrate-only --from=

      e.g.
      ng update @angular/cli --migrate-only --from=1.7.3

    2. Syamlal is assuming people reading this knows how move around with terminal or PowerShell. You are being prompted that because in the directory you are, there aren’t angular projects. You need to cd (change directory) awesome-project. I recommend you just write the first letters of “awesome” and then use tabulator for auto filling.

  3. I follow above all steps and check version of node npm and cli all are correct but when I run ng serve -o through my angular project getting blank page I don’t know why

    1. Thank you for reporting this issue. I think this error occurred due to a permission issue of your system. So please change the permission of your project directory and retry.

  4. I used these codes and successfully done.But after running ng new awesome-project I was asked for which css I selected the first then some roor I found. I selected other css and got result and done successfully. Please check If it asks for those 4 css after these step then you can mention that as one step. But I got my result. Thank you very much.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
%d bloggers like this: