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.
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
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.
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.
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.
Now under src/app folder, you will find app.component.html. Open it and modify the content as given below.
<img src=”data:image/svg+xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==” alt=”Angular Logo” width=”300″ />
<div style=”text-align: center;”>
Back to the command prompt using angular CLI command we will run our application to check if everything is working fine.
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
ng serve -o
Congratulations you have successfully created your application.