Angular Commands: When to Use Them with Simple Examples

Angular CLI commands help developers to create, run, test, and manage Angular applications faster. Below are the most commonly used Angular commands and when you should use them.

1. Create a New Angular Project

ng new my-app

When to use:

• Starting a new Angular project.
• Creating a fresh application from scratch.

What it does:

• Creates the project structure.
• Installs required packages.
• Sets up Angular configuration files.

2. Run the Application

ng serve

When to use:

• During development.
• To see your application in the browser.

What it does:

• Starts a local development server.
• Automatically reloads the page when code changes.

Common variant:

ng serve --open

This automatically opens the browser.

3. Generate a Component

ng generate component home
or
ng g c home

When to use:

• Creating a new page or UI section.

What it does:

• Creates component files.
• Updates Angular module settings automatically.

4. Generate a Service

ng generate service api
or
ng g s api

When to use:

• Handling API calls.
• Sharing data between components.

What it does:

• Creates a service file for business logic.

5. Generate a Module

ng generate module admin
or
ng g m admin

When to use:

• Organizing large applications.
• Separating features into different modules.

6. Generate Routing Module

ng generate module app-routing --flat --module=app

When to use:

• Adding navigation between pages.

What it does:

• Creates routing configuration for the application.

7. Build the Application

ng build

When to use:

• Before deployment.
• Creating production-ready files.

What it does:

• Compiles the application.
• Creates build files inside the dist folder.

Production build:

ng build --configuration production

8. Run Unit Tests

ng test

When to use:

• Checking whether application features work correctly.

What it does:

• Runs unit tests using Karma and Jasmine.

9. Run End-to-End Tests

ng e2e

When to use:

• Testing complete user workflows.

What it does:

• Simulates real user actions.

10. Check Angular Version

ng version

When to use:

• Verifying installed Angular version.
• Debugging compatibility issues.

11. Update Angular

ng update

When to use:

• Upgrading Angular packages.

What it does:

• Checks available updates.
• Updates dependencies safely.

12. Add Angular Features

ng add package-name

Example:

ng add @angular/material

When to use:

• Installing Angular-supported libraries.

What it does:

• Installs and configures packages automatically.

13. Lint the Project

ng lint

When to use:

• Finding coding issues before deployment.

What it does:

• Checks code quality and formatting rules.

14. Create an Interface

ng generate interface user
or
ng g i user

When to use:

• Defining data structures.

Example:

interface User {
  id: number;
  name: string;
}

15. Create a Guard

ng generate guard auth

When to use:

• Protecting routes.
• Restricting access to pages.

Example:

• Allow only logged-in users to access the dashboard.

Quick Summary