How to Install and Set Up Angular 9 on Windows 10

On February 7th, 2020, a new version of Angular is released which is Angular 9. A lot of new features and performance improvements are introduced with this release.

I am not entering to the explanation of new features in Angular 9 but listed out some of them below.

• Ivy – This is the next-generation compilation and rendering pipeline introduced by Angular with this release.
• Smaller bundle sizes- Small apps and large apps can see the most dramatic size savings in Angular 9.
• Faster testing- implemented an improved version of TestBed in Ivy to make it more efficient.
• Better debugging- Ivy provides you with more tools to debug the application.
• Improved CSS class and style binding – Handling styles is now easier with Ivy compiler and runtime.
• Improved type checking- Now Angular compiler can apply strict rules when coding an app which reduces the bugs in a team project.
• Improved build errors – All the error messages are now easier to read.
• Improved build-time – Now building a project is faster compared to the previous version.
• Improved internationalization – You can build the application once per locale and receive highly optimized and localized applications.

Install Angular 9 on Windows 10

If you are a visual learner, please follow steps in the following video.

For others, please follow the below steps to install Angular 9 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 current stable version of Node.js can be downloaded and installed from the official website that is given below.

https://nodejs.org

You can see two versions on the main page. The stable version and the latest version. The stable version is recommended for most users. Currently, 12.16.1 is the stable version of Nodejs and we need to download it.

It downloads an exe file to your system. Now install it on your system. If there is any doubt, the screenshots I provided below will help you.

1. Start the installation wizard – The first step is to start the installation wizard by running the installation file.

2. Accept the license agreement – Now accept the license agreement and click Next.

3. Choose the installation directory – AS default, the Node.js installed in the Program Files directory. If you are preferring another, it can be chosen from this step.

4. Select the features – We can customize the features to be installed with Node.js. But here, we don’t need to bother about it. Just click Next.

5. Install tools for Native Modules – In this step, you can optionally install tools like Python2, Visual Studio Build Tools, etc. Just skip and click Next.

6. Start installation – Now click the Install button to start Node.js installation.

7. Finish the installation – After a successful installation close the installation wizard by clicking the Finish button.

Now, verify Node.js and NPM are installed on our system. Open Command Prompt and check the Node and npm versions with the below commands. You can see the versions as it shows in the below image.

Note:- If you don’t know how to open Command Prompt, Press Windows key in your keyboard and search for “cmd”.

node -v
npm -v 

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

This will ask you a question.

Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics.

You can either agree or disagree with the question. Press y and Enter for agreeing and n and Enter if you are disagreeing. This answer won’t affect the Angular installation.

3. Creating a New Angular Application

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

ng new awesome-project

This will ask you two questions.

1. Would you like to add Angular routing?

If you are preferring t to create a multi-page website, then press y. If you are not, then choose n.

2. Which stylesheet format would you like to use?

Choose any stylesheet format that you are familiar with. Here I chose CSS.

4. Running Our App

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

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 address http://localhost:4200.

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

Summary

So, we have discussed the steps to install Node.js in our Windows 10 system and installation on Angular 9 using NPM(Node Package Manager).