How to Install Angular CLI the Right Way (Step-by-Step)

Let’s get your Angular development environment set up in under 10 minutes!

Hey there!
If you’re trying to dive into the world of Angular, the very first step you’ll want to take is installing the Angular CLI — short for Command Line Interface.

Think of Angular CLI as your best friend. It handles all the boring setup work so you can focus on building sleek, modern apps.

When I first started with Angular, I wasted hours setting things up manually. Then I discovered Angular CLI — and everything changed!

Ready to get started? Let’s walk through how to install Angular CLI properly and quickly.

What Is Angular CLI?

Angular CLI is a powerful command-line tool that helps you:

• Create Angular projects in seconds
• Generate components, services, modules, etc.
• Build, test, and serve your app
• Automate configuration and development tasks

In short, it’s essential for serious Angular developers.

🎓 Want to master Angular from scratch? Check out the Angular Course — it’s perfect for beginners and intermediates alike!

Pre-Requisites

Before we install Angular CLI, make sure you have the following installed:

• Node.js (version 14.20 or higher)
• npm (Node Package Manager, usually comes with Node.js)
• A terminal or command prompt
• Internet connection (of course!)

Step 1: Check Node.js and npm

Open your terminal and type:

node -v
npm -v

If both return a version number, you’re good to go. If not, head to Node.js official site and install the LTS version.

Step 2: Install Angular CLI Globally

Once Node.js is set, installing Angular CLI is just one line away:

npm install -g @angular/cliCode language: CSS (css)

Let’s break it down:

• npm install: tells npm to install something
• -g: installs it globally (accessible from anywhere on your system)
• @angular/cli: the package you want to install

This is where most beginners mess up. Don’t skip the -g flag — or you’ll only be able to use Angular CLI in one folder.

Step 3: Verify the Installation

After it’s installed, run this to verify:

ng version

You should see something like:

Congrats! You’ve just installed Angular CLI on your system!

Step 4: Create Your First Angular Project

Let’s test it out by creating a sample project:

ng new my-first-appCode language: JavaScript (javascript)

This will:

• Ask you a few setup questions (say “yes” to routing and choose CSS or SCSS)
• Create all necessary folders and files
• Install dependencies

Now, run the app:

cd my-first-app
ng serve

Then visit: http://localhost:4200 in your browser.

Boom! Your first Angular app is live.

What to Learn Next?

Installing Angular CLI is just the start of your journey. Here’s what I’d recommend next:

• Angular Course — Learn Angular framework from scratch
• ECMAScript 6+ Course — Master modern JavaScript (a must for Angular)
• Modern JavaScript Course — Level up your JS skills fast
• HTML5, CSS3 & JavaScript Course — If you’re just starting from the ground up

True story: Once I completed the Angular Course + ECMAScript combo, I was finally able to build the complex app I had in mind for months.

Add Some Style with Icons & Images

Want to spice up your Angular apps?

• Use icons from Iconoir for clean, modern visuals.
• Use random stock images from Picsum Photos like so:

In your App, go to src>app>app.html

Remove everything except the router tag and paste the code below.

<img src="https://picsum.photos/800/400" alt="Angular App Preview" class="img-fluid" />Code language: JavaScript (javascript)

Want stylish fonts? Just pop in a Google Font in your index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Code language: HTML, XML (xml)

Then add it to your styles.css:

body {
  font-family: 'Inter', sans-serif;
}Code language: CSS (css)

Common Angular CLI Commands You Should Know

Here are some handy ones you’ll use daily:

• ng serve – Starts a dev server
• ng generate component my-component – Creates a new component
• ng build – Builds your app for production
• ng test – Runs unit tests

Final Thoughts

Installing Angular CLI is your first real step into modern front-end development. You’re now equipped to build powerful, scalable, and beautiful web apps — without drowning in boilerplate code.

Pro tip: Don’t just install Angular CLI and stop there. Dive into building projects and exploring all its features.

Still unsure where to begin? Start with the Angular Course — it’s hands-on, project-based, and taught by industry pros.

Let’s Wrap It Up!

• ✔️ You learned how to install Angular CLI
• ✔️ Verified it works
• ✔️ Created your first Angular app
• ✔️ Got resources to level up

The road ahead is exciting. Angular is not just a framework — it’s a career-changing skill.

Let’s build something amazing. See you in the code!