ReviseAlgo Logo

Fundamentals

Angular CLI

Master Angular CLI tooling, covering generation commands, compilation parameters, server configurations, and build pipelines.

Last Updated: July 15, 2026 • 8 min read

1. Learning Objectives

In this lesson, you will master the Angular Command Line Interface (CLI). By the end of this topic, you will be able to:

  • Install the Angular CLI globally and verify installations.
  • Create new workspace configurations using ng new.
  • Generate components, services, and pipes using generator commands.
  • Run a local development server with hot reload enabled.
  • Build production-ready build outputs.

2. Overview

The Angular CLI is a command-line interface tool used to initialize, develop, scaffold, and maintain Angular applications directly from a terminal shell. It abstracts build pipelines (webpack or esbuild configurations) and provides generator scripts to ensure files follow consistent design guidelines.

3. Why This Topic Matters

The CLI streamlines development and helps prevent errors in large codebases:

  • Consistent Scaffolding: Manually creating files (e.g. creating TypeScript classes, testing files, and stylesheet overrides) is slow and prone to errors. Generating these files with the CLI ensures they follow consistent structures.
  • Port Collision conflicts: By default, the dev server runs on port 4200. If you run multiple projects, ports will conflict. The CLI allows you to specify custom ports when starting the server.

4. Real-World Analogy

Think of the Angular CLI like **having a robotic assembly line inside a factory**:

  • ng new (Groundbreaking): The robot clears the site and builds the factory structure (folders, settings, configurations).
  • ng generate (Component Assembler): The robot stamps out components with custom labels, wiring them to parent modules automatically.
  • ng serve (Interactive Preview): The robot runs the assembly line in slow-motion, letting you inspect and test products in real-time.

5. Core Concepts

The Angular CLI uses several core commands:

  • ng new [app-name]: Initializes a new workspace and generates a starter application.
  • ng serve: Starts a local development server. The server watches files for changes and automatically refreshes the browser.
  • ng generate [blueprint] [name]: Generates template files based on a blueprint (e.g. component, service, pipe).
  • ng build: Compiles and bundles application files into a production-ready dist/ folder.
CLI command Shortcut Option Pipeline Action
ng generate component user ng g c user Creates user.component.ts, .html, .css, and .spec.ts files.
ng generate service api ng g s api Creates api.service.ts and api.service.spec.ts files.
ng serve --port 5000 - Starts the dev server on port 5000 instead of the default 4200.

6. Syntax & API Reference

Below are common Angular CLI commands:

7. Visual Diagram

This diagram displays the local development server pipeline:

8. Live Example — Full Working Code

Below is a typical terminal workflow for creating and launching a new Angular project:

9. Interactive Playground

Try It Yourself Challenges:

  1. Run a dry-run generator command (e.g. ng g c my-test --dry-run) to preview the files generated by the CLI.
  2. Test starting a server on a custom port (e.g. port 8080) using CLI options.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Running generator outside the project folder Running generate commands in the wrong terminal directory, causing the CLI to fail to locate workspace configurations. ng g c header (runs in home folder) Navigate to the project root directory containing angular.json first.

11. Best Practices

  • Use dry-run to preview changes: Always use the --dry-run parameter when generating files to preview output structures before writing them to disk.
  • Use CLI shortcuts: Save time by using CLI command shortcuts (like ng g c instead of ng generate component).

12. Browser Compatibility/Requirements

The Angular CLI requires Node.js active long-term support version (LTS v18.x or v20.x). Verify version requirements using node -v.

13. Interview Questions

🟢 Q1: How do you change the default port (4200) when running the development server?

Answer: Pass the --port parameter followed by the port number when running the serve command (e.g. ng serve --port 5000).

14. Debugging Exercise

Explain why the server fails to start, and fix the command:

View Solution

Diagnosis: Another process is already running on port 4200. To resolve this, specify an alternative port (e.g. port 4300) when starting the dev server.

Fixed Command:

15. Practice Exercises

Exercise 1: Scaffolding a custom pipe

Use the CLI generator to create a new custom pipe named `usd-convert` inside a `pipes` subfolder. Review the generated files.

16. Scenario-Based Challenge

The Multi-project Port Mapping Challenge:

Your local environment runs three micro-frontend dashboard sites concurrently. Running standard `ng serve` causes port collision errors on port 4200. Propose a configuration strategy using CLI options to map the projects to unique ports.

17. Quick Quiz

Q1: Which CLI command is used to preview generated files without writing them to disk?

A) --dry-run

B) --preview

C) --test

Answer: A — The --dry-run option previews generator files without writing changes to disk.

18. Summary & Key Takeaways

  • • The Angular CLI automates scaffolding, testing, and production build pipelines.
  • • Use shortcuts like ng g c to generate components quickly.

19. Cheat Sheet

CLI Command Action
ng serve --open Starts the dev server and opens the application in your default browser.