Angular CLI Commands — Complete Guide

In this tutorial, you'll learn about Angular CLI Commands. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Angular CLI is the official command-line tool for scaffolding, building, testing, and maintaining Angular applications. This complete guide covers every essential command with practical examples.

What You'll Learn

• Install and set up the Angular CLI
• Scaffold new projects with custom options
• Generate components, services, directives, and more
• Build for development and production
• Run tests and lint your code
• Configure proxy, environments, and build options

Why the Angular CLI Matters

The CLI automates the repetitive parts of Angular development — creating files, wiring up imports, and configuring builds. DodaTech uses the CLI to scaffold every new project, ensuring consistent structure across Durga Antivirus Pro dashboard, Doda Browser settings, and DodaZIP management panels. Instead of spending 10 minutes setting up a new component, you spend 2 seconds typing ng g c hero.

Security note: Understanding Cli helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

flowchart LR
    A["Node.js & npm Basics"] --> B["**Angular CLI**"]
    B --> C["Angular Basics & Projects"]
    style B fill:#f97316,stroke:#c2410c,color:#fff

Installation

# Install the CLI globally
npm install -g @angular/cli

# Verify the installation
ng version

The -g flag installs the CLI globally, making the ng command available anywhere in your terminal. Run ng version to confirm it installed correctly — you'll see the Angular CLI version along with your Node.js and npm versions.

Creating a New Project

ng new my-app --routing --style=scss
cd my-app
ng serve

• ng new my-app — Creates a new Angular workspace in a folder called my-app. It installs dependencies, sets up TypeScript, and creates the initial project structure.
• --routing — Adds a routing configuration file and imports the Angular Router.
• --style=scss — Sets the stylesheet format to SCSS. Other options: css, less, sass.
• ng serve — Starts a development server at http://localhost:4200. Files are rebuilt automatically when you save changes.

Common Flags for ng new

Core Commands Reference

Generate Commands — The Time Savers

The ng generate command (short: ng g) creates boilerplate files with proper imports and wiring:

# Components
ng generate component hero-list
ng g c hero-detail --standalone           # Short form
ng g c shared/header --skip-tests         # In subfolder, no test file
ng g c foo --inline-style --inline-template  # Everything in one file

# Services
ng generate service hero
ng g s auth --flat                        # No subfolder

# Modules
ng generate module admin --routing        # Module with child routes
ng g m shared

# Directives and Pipes
ng g directive highlight
ng g pipe truncate

# Guards and Interceptors
ng g guard auth
ng g interceptor logging

Each generate command creates the appropriate files with the correct decorators and exports. For example, ng g c hero-detail creates:

• hero-detail.component.ts
• hero-detail.component.html
• hero-detail.component.css
• hero-detail.component.spec.ts

And it updates the nearest module or standalone imports.

Build Configuration

# Development build (unoptimized, with source maps)
ng build

# Production build (minified, tree-shaken, AOT-compiled)
ng build --configuration production

# Build with custom base href (for subdirectory deployment)
ng build --base-href /admin/

# Generate stats JSON for bundle analysis
ng build --stats-json

The production build uses Ahead-of-Time (AOT) compilation — Angular compiles templates during the build instead of in the browser. This results in smaller bundles and faster rendering.

Understanding Build Output

When you run ng build, the output goes to the dist/my-app/ folder. The key files are:

dist/my-app/
├── main.js              # Your app code (tree-shaken)
├── polyfills.js         # Browser compatibility
├── runtime.js           # Webpack runtime
├── styles.css           # Compiled styles
├── index.html           # Bootstrapped HTML
└── chunk-*.js           # Lazy-loaded route bundles

Environment Files

Angular projects come with environment files for different configurations:

// src/environments/environment.ts (development defaults)
export const environment = {
  production: false,
  apiUrl: "http://localhost:3000/api"
};

// src/environments/environment.prod.ts (production overrides)
export const environment = {
  production: true,
  apiUrl: "https://api.example.com"
};

Angular replaces environment.ts with the correct file during build based on the --configuration flag. Use environment.apiUrl in your services instead of hardcoding URLs:

import { environment } from "../environments/environment";

this.http.get(`${environment.apiUrl}/products`);

Proxy Configuration

During development, your Angular app runs on port 4200 but your API may run on port 3000. Set up a proxy to avoid CORS issues:

// proxy.conf.json
{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

ng serve --proxy-config proxy.conf.json

Now http://localhost:4200/api/products forwards to http://localhost:3000/api/products transparently.

Useful Flags at a Glance

Adding Libraries

# Angular Material
ng add @angular/material

# Progressive Web App support
ng add @angular/pwa

# Angular Universal (SSR)
ng add @angular/ssr

The ng add command installs the package, runs schematics to configure it for your project, and updates necessary files. It's smarter than npm install + manual setup.

Updating Angular

# Check for available updates
ng update

# Update to the next version
ng update @angular/core @angular/cli

The CLI handles complex migrations — updating dependencies, running migration schematics, and flagging breaking changes in your code.

Common Mistakes

1. Installing Angular CLI locally instead of globally

Without -g, you'll get "command not found" when typing ng. Install globally with npm install -g @<a href="/frameworks/angular/">angular</a>/cli.

2. Forgetting --standalone on new projects

Without --standalone, Angular creates NgModules (the older approach). For new projects, always use --standalone.

3. Running ng serve on a production server

ng serve is for development only. Use ng build --configuration production and serve the dist/ folder with a web server like Nginx.

4. Not using --dry-run for complex generates

Always run ng g c foo/bar/baz --dry-run first to verify the CLI generates what you expect.

5. Ignoring the proxy.conf.json for API calls

Without a proxy, API calls fail due to CORS in development. Set up a proxy config instead of disabling CORS.

6. Confusing ng add with npm install

ng add does npm install plus project configuration. Always use ng add for Angular-specific packages.

Practice Questions

1. What does ng build --configuration production do differently from ng build? It enables AOT Compilation, Minification, tree-shaking, dead code elimination, and environment file replacement for optimized output.

2. How do you create a component without a test file? ng g c my-component --skip-tests. This is useful for quick prototyping.

3. What is the purpose of a proxy configuration? It forwards API requests from the Angular dev server (port 4200) to a backend server (e.g., port 3000) during development, avoiding CORS issues.

4. What does --dry-run do? It shows what files would be created or modified without actually writing anything. Useful for verifying the CLI's behavior.

5. How do you add Angular Material to an existing project? ng add @<a href="/frameworks/angular/">angular</a>/material. This installs the package, sets up a theme, and configures animations.

Challenge

Use the CLI to scaffold a complete Angular application with: routing, standalone components, SCSS styles, and lazy-loaded feature modules. Generate a products module with list, detail, and edit components — all using --dry-run first to verify.

FAQ

Try It Yourself

Create a new Angular project and practice these commands:

# Step 1: Create the project
ng new my-practice-app --standalone --routing --style=scss --dry-run
# (remove --dry-run to actually create it)

# Step 2: Generate components
ng g c home --standalone
ng g c about --standalone
ng g c products --standalone

# Step 3: Generate a service
ng g s products/data --flat

# Step 4: Build and serve
cd my-practice-app
ng serve

What's Next

Related topics: Node.js, TypeScript, npm/Package Management.

What's Next

Congratulations on completing this Cli tutorial! Here's where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!