Creating Angular Project

Creating Angular Project using Angular CLI Command

In this article, I am going to show you the step by step process of Creating Angular Project using Angular CLI command. In our upcoming articles, I will discuss how to create an angular project using Visual Studio and Visual Studio Code. Please read our previous article where we discussed Environment Setup for Angular Application.

Creating an Angular Project using Angular CLI:

First, open the command prompt in Administrator mode. Then decide in which directory you want to create the angular project. I am going to create the Angular Project in my D directory. So, change the directory location to D in the command prompt by typing D: and then press enter key as shown below.

Creating Angular Project using Angular CLI

Once you type D: and press enter, then it will change the directory path the D drive. Then decide inside which folder you to create the project. I am going to create a folder called Demo in drive and inside that Demo folder; I am going to create my angular project. So, change the directory location to the Demo folder by typing CD Demo and press enter as shown below.

how to create angular project using Angular CLI

In order to create a project using Angular CLI, you need to use the ng new project-name command. I am going to give the project name as MyFirstAngularApp. So type the command as ng new MyFirstAngularApp and then press enter as shown below.

Creating Angular Project

Here, once you press the enter key, it will ask you some questions before beginning. The first question that it will ask you is whether you want to add the routing support or not. It’s up to you whether you want Angular Routing or not. I want to add angular routing into my project so I type Y and then press the enter button as shown below.

Step by step process to create angular application

The second question it will ask you is which stylesheet format (CSS, SCSS, SASS, etc.) you would like to use in your angular project. Here, you need to select the option by using the up and down arrow and once select the CSS, then press the enter button as shown in the below image. I want to use SAAS, so I selected the SAAS option here.

Step by step process to create angular application using Angular CLI Command

Once you press the enter button, it will take some time for your project. Behind the scene, it will create lots of folders and files. It also installed the necessary packages which are required to run the Angular application. In our next article, we will discuss the folder and file structure of the angular application. Once your project is created successfully, then let us see how to run the project using the Angular CLI command.

Running Angular application using Angular CLI:

In order to run the Angular application using Angular CLI, first, you need to change to directory path to the project folder. As I created the project with the name MyFirstAngularApp within the D:\Demo Folder, so I changed the directory path to D:\Demo\MyFirstAngularApp by executing the following command.

Running Angular application using Angular CLI:

Let us see how to compile the angular project using the Angular CLI command. In order to compile the project, you need to use the ng serve command. So, type ng serve and press the enter button as shown below. The ng serve command will build the application as well as start the webserver.

Build Angular application using Angular CLI Command

Once it compiled successfully. Just have a look at the port number i.e. 4200. That means the Web server starts at the port number 4200. So, type http://localhost:4200/ in the browser and it will open the default the angular page as shown below.

Running Angular application using Angular CLI Command

Instead of using ng serve command, you can also use ng serve -o command which will run the project automatically using your default browser. So, type ng serve -o in the command prompt and press enter button as shown below which should run your application using your default browser.

ng serve angular cli command

If you go to the project folder, then you will see lots of folders and files as shown in the below image.

Folder Structure of Angular Application

In the next article, I am going to discuss the folder structure of the angular application in detail. Here, in this article, I try to explain how to create an angular project using Angular CLI step by step with one example. I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *