What is Angular CLI?

CLI  stands for Command Line Interface. Angular has its own official CLI  that helps us with lots of things during the development process.

Angular CLI is being used for automating operations in Angular projects rather than doing them manually. CLI supports us, developers, in an Angular project  from beginning to end.

For example, Angular CLI can be used for:

• Configurations, Environment Setup
• Building components, services, routing system
• Starting, testing and deploying the project
• Installing 3rd party libraries (like Bootstrap, Sass, etc.)

and much more. Now let’s see how to install our first Angular App by using the CLI step by step.

Step 1: Install NPM (Node Package Manager)

First  of all, we are going to need Node js. NPM (node package manager, is a part of node js) is a tool for installing 3rd party libraries and dependencies to our project. If you don’t have it yet, you can download and install it from here. I have also explained it step by step on the tutorial video.

Step 2: Install Angular CLI

If you have node js installed, the next step is installing the Angular CLI itself to your computer:

npm install -g @angular/cli

g stands for global installation. If you use -g later you can use the CLI in any Angular project on your computer.

Tip: Type ng v to your command-line interface (or terminal) to verify your Angular version.

Step 3: Create a new Angular Project

After the installation is completed, you can use Angular CLI to create a new Angular project with the following command:

ng new my-first-app

This  command creates a new Angular project (named my-first-app, you can use any name) with all the necessary dependencies and files. You don’t have to worry about anything because the CLI does it automatically for you.

Step 4: Run the App

After installing the CLI and creating a new Angular app, the final step is to start the project. To do that, we need to use the following command:

ng serve -- open

The “open” flag opens your local browser window automatically.

Angular supports live server, so you can see the changes in your local without refreshing your browser’s page. For more details and updates, check also the official documentation.