Create Your First Angular Application
Tags: angular, javascript, programming, webdev
Published: 2021-06-03 16:14:03

Hi guys! I am going to explain you to how to setup your local environment and workspace for create your first Angular application locally using Angular CLI tool. Simply following my steps finally, you can create Angular applications and configure application yourself. I am using my Windows pc to show you to understand the commands I used to create Angular application.

## **Step 01**

**Before create application there are some prerequisites.**

**1. You should be familiar with following.**

_JavaScript_
_HTML_
_CSS_
_TypeScript (Not required)_

**2. To install Angular on your local system, you must install following.**

**_Node.js (Version: Current, Active LTS or Maintenance LTS)_** 

You can  download and install Node.js follow this  [link](https://nodejs.org/). If you already installed Node.js you can run this command on terminal window.

    node -v

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hyk31nplbuckk2mhq0c.png)


**_NPM package manager_**

Normally npm package manager installed with Node.js by default. To check that you have the npm client installed, you can run this command on terminal window.

    npm -v

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voqit1ia6c1hryfdtdg8.png)

## **Step 02**

**Now install the Angular CLI on your pc.**

Using Angular CLI you can create project, generate application and library code, and variety of development tasks such as testing, bundling, and deployment. To install Angular CLI, use this command on your terminal window.

    npm install -g @angular/cli

When installing Angular CLI, you get question as this ‘’Would you like to share anonymous data with the Angular Team …”. In my opinion I preferred ‘No’. Doesn’t matter answer is YES or No. You can choose your opinion.

Then you should see the image as below. (Do not consider the version in screenshot. Maybe it changes when you create application in future.)

![Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi81hyq45f77mjsl217n.jpg)

## **Step 03**

**Create a workspace for your new application.**

First you have navigate where you want to save your Angular application. Then you must open terminal window for that particular location. Now you can use this CLI commands to create new workspace for your application.

    ng new my-application-name

**my-application-name** is name of your application.

**ng new** command prompt question you for about features to include in your application. Then Angular CLI installs the necessary Angular packages and other dependencies in application workspace. This can take some time to install.

When you run ng new command, you get the question as below. For this question I preferred ‘y’(YES) as the answer. Because that answer is best option for that.

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/strict (y/N)

![Image 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky3qo2i2huinwqz0h6co.png)

Then you get the question as below. For this question I preferred ‘y’(YES) as the answer.

? Would you like to add Angular routing? (y/N)

![Image 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdtyn62iqdugczjw2muo.png)

Then you get the question as below. For this question you can chose what style sheet language you going to use your application. You can use keyboard arrows to choose an option.

![Image 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d44pvytin6wya0vnzrw.png)

After answered all those questions, packages installation start. You should see the image as below.

![Image 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc906grvvr5tvwqqm9mf.png)

After few minutes later you should see the image as below.

![Image 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67w8pf6j24h188nvc4wx.png)

Now you created your Angular application without any errors.

## **Step 04**

**Run your Angular application.**

Using Angular CLI server, you can build and serve your application locally. First you have to navigate to the application workspace folder. Run this command on your terminal, that you create application before.

    cd my-application-name

![Image 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4x9q19q45fx82e1z6nt.png)

Then run ng serve command to launches the server, watch your files, and rebuild your application.

    ng serve --open

(--open or -o for automatically open your application on browser to http://localhost:4200)

After run this commands you should see the image as below. And browser should open automatically to your application.

![Image 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoe3awcnhosrp5yqb8ho.png)

If you install and setup was successful, you should see the image as below.

![Image 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyzdktb66v1gp679nt7h.png)

Congratulations! Finally, you created your first Angular application. Some useful command and reference documentation links below for you.

**New component**

    ng generate component xyz

**Angular Material**

    ng add @angular/material

**Add PWA Support**

    ng add @angular/pwa

**Add Dependency**

    ng add _____

**Run and Watch Tests**

    ng test

**Build For Production**

    ng build –prod

**Reference documentation links.**

https://angular.io/docs
https://angular.io/tutorial
https://angular.io/cli
https://blog.angular.io
https://docs.npmjs.com

So I hope you understand how to create Angular application locally. Thank you! Happy reading.

**#Angular #Programming #JavaScript #WebApplication**