Loading

Angular

How to Creating Angular Project using Angular CLI Command?. The Complete Angular Developer Course 2023 [Videos].

In this Video, I am going to show you the step-by-step process of Creating an Angular Project using the Angular CLI command. In our upcoming Videos, I will discuss how to create an angular project using Visual Studio and Visual Studio Code. Please read our previous Video 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 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.

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 Video, 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:DemoMyFirstAngularApp 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 port number 4200. So, type http://localhost:4200/ in the browser and it will open the default angular page as shown below.

Running Angular application using Angular CLI Command

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.

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

See All

Comments (381 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /381

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /381

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /381