Create Angular App using Angular CLI

Once you are done with the installation and setting the local development environment, we will create a new Angular App using Angular CLI.

Install Angular CLI

To install Angular CLI run this command in command prompt.
 npm install -g @angular/cli


In above command -g means you are installing it globally, if you will not apply -g attribute to this command, then angular cli will be available for the path where you are currently on the command prompt.

You may notice the path in above screenshot and below screen shot.

You may notice below, I have executed the command without -g


Angular CLI files available to this folder post successful execution.



Create an Angular App using CLI

Once Angular CLI installed successfully, let's create first Angular App with CLI.
To create an Angular App.

Run this command - ng new <Angular App Name>

In my case

ng new myfirstapp
It will prompt you for Angular routing. Provide your answer either y or n
Next, it will ask for stylesheet format, select your format by using up or down arrow key.


Once you provided all the inputs, your Angular App will be created at your path (Path where you are working in command prompt)


Now, go to your folder location and you will find below files structure.
So, our Angular project is successfully created.


Build and Run Angular App

To make sure our Angular application is working fine. Let's run this.
To do this we will use Angular CLI
Open the command prompt and go to the folder location where the project is available and type ng serve

You may be asked to Allow Access to Windows Defender Firewall.





Once Build Compiled successfully. You will be given a localhost URL.
In this case, it is  http://localhost:4200



 Let's open http://localhost:4200 in the browser.
You will see the output as shown below.







Summary :

In this blog, we installed Angular CLI globally and locally. Next, we created a new Angular App using Angular CLI and finally we build and run the Angular App using Angular CLI.

Hope you like this blog. Please subscribe to this blog and share this on the social platform.

You may like other blogs -

MVC Tutorial
Web API Tutorial
Is Angular JS different from Angular?

Interview Questions and Answers Series -

MVC Interview Questions and Answers
Web API interview questions and answers

Comments

Popular