Creating Angular Project

Back to: Angular Tutorials For Beginners and Professionals

Creating Angular Project using Angular CLI Command

In this article, I am going to show you the step-by-step process of Creating an Angular Project using the 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.

Once you type D: and press enter, then it will change the directory path to 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.

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.

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.

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.

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.

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.

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

Instead of using the ng serve command, you can also use the 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.

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

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.