Skip to main content

Setting Up Angular CLI

In this tutorial, we'll learn about setting up Angular CLI (Command Line Interface). The Angular CLI is a powerful tool to initialize, develop, and maintain Angular applications. It can create a new Angular project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Prerequisites​

Before setting up Angular CLI, you need to have Node.js and npm (node package manager) installed on your computer. If you haven't installed these yet, you can download them from here.

You can check the versions of Node.js and npm by running the following commands in your terminal:

node -v
npm -v

Step 1: Installing Angular CLI​

To install the Angular CLI, you'll need to execute the following command in your terminal:

npm install -g @angular/cli

This command installs Angular CLI globally (-g flag) on your computer, allowing you to use the ng commands from any directory.

Step 2: Verifying Installation​

After the installation is complete, you can verify it by checking the version of Angular CLI. Enter the following command in your terminal:

ng --version

This command will display the version of Angular CLI installed on your computer. If the installation was successful, you'll see the version of your Angular CLI.

Step 3: Creating a New Angular Project​

Once Angular CLI is installed, you can create a new Angular project by running the following command:

ng new my-app

Replace my-app with the name you want for your project. This command creates a new directory with the same name as the project name and sets up a new Angular application.

Step 4: Serving Your Angular Project​

After creating your project, navigate into the project's directory using the following command:

cd my-app

Then, you can start the development server and open the application in your default browser by running:

ng serve --open

This command launches the server, watches your files, and rebuilds the app as you make changes to those files. The --open (or -o) option automatically opens your browser to http://localhost:4200/.

And there you have it! You've successfully set up Angular CLI and created your first Angular project.

Conclusion​

In this tutorial, we've covered how to set up Angular CLI, verify its installation, create a new Angular project, and serve your project. With Angular CLI, you can speed up your Angular development and follow best practices out of the box. Continue exploring and experimenting with the Angular CLI to discover more of its powerful features.