Developer Tools and CLI

Angular Developer Tools & CLI: Your Superhero Toolbelt 🦸

Imagine you’re a detective with a magnifying glass, a builder with power tools, and a wizard with a magic wand—all at once. That’s what Angular’s Developer Tools and CLI give you!

The Big Picture: Your Workshop

Think of building an Angular app like building a treehouse. You wouldn’t use just your hands, right? You’d need:

• A magnifying glass (Debugging Tools) - to find tiny problems
• X-ray goggles (Angular DevTools) - to see inside your treehouse
• A smart helper (Language Service) - who whispers hints as you work
• Blueprint robots (Schematics) - that build pieces for you
• Magic words (ng generate) - that create things instantly
• A repair kit (ng update) - that keeps everything shiny and new

Let’s explore each one!

🔍 Debugging Tools: Finding the Hidden Bugs

What Are They?

Debugging tools are like a detective’s kit. When your app breaks or acts weird, these tools help you find the problem.

The Story

Imagine your toy robot stops dancing. Something’s wrong inside! You open it up and use a flashlight to look at each wire and gear until you find the broken part. That’s debugging!

Real Tools You Use

1. Browser DevTools (Console Tab)

Open with: F12 or Right-click → Inspect

The Console shows you messages and errors:

// You write this in your code
console.log('Hello! I reached here!');

// The console shows red errors too
// ERROR: Cannot read property 'name'

2. Breakpoints: Pause and Inspect

You can tell the browser: “STOP here so I can look around!”

function calculateTotal(price, tax) {
  debugger; // Browser pauses here!
  return price + tax;
}

3. Source Maps

Angular’s magic translation guide. Your TypeScript code becomes JavaScript, but Source Maps let you debug the original TypeScript!

graph TD
    A["Your TypeScript Code"] --> B["Compiler"]
    B --> C["JavaScript + Source Map"]
    C --> D["Browser reads both"]
    D --> E["You debug TypeScript!"]

Quick Example

// Something's wrong! Price shows NaN
function showPrice(item) {
  console.log('Item:', item);        // Check what item looks like
  console.log('Price:', item.price); // Is price there?
  return item.price * 1.1;
}

🔬 Angular DevTools: X-Ray Vision for Your App

What Is It?

A special Chrome extension made just for Angular apps. It’s like having X-ray goggles that let you see INSIDE your components!

The Story

You built a LEGO house with many rooms (components). Each room has furniture (data) and doors (connections). Angular DevTools lets you peek into any room without breaking anything!

How to Get It

1. Go to Chrome Web Store
2. Search “Angular DevTools”
3. Click “Add to Chrome”
4. Open your Angular app, press F12, find the “Angular” tab

What You Can See

