Angular ng Commands | Level 0 to Expert

1. Introduction to ng

ng is the command used by Angular CLI. CLI means Command Line Interface.

Instead of creating Angular files manually, we can type commands like:

ng new my-app
ng serve
ng generate component header
ng build

Simple meaning: The ng command is Angular's helper in the terminal. It creates projects, runs projects, creates files, builds apps, tests apps, and helps deploy apps.

2. Why ng Commands Are Important

Angular projects have many files and configurations. The ng command helps us work faster and avoid manual mistakes.

Speed Create projects, components, services, and builds quickly.

Consistency Generated files follow Angular’s expected structure.

Production Build optimized files for deployment.

A student who understands ng commands can work much more confidently in Angular.

3. Install Angular CLI

First check Node and npm:

node -v
npm -v

Install Angular CLI globally:

npm install -g @angular/cli

Check whether ng is working:

ng version

4. Basic Syntax of ng Commands

Most Angular CLI commands follow this pattern:

ng command-name target-name options

Examples

ng generate component header
ng build --configuration production

Many commands also have short forms. For example, ng generate component header can be written as ng g c header.

5. Important Official Links

Topic	Official Link	Use
Angular CLI Overview	https://angular.dev/tools/cli	Understand what Angular CLI is.
CLI Command Reference	https://angular.dev/cli	See all official ng commands.
ng new	https://angular.dev/cli/new	Create a new Angular app.
ng generate	https://angular.dev/cli/generate	Generate Angular files.
ng build	https://angular.dev/cli/build	Build Angular apps and libraries.

6. Main ng Commands

The official Angular CLI reference includes commands such as ng new, ng generate, ng serve, ng build, ng test, ng deploy, ng update, ng config, ng run, and ng version.

Command	Short Form	Purpose	Example 1	Example 2
`ng new`	`ng n`	Create a new Angular application.	`ng new my-app`	`ng new school-app --routing --style=css`
`ng serve`	`ng s`	Run the Angular app locally.	`ng serve`	`ng serve --open --port 4300`
`ng generate`	`ng g`	Generate Angular files.	`ng g component header`	`ng g service core/services/course`
`ng build`	`ng b`	Build the app for browser deployment.	`ng build`	`ng build --configuration production`
`ng test`	`ng t`	Run unit tests.	`ng test`	`ng test --watch=false`
`ng deploy`	No common short form	Deploy using a configured deployment builder.	`ng deploy`	`ng deploy --base-href=/`
`ng update`	No common short form	Update Angular and related packages.	`ng update`	`ng update @angular/core @angular/cli`
`ng config`	No common short form	Read or set Angular workspace configuration.	`ng config`	`ng config cli.analytics false`
`ng version`	`ng v`	Show Angular CLI and package versions.	`ng version`	`ng version --json`
`ng run`	No common short form	Run a target from angular.json.	`ng run my-app:build`	`ng run my-app:build:production`

7. ng new

Use ng new to create a new Angular workspace and application.

Example 1: Simple App

ng new my-first-angular-app

Example 2: App with Routing and CSS

ng new student-dashboard --routing --style=css

Use this command when starting a fresh Angular project.

8. ng serve

Use ng serve to run the app locally while developing.

Example 1: Run App

ng serve

Example 2: Run and Open Browser

ng serve --open

Example 3: Run on Another Port

ng serve --port 4300

ng serve is for local development, not final deployment.

9. ng generate

Use ng generate to create Angular components, services, guards, pipes, directives, interfaces, and more.

Example 1: Generate Component

ng generate component shared/header

Example 2: Short Form

ng g c pages/home

Example 3: Generate Service

ng generate service core/services/course

Example 4: Generate Interface

ng generate interface core/models/student

This is one of the most important commands for real Angular development.

10. ng build

Use ng build to create final output files for deployment.

Example 1: Normal Build

ng build

Example 2: Production Build

ng build --configuration production

Example 3: GitHub Pages Repository Build

ng build --configuration production --base-href /repository-name/

Example 4: Custom Domain Build

ng build --configuration production --base-href /

11. ng test

Use ng test to run unit tests for Angular code.

Example 1: Run Tests

ng test

Example 2: Run Once

ng test --watch=false

Beginners can first learn app creation and deployment, then come back to testing.

12. ng deploy

Use ng deploy after adding a deployment tool or builder to the Angular project.

Example 1: Add GitHub Pages Deploy Tool

ng add angular-cli-ghpages

Example 2: Deploy to GitHub Pages Repository URL

ng deploy --base-href=/repository-name/

Example 3: Deploy to Custom Domain Root

ng deploy --base-href=/

13. ng update

Use ng update to check and update Angular packages.

Example 1: Check Updates

ng update

Example 2: Update Angular Core and CLI

ng update @angular/core @angular/cli

Always commit your code before updating Angular.

git add .
git commit -m "Before Angular update"

14. ng config

Use ng config to read or set Angular workspace configuration.

Example 1: Show Configuration

ng config

Example 2: Turn Analytics Off

ng config cli.analytics false

Beginners should be careful with configuration commands because they can change project settings.

15. ng version

Use ng version to see Angular CLI, Angular, Node, and package version information.

Example 1: Normal Version Check

ng version

Example 2: JSON Output

ng version --json

16. Complete ng Command Workflow

Beginner Workflow

ng new angular-practice --routing --style=css
cd angular-practice
ng serve

Development Workflow

ng g c shared/header
ng g c shared/footer
ng g c pages/home
ng g s core/services/course
ng build

GitHub Pages Custom Domain Workflow

ng add angular-cli-ghpages
ng deploy --base-href=/

Simple rhythm: create → serve → generate → build → deploy

17. Student Assignment

Create a practice Angular app using only ng commands.

Task

ng new ng-command-practice --routing --style=css
cd ng-command-practice

ng g c shared/header
ng g c shared/footer
ng g c pages/home
ng g c pages/about
ng g c pages/courses

ng g s core/services/course
ng g interface core/models/course

ng serve

Final Build

ng build --configuration production

After this assignment, the student should know how to create, run, generate, and build Angular projects using ng.

Final Summary

Question	Answer
What is `ng`?	The Angular CLI command.
What creates a new Angular app?	`ng new`
What runs the app locally?	`ng serve`
What creates components and services?	`ng generate`
What builds the app?	`ng build`
What deploys the app?	`ng deploy`
What checks Angular version?	`ng version`

ng Commands in Angular