Create New Angular Project on Windows

Angular

Here you will see how to install new Angular framework or update/upgrade the existing Angular version and how to create new Angular project on Windows environment.

Related Post:

I will use node.js and npm for setting up the new Angular project on Windows environment. If you are using different Operating System then you have to check the installation process according to your Operating System (OS), but I think the following commands should work on most of the OS.

Please make sure you have npm and node.js setup on Windows system before you proceed further.

Prerequisites

Knowledge of HTML, JavaScript and CSS

Please make sure you are running at least Node.js version 8.x or greater and npm version 5.x. You can check the version by running node -v and npm -v in a console(cmd) window.

Install/Update Angular

You can either install fresh Angular framework or upgrade/update the existing Angular version.

Install Angular

If you want to install Angular for the first time, open your cmd window (command line tool) and execute the following command. This will install Angular CLI globally.

npm install -g @angular/cli

If you get update notification for NPM update then you may consider to update your NPM globally. For example, while installing Angular you may see the following message for upgrading NPM:

npm update

You also see the command for upgrading NPM simply execute the command in the command line tool (cmd tool) to update the npm. You will see the updated npm after successful update.

Update/Upgrade Angular

There are two things for update or upgrade to the existing Angular version on your machine. You can either update to the latest minor version or latest major version.

First check the existing Angular version in your machine using the command: ng --version or ng version.

For Angular version 15.x.x or higher version, use the command ng version to check the version of Angular.

angular project

For Angular version below 15 use the command: ng --version.

install update Angular create Angular project

If you are planning to upgrade to the latest minor version then use the following command:

npm upgrade -g @angular/cli

The above command will update to the latest minor version:

install update Angular create Angular project

In the above image you see the existing Angular version 10.1.3 got updated to 10.2.2.

If you want to update to the latest major version then use the following command:

npm install -g @angular/cli@latest
install update Angular create Angular project

In the above image you see the Angular version 10.2.2 got updated to the major version 11.1.4.

Create Angular Project

Please go through the following steps in order to how to create new Angular project on Windows.

Step 1. Once the setup is successfully finished using the command at step 1, now create a new project at any directory as you wish. Navigate to the desired directory and execute the following command.

ng new angular-app

In the above command ng new is required to create new Angular application and angular-app is the Angular application’s root directory.

You need to select the style type CSS/SCSS and whether you want server side rendering or not:

angular project

Wait for few minutes to download all the required packages under your new project directory angular-app.

Step 2. Run the application by executing the following command. First navigate to the angular-app directory in cmd window (command line tool) then execute the following command.

cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the --open (or just -o) option automatically opens your browser at address http://localhost:4200/. Optionally you can also type the same URL in the browser to open your new Angular application once the app gets deployed.

Now you will see similar to the following image on your browser:

create new angular project on windows

Congratulations! Hope you have got an idea how to create Angular project on Windows environment.

What’s next?

You can edit your src/app/app.component.ts file and change your title. You can also edit src/app/app.component.css and give some style to your Angular application.

Hope you got idea how to create a new Angular project or upgrade an existing Angular project.

1 thought on “Create New Angular Project on Windows

Leave a Reply

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