Create Your First Angular Application

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. 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.)

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.)

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.)

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)

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)

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.

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

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

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

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.

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

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