Angular CLI

Angular CLI

The Angular CLI (Command Line Interface) is a tool to initialize, develop, scaffold, and maintain Angular applications.

🔹 Installation

npm install -g @angular/cli

Check version:

ng version

🔹 Common Angular CLI Commands

1. Create a new Angular project

ng new my-app

👉 Creates a new project my-app with all required files.
Options:

  • --routing → adds Angular routing.
  • --style=scss → default stylesheet format.

Example:

ng new shop-app --routing --style=scss

2. Run the application (Development server)

ng serve

or specify port:

ng serve --port 4500

👉 Opens app at http://localhost:4200/.

3. Generate Components

ng generate component my-component

or shorthand:

ng g c my-component

👉 Creates my-component with .ts, .html, .css, and .spec.ts files.

Example:

ng g c products/product-list

👉 Creates a component inside products folder.

4. Generate Module

ng g module products

👉 Creates a products.module.ts.

With routing:

ng g module products --routing

5. Generate Service

ng g service auth

👉 Creates auth.service.ts.

6. Generate Directive

ng g directive highlight

👉 Creates highlight.directive.ts.

7. Generate Pipe

ng g pipe customDate

👉 Creates custom-date.pipe.ts.

8. Generate Guard

ng g guard auth

👉 Creates auth.guard.ts.

9. Build Project

ng build

👉 Builds the app for production inside the dist/ folder.

With optimization:

ng build --configuration production

10. Run Unit Tests

ng test

11. Run End-to-End Tests

ng e2e

12. Linting

ng lint

13. Update Angular

ng update @angular/cli @angular/core

✅ Quick Reference (Shorthands)

  • ng g c → generate component
  • ng g m → generate module
  • ng g s → generate service
  • ng g d → generate directive
  • ng g p → generate pipe
  • ng g g → generate guard

Leave a Reply