How to Setup Angular CLI

Angular is one of the third top front-end frameworks in 2020. Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google.

In this tutorial we are going to show you a step by step guide to setting up your environment for Angular development and a simple hello-world application.

Install Node.js

To install Angular on your local system, you need to have:

•  Node.js installed in your machine

Go ahead and download the Node.js from Recommended For Most Users tab (I have downloaded macOS).

After you finish installing Node.js, open up your terminal and type:

• node -v

You should be able to see the version of the Node.js that you have installed.

Install the Angular CLI

Open your terminal and type:

• npm install -g @angular/cli

This will install the latest version of Angular for you. Again installing Angular CLI, in your terminal type:

• ng --version

You should be able to see the version of the Angular CLI that installed.

If you want to install a different version of Angular, for instance I have Angular CLI 9, type:

• npm install -g @angular/cli@9

Once you are done installing Angular, we will now create a workspace and initial application.

Create a workspace and initial application

To create a workspace from the terminal run the CLI command ng new and give it the name you like:

• ng new hello-world

For example, the name of your application will be hello-world.

After that, you might be asked some questions like:

Angular Routing is for when you want to use Angular routes in a single-page application. If you want this to be setup for your application you should answer y(yes), but we don't need that at this stage. So just type N(No).

The next question is about the stylesheet:

Select CSS and hit Enter. It should take a while to initialize the application. 

Run the application

In the terminal go to your application(project) directory and type:

• cd hello-world
• ng serve 

The ng serve watches your files, and rebuilds the application as you make changes to those files.

Open your favorite browser and type http://localhost:4200/

If you can see this, Congratulations! You have successfully created your first project in Angular.