Steps to Install Angular in Windows 10

Show:

November 18, 2021 Programming

Angular has fast become one of the most popular frameworks used by software engineers worldwide. It is an open-source front-end framework that works on typeScript. It is believed to be highly compatible to use and develop high-end dynamic and static web pages and applications. The latest version, Angular 11 was launched in early 2020 and is already gaining a lot of popularity given the multiple advantages that it offers over the older versions and other frameworks.

Here we are going to learn how to install angular on Windows. Now considering that the most widely used windows version is now Windows 10 we will give you the steps accordingly. Once you have completed the installation steps you will be able to create a perfect environment to develop web applications and pages with varied experiences.

Steps to follow

1. The first step is to install Node.js

Once you have installed Node.js it will help to provide the angular base to create the various environments.

i) visit the Node.js page and download the latest version of Node.js window installer.

ii) Go to the download location and double click on the windows installer package.

iii) On the Node Js setup wizard screen click on Next tab.

iv) On the End-user license agreement screen click on the Accept button and then click on Next once it is highlighted.

v)You will be taken to the Destination folder where you have to choose a custom location for Node.js. and then click on Next.

vi) You can customize the installation of the various features and sub features of Node.js and then click on Next tab.

vii) In the tools for Native modules window you can select the tools that you want but please keep in mind that additional space will be required to install these tools. You can either click on the auto install tab which will automatically install all the necessary tools that are needed for native modules, or you can click on the link that will be given to follow the instructions to install each dependency yourself. Once you have made your choice click on the Next tab.

viii) In the next screen you click on the Install tab in case you are fine with the settings you have chosen in the previous screens.

ix) Once installation is complete the setup Wizard will show you the Completed screen and you can click on Finish to exit the wizard.

x) Now you can access the windows command prompt to check if Node.js (Node.js v12.18.3) has been installed.

xi) To confirm that it is the NPM version is 6.14.6 you can use the following command “npm -v”. You will see the version id on the output window.

2. The second step is to install TypeScript

One of the major advantages of Angular is the use of TypeScript which makes it very easy to understand JavaScript and maintain it. TypeScript can be installed as an NPM package. While this is not really a mandatory requirement for Angular it does simplify the framework.

i) Go to the Windows Command Prompt and type “npm install -g typescript” to install TypeScript.

ii) As always once the installation is completed make sure that you verify the TypeScript version is 4.0.2 with the command “tsc -v“

3. The third step is to Angular CLI

The NPM package manager will let you install the Angular CLI or the command in Line interface. The CLI allows you to manage your Angular interface and helps you to initialize and develop applications.

i) To install Angular CLI go to windows command prompt and enter the command “npm install -g @angular/cli“

While you are installing Angular CLI you will be asked if you would be willing to share your usage date with the Angular team. You can opt to share with a Yes or decline with a No. Either way the functionality of the application will not be impacted.

ii) As always verify the installed version is 10.0.8 with the command “ng –version“

4. Test by creating an Angular project

Before you are sure and start using the framework to create your professional applications it is always a great idea to try and test out the framework with a pseudo project. Let’s say we initiate a project named Dining-table then you need to type in the command “new ng Dining-table” on the Windows command prompt page.

You can customize the application by answering specific questions with the answers as per your choice. Select whether you would like to use Angular routing and which stylesheet format you wish to use.

It will take a few minutes to create the project by the system. Once it is created you will see the message “Packages installed successfully“

You will be able to access the root folder of your project “Dining-table” by typing in the command “ng serve” on the Windows Command Prompt.

The system will generate the chosen environment to develop the Angular application. You need to keep the Windows Command Prompt running and you can continue to use the terminal and whatever changes you will be making, it will be visible in the application within the browser you are using. Additionally, you can use any browser to access your Angular development server on localhost:4200 (https://localhost:4200/).

Your Angular Framework is now ready for use to develop outstanding applications with an exclusively responsive interface.

Conclusion

Once all the steps are completed and you have tested the environment you are ready to go and build the most responsive interfaces. It is important to note that Angular has gone through quite a bit of evolution since it was first launched. It is advisable that you stay up to date with the latest versions and keep abreast of the newest technologies that are being introduced. Angular is widely getting accepted now due to the ease in development and the highly responsive interface it helps in building. The best way to develop a hand on the framework is to keep working on it and you are sure to understand the in-built features and options that enhance the experience in working with the framework.

About the author:

Manasa has extensive experience with Inbound marketing for various industries like eCommerce, Manufacturing, Real-estate, education, and advertising. Having worked with a reputed digital marketing agency in Bangalore, she has a stronghold on digital content creation, SME acquisition, and White hat link building techniques. She has hands-on experience in Influencer marketing and worked with International influencers and content writers.

Linkedin – https://www.linkedin.com/in/manasa-shre/

Twitter – https://twitter.com/jootoor

Facebook – https://www.facebook.com/JootoorDesigns