Angular CLI and Tooling

Level: Beginner

ℹ️ What You'll Learn

• Angular CLI commands
• Code generation (schematics)
• Configuration
• Debugging tools
• Performance profiling

Common Commands

# Generate
ng generate component students/student-list
ng g c students/student-detail
ng g s services/student
ng g m modules/student

# Shorthand
ng g c [path]  # Component
ng g s [path]  # Service
ng g m [path]  # Module
ng g i [path]  # Interface
ng g p [path]  # Pipe
ng g d [path]  # Directive

# Build/serve
ng serve              # Dev server
ng build              # Production build
ng test               # Run tests
ng e2e                # E2E tests

# Other
ng lint               # Code quality
ng format             # Format code
ng version            # Version info

Generate with Options

# Component with spec
ng g c students --skip-tests

# Module with routing
ng g m students --routing

# Service with interface
ng g s services/student
ng g i models/student

Debugging

# Enable debugging
ng serve --source-map

# Chrome DevTools
# Open Chrome → Inspect → Sources
# View TypeScript source code

Use Chrome DevTools for:

• Breakpoints
• Step through code
• Watch variables
• Console logging

Performance Tools

# Lighthouse (Chrome DevTools)
# Audit → Performance, Accessibility, SEO

# Angular DevTools (Chrome Extension)
# View component tree
# Track change detection
# View input/output bindings

# ng serve --configuration=development
ng serve --poll=2000  # For file watching issues

Configuration

angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "styles": ["src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  }
}

Configure:

• Output path
• Styles/scripts
• Environments
• Optimization options

SMS Project Setup

# Create project
ng new sms-portal --routing

cd sms-portal

# Generate modules
ng g m modules/student --routing
ng g m modules/exam --routing
ng g m modules/fee --routing

# Generate services
ng g s services/auth
ng g s services/student
ng g s services/exam

# Generate components
ng g c components/dashboard
ng g c modules/student/components/list
ng g c modules/student/components/form

# Start development
ng serve

Now ready for development!

Key Commands Quick Reference

Command	Purpose
ng new	Create project
ng serve	Dev server
ng build	Build for prod
ng test	Run tests
ng generate	Create code
ng lint	Check code quality
ng version	Show versions

Key Takeaways

• ng generate = code scaffolding
• ng serve = development
• ng build = production
• ng test = testing
• CLI saves time
• Schematics = consistent code style

💡 Backend Developer Tip

Angular CLI like dotnet CLI in .NET. Generates boilerplate, handles configuration, builds project.

⚠️ CLI Issues

1. Wrong file extension — .ts vs .js
2. Path confusion — Absolute vs relative paths
3. Not installing deps — npm install needed
4. Wrong Node version — Check node version

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Angular CLI. Try these prompts:

• "What does ng generate do?"
• "How do you debug Angular apps?"
• "Why use Angular CLI over manual setup?"
• "Quiz me on CLI commands"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.