How to create Angular Application using Angular CLI

Hey readers! In this article, we will learn how to create Angular Application using Angular CLI. Before going through this article we recommend you to first go through this article Getting Started With Angular

So, let’s get started. Under C: Drive create a folder WorkSpace and a subfolder Projects. This is just to manage our work area. It’s better to create our working area first. If you already have a working space then use it.
Now open a command prompt in your machine and change the directory to your workspace/projects.

Workspace

Now let’s create an Angular Application naming HelloAngular using Angular CLI. Type the following CLI command in the terminal and press enter.

ng new HelloAngular

Ng New

Above Angular CLI command will create all the necessary files for you in few seconds. Once the creation of application completed successfully you will get this message.

Created Successfully

Using Angular CLI commands saves our time. Creating an angular application manually is time-consuming and error-prone. We will discuss Angular CLI and necessary commands in our upcoming articles.

The list of files that are created will look like this as given in the screenshot below. We will cover this files in our next article, for now first create a simple application.

HelloAngular Files

Once successfully application created change the directory to HelloAngular and type in the terminal code .(dot) as shown in the screenshot. This will open the HelloAngular application in Visual Studio Code.

VSCode

Now under src/app folder, you will find app.component.html. Open it and modify the content as given below.

<div style=”text-align: center;”>
<img src=”data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==” alt=”Angular Logo” width=”300″ />
</div>
<div style=”text-align: center;”>
<h3>Hello Angular</h3>
</div>

Back to the command prompt using angular CLI command we will run our application to check if everything is working fine.

ng serve

This command will compile our application and run our application on localhost:4200. Open your browser and type localhost:4200

You can also use following commands to run the application directly on the default browser.

ng serve -open
or
ng serve -o

Congratulations you have successfully created your application.

2 thoughts on “How to create Angular Application using Angular CLI”

  1. Pingback: Deploy Angular App On Tomcat Server - code-adda
  2. Trackback: Deploy Angular App On Tomcat Server - code-adda
  3. Pingback: Creating Angular Application using bootstrap - code-adda
  4. Trackback: Creating Angular Application using bootstrap - code-adda

Leave a Reply