graph TD
    A["Angular DevTools"] --> B["Component Explorer"]
    A --> C["Profiler"]
    B --> D["See all components as a tree"]
    B --> E[Check each component's data]
    C --> F["Find slow parts"]
    C --> G["See change detection"]

Component Explorer Tab

Click any component to see:

Profiler Tab

Records your app running and shows:

• Which components update most often
• How long each update takes
• Where to make things faster

Quick Example

Your app feels slow. Open Angular DevTools → Profiler → Start recording → Use your app → Stop.

See a component updating 100 times? That’s your problem!

💬 Angular Language Service: Your Whispering Helper

What Is It?

A smart assistant that lives inside your code editor (VS Code). It whispers hints, catches mistakes, and suggests completions AS YOU TYPE!

The Story

Imagine writing a letter, and a friendly ghost reads over your shoulder. Before you finish a word, it suggests the rest. When you spell something wrong, it gently taps you. That’s the Language Service!

What It Does

How to Get It

1. Install VS Code
2. Install "Angular Language Service" extension
3. That's it! Works automatically

Quick Example

In your template:

<!-- You type: -->
<div *ngF

<!-- Language Service suggests: -->
*ngFor
*ngIf

<!-- You pick *ngFor, it shows: -->
<div *ngFor="let item of items">

If you write:

<div *ngFor="let item of itens">

Red squiggle appears: Property 'itens' does not exist. Did you mean 'items'?

🤖 Schematics: Your Blueprint Robots

What Are They?

Schematics are like robot helpers that build code pieces for you. Give them a command, and they construct files exactly right—every time!

The Story

Imagine having a team of robots. You say “Build me a new room!” and they immediately:

1. Create the walls (files)
2. Add windows (imports)
3. Connect the door (register in module)
4. Put up a name sign (selectors)

No measuring, no mistakes. Perfect every time!

Built-in Schematics

Angular comes with schematics for:

graph TD
    A["Angular Schematics"] --> B["Components"]
    A --> C["Services"]
    A --> D["Modules"]
    A --> E["Pipes"]
    A --> F["Directives"]
    A --> G["Guards"]
    A --> H["And more..."]

Custom Schematics

Big companies create their own! Imagine:

• “Make a product card” → Creates your company’s styled card
• “Add analytics” → Connects tracking everywhere needed

How Schematics Work

Your Command
    ↓
Schematic reads it
    ↓
Creates files from templates
    ↓
Modifies existing files (like app.module.ts)
    ↓
Done! Perfect code appears

✨ ng generate: The Magic Words

What Is It?

ng generate (or ng g for short) is how you speak to schematics. It’s the spell that summons the robot builders!

The Story

You’re a wizard. You wave your wand (type in terminal) and say the magic words: “ng generate component hero-list!” POOF! Files appear perfectly formed!

The Command Pattern

ng generate <what-to-create> <name>

# Short version
ng g <what> <name>

Common Spells (Commands)

Quick Example: Creating a Component

ng g component products/product-card

POOF! Creates:

src/app/products/product-card/
  ├── product-card.component.ts
  ├── product-card.component.html
  ├── product-card.component.css
  └── product-card.component.spec.ts

AND automatically adds it to your module!

Useful Flags (Extra Magic)

# Skip the test file
ng g component hero --skip-tests

# Don't create a folder
ng g component hero --flat

# Preview without creating (dry run)
ng g component hero --dry-run

# Choose which module to add to
ng g component hero --module=admin

Complete Example

# Create a feature module with routing
ng g module shop --routing

# Create components inside it
ng g c shop/cart --module=shop
ng g c shop/checkout --module=shop

# Create a service
ng g s shop/payment

# Create a guard
ng g guard shop/auth --implements=CanActivate

🔄 ng update: The Repair & Upgrade Kit

What Is It?

ng update is your app’s doctor. It checks for newer, better versions of Angular and safely upgrades everything!

The Story

Your bicycle is great, but a new model came out with better brakes and a shinier bell. ng update is like a mechanic who:

1. Checks what needs upgrading
2. Shows you what will change
3. Carefully replaces old parts with new ones
4. Makes sure everything still works together!

Why Updates Matter

graph TD
    A["Angular Updates Bring"] --> B["🔒 Security Fixes"]
    A --> C["⚡ Better Performance"]
    A --> D["✨ New Features"]
    A --> E["🐛 Bug Fixes"]

How to Use It

Step 1: See What Needs Updating

ng update

Shows something like:

We analyzed your package.json...

Name                   Current  Wanted
@angular/core          16.0.0   17.0.0
@angular/cli           16.0.0   17.0.0

Step 2: Update Angular

ng update @angular/core @angular/cli

What Happens During Update

1. Downloads new versions
2. Runs migrations - Special scripts that fix your code automatically!
3. Updates package.json
4. Shows you changes

Safe Update Steps

# 1. Check current versions
ng version

# 2. See what can be updated
ng update

# 3. Update Angular (core + cli together)
ng update @angular/core @angular/cli

# 4. Update other packages
ng update @angular/material

# 5. Test your app!
ng serve

Migration Magic

When you update, Angular runs “migrations” that automatically fix old code:

// OLD (Angular 15)
@NgModule({
  imports: [CommonModule]
})

// AFTER UPDATE (Angular 17)
// Migration might convert to standalone!
@Component({
  standalone: true,
  imports: [CommonModule]
})

The Golden Rule

Update often, update small!

Don't wait 5 versions.
Update one version at a time.
Test after each update.

🎯 Putting It All Together

Here’s your complete Angular developer workflow:

graph TD
    A["Start New Feature"] --> B["ng generate component"]
    B --> C["Write Code with Language Service"]
    C --> D["Something wrong?"]
    D --> E["Use Browser DevTools"]
    D --> F["Use Angular DevTools"]
    E --> G["Find & Fix Bug"]
    F --> G
    G --> H["Feature Complete!"]
    H --> I["Time passes..."]
    I --> J["ng update keeps things fresh"]

📝 Quick Reference Table

🌟 You’re Now Equipped!

You’ve got:

• 🔍 Detective skills to find bugs
• 🔬 X-ray vision to see inside components
• 💬 A whispering helper while you code
• 🤖 Robot builders at your command
• ✨ Magic words to create anything
• 🔄 A repair kit to stay modern

Go build something amazing! 🚀