The Angular CLI (Command Line Interface) is a powerful tool that helps developers scaffold, build, and maintain Angular applications efficiently. Whether you're a beginner or an experienced Angular developer, mastering these CLI commands can significantly boost your productivity.

🛠️ Boost your Angular dev speed

📦 Clean. Efficient. Productive.

Angular CLI is your best friend when it comes to scaffolding, serving, building, and testing Angular applications.

Benefits:

  • Scaffolds files with correct structure
  • Serves, builds, and tests your app quickly
  • Integrates third-party libraries with ease
  • Improves code consistency and efficiency

Here are the top 10 Angular CLI commands you should know:

1. Create a New Angular Project

ng new my-app

This command initializes a new Angular project with a default structure, including configuration files and necessary dependencies.
Example:

ng new my-angular-app

2. Serve Your Application

ng serve

Runs your Angular app in development mode with live reload. By default, it starts on
http://localhost:4200.

Flags:

  • --open (Auto-opens the browser)
  • --port 5000 (Runs on a custom port)

Example:

ng serve --open --port 5000

3. Generate a New Component

ng generate component component-name

Shortcut: ng g c component-name
Creates a new component with HTML, CSS, TypeScript, and test files.
Example:

ng g c user-profile

4. Generate a Service

ng generate service service-name

Shortcut: ng g s service-name
Creates an injectable service for business logic or API calls.
Example:

ng g s auth

5. Build Your Application for Production

ng build

Compiles the app into the dist/ folder for deployment.

Flags:

  • --prod (Optimizes for production)
  • --aot (Ahead-of-Time compilation)

Example:

ng build --prod

6. Run Unit Tests

ng test

Executes unit tests using Karma **and **Jasmine.

Flags:

  • --watch (Reruns tests on file changes)

Example:

ng test --watch

7. Run End-to-End (E2E) Tests

ng e2e

Runs end-to-end tests using Protractor.

Example:

ng e2e

8. Add a Third-Party Library

ng add package-name

Installs and configures a library (e.g., Angular Material, PWA, etc.).

Example:

ng add @angular/material

9. Generate a Module

ng generate module module-name

Shortcut: ng g m module-name

Creates a new NgModule for better code organization.

Example:

ng g m admin

10. Update Angular CLI & Core

ng update

Checks for outdated packages and updates them.

Example:

ng update @angular/core @angular/cli

Bonus: Check Angular CLI Version

ng version

Displays the installed Angular CLI version.


Final Thoughts
Mastering these Angular CLI commands will streamline your development workflow and help you build Angular apps faster.

  • Which Angular CLI command do you use the most? Let’s discuss in the comments!