Part 2: Setting Up Your Angular Development Environment

Welcome back to our “Mastering Angular” series! 🎉 In this post, we’ll guide you through setting up everything you need to start building Angular applications.

By the end of this tutorial, you’ll have:
✅ Node.js & npm/yarn installed
✅ Angular CLI set up
✅ Your first Angular project running
✅ Understanding of the project structure

---

Step 1: Install Node.js & npm

Angular requires Node.js (which includes npm, the Node Package Manager).

Download Node.js

1. Go to Node.js official website
2. Download the LTS (Long-Term Support) version (recommended for stability)
3. Run the installer (follow default settings)

Verify Installation

Open your terminal (Command Prompt, PowerShell, or Terminal) and run:

node -v  # Should show version (e.g., v18.x.x)
npm -v   # Should show npm version (e.g., 9.x.x)

💡 Optional: If you prefer Yarn, install it via:

npm install -g yarn
yarn --version

---

Step 2: Install Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool for creating and managing Angular projects.

npm install -g @angular/cli

Verify installation:

ng version

You should see Angular CLI version and other environment details.

---

Step 3: Create Your First Angular Project

Let’s generate a new project:

ng new my-first-angular-app

The CLI will ask:

• “Would you like to add Angular routing?” → Yes (we’ll use it later)
• “Which stylesheet format would you like to use?” → Choose CSS (for simplicity)

Wait for dependencies to install (this may take a few minutes).

---

Step 4: Run the Development Server

Navigate into your project folder:

cd my-first-angular-app

Start the app:

ng serve --open

• ng serve compiles and starts the app
• --open automatically opens http://localhost:4200 in your browser

You should see:
https://angular.io/generated/images/guide/setup-local/app-works.png

---

Step 5: Understand the Project Structure

Let’s explore key files and folders:

File/Folder	Purpose
src/	Contains your app code
src/app/	Components, modules, services
src/index.html	Main HTML file (Angular renders inside <app-root>)
src/styles.css	Global CSS styles
angular.json	Angular project configuration
package.json	Lists dependencies & scripts

---

Step 6: Make a Small Change

Let’s modify the default app:

1. Open src/app/app.component.html
2. Replace the content with:

<h1>Welcome to {{ title }}!</h1>
<p>This is my first Angular app. 🚀</p>

3. Check your browser—it updates automatically!

---

What’s Next?

In Part 3, we’ll dive into Angular Components—the building blocks of Angular apps!

🚀 Coming Soon: “Angular Components: The Building Blocks”

---

Your Task (Exercise)

1. Create another Angular project named angular-practice.
2. Change the title in app.component.ts and see it update.
3. Explore angular.json—can you find where the ng serve port is defined?

💬 Let me know in the comments: Did you face any issues during setup?