Angular CLI installation and setup - Mini Project: Build & Apply

Angular CLI Installation and Setup

📖 Scenario: You want to start building web apps using Angular. To do that, you need to install the Angular CLI tool on your computer. This tool helps you create and manage Angular projects easily.

🎯 Goal: Install Angular CLI globally, create a new Angular project named my-angular-app, and run the development server to see the default app in your browser.

📋 What You'll Learn

Install Node.js and npm on your computer

Install Angular CLI globally using npm

Create a new Angular project named my-angular-app

Run the Angular development server to serve the app locally

💡 Why This Matters

🌍 Real World

Developers use Angular CLI to quickly start and manage Angular projects, saving time and avoiding manual setup.

💼 Career

Knowing how to install and use Angular CLI is essential for frontend developers working with Angular to build modern web applications.

1

Install Angular CLI globally

Open your terminal or command prompt and type the command npm install -g @angular/cli to install Angular CLI globally on your computer.

Angular

# Run the command to install Angular CLI globally
# Your code here

Need a hint?

This command uses npm to install the Angular CLI tool globally so you can use it anywhere on your computer.

2

Create a new Angular project

Use the Angular CLI command ng new my-angular-app to create a new Angular project named my-angular-app. When prompted, choose Yes for Angular routing and CSS for styles.

Angular

npm install -g @angular/cli
# Create a new Angular project named my-angular-app
# Your code here

Need a hint?

This command creates a new folder with all the files needed for your Angular app.

3

Navigate into the project folder

Change your current directory to the new project folder by typing cd my-angular-app in your terminal.

Angular

ng new my-angular-app
# Change directory to my-angular-app
# Your code here

Need a hint?

You need to be inside the project folder to run Angular commands for this app.

4

Run the Angular development server

Start the Angular development server by typing ng serve --open. This will build the app and open it in your default web browser at http://localhost:4200.

Angular

cd my-angular-app
# Run the Angular development server and open the app in the browser
# Your code here

Need a hint?

This command compiles your app and opens it in the browser so you can see it live.