CLI
Programmers Picnic
AI-ML Classes by Champak Roy
Angular CLI Lesson

Angular CLI Tools: Level 0 to Infinity

Learn the complete Angular CLI command toolbox: create projects, run apps, generate files, build for production, test, deploy, update, configure, debug, and work like an expert.

Start Lesson

Lesson Goal

Angular CLI means Angular Command Line Interface. It gives us the ng command. With ng, we can create, run, generate, build, test, update, configure, and deploy Angular applications.

Beginner Goal Use basic commands like ng new, ng serve, and ng generate.
Intermediate Goal Build, test, configure, route, and deploy Angular apps.
Expert Goal Use builders, configurations, schematics, lazy features, CI/CD, and custom workflows.

1. Level 0 Idea

Imagine Angular CLI as a smart assistant for Angular projects. Instead of manually creating many files and folders, we ask Angular CLI to do it.

Simple meaning: We type commands. Angular CLI creates files, runs the app, builds the app, and helps us manage the project.

Basic Shape of an Angular CLI Command

ng command-name options

Examples

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

2. Install and Check Angular CLI

Angular CLI is installed through npm. After installation, we use the ng command.

Check Node and npm

node -v
npm -v

Install Angular CLI Globally

npm install -g @angular/cli

Check Angular CLI Version

ng version
If ng version shows Angular CLI information, the installation is successful.

3. Angular CLI Big Map

Angular CLI commands can be grouped by purpose.

Angular CLI Command Map ng Angular CLI Create new, generate Run serve, test, e2e Build build, run Deploy deploy Maintain update, config Info version, help

4. Full Angular CLI Tools List

This is the main Angular CLI command list for students.

Command Shortcut Purpose Beginner Example
ng new ng n Create a new Angular workspace and app. ng new my-app
ng serve ng s, ng dev Run the app locally during development. ng serve
ng generate ng g Generate Angular files such as components, services, guards, pipes, and more. ng g component header
ng build ng b Build the app for production or development. ng build
ng test ng t Run unit tests. ng test
ng e2e ng e Run end-to-end tests. ng e2e
ng deploy None Deploy using a configured deploy builder. ng deploy
ng update None Update Angular and dependencies. ng update
ng add None Add a library and run its setup schematic. ng add @angular/material
ng config None Read or change Angular workspace configuration. ng config projects
ng run None Run an Architect target from angular.json. ng run my-app:build
ng version ng v Show Angular CLI, Angular, Node, npm, and package versions. ng version
ng extract-i18n None Extract translation messages for internationalization. ng extract-i18n
ng lint None Run linting if lint tooling is configured. ng lint
Most beginner work uses only five commands: ng new, ng serve, ng generate, ng build, and ng deploy.

5. ng new: Create a New Angular Project

Use ng new when you want to create a fresh Angular workspace and application. 

ng new programmers-picnic-angular-demo

Common Options

Option Meaning Example
--routing Add Angular routing. ng new my-app --routing
--style Choose stylesheet format. ng new my-app --style=css
--skip-install Create files but skip npm install. ng new my-app --skip-install
--defaults Use default choices without asking many questions. ng new my-app --defaults

Recommended Beginner Command

ng new my-angular-app --style=css --routing

6. ng serve: Run Angular Locally

Use ng serve while developing. It starts a local development server and rebuilds when files change. 

cd my-angular-app
ng serve

Open:

http://localhost:4200

Useful Serve Options

Command Use
ng serve --open Run and open browser automatically.
ng serve --port 4300 Run on a different port.
ng serve --host 0.0.0.0 Allow access from another device on the network.
ng serve --configuration development Run with a specific configuration.
ng serve is for development. It is not the final production deployment.

7. ng generate: Create Angular Building Blocks

ng generate is one of the most useful Angular CLI tools. It creates components, services, guards, pipes, directives, interfaces, and more.

ng generate Creates Angular Building Blocks ng generate ng g Component UI block Service logic/API Guard route check Pipe format data Directive behavior Interface data shape Interceptor HTTP control

Generate Commands List

Tool Command Use
Component ng g component header Create a UI component.
Service ng g service services/course Create reusable logic or API service.
Directive ng g directive highlight Create reusable DOM behavior.
Pipe ng g pipe titleCase Create custom data formatting.
Guard ng g guard auth Protect routes.
Interceptor ng g interceptor auth Handle HTTP requests and responses.
Interface ng g interface models/student Create TypeScript data shape.
Enum ng g enum models/role Create fixed set of named values.
Class ng g class models/course Create TypeScript class.
Library ng g library ui-kit Create reusable Angular library.
Application ng g application admin Create another app inside the workspace.
Environments ng g environments Create environment configuration files.
Web Worker ng g web-worker heavy-task Create worker for heavy background computation.
Service Worker ng g service-worker Add PWA service worker support.

Safe Practice Command

ng generate component pages/home --dry-run
--dry-run shows what would happen without actually creating files.

8. ng build: Build the Angular App

Use ng build to compile the Angular application into final browser files. The build process compiles TypeScript to JavaScript and prepares optimized output. 

ng build

Production Build

ng build --configuration production

GitHub Pages Build with Repository URL

ng build --configuration production --base-href /my-repo-name/

Custom Domain Build

ng build --configuration production --base-href /
For GitHub Pages repository URL, use /repo-name/. For custom domain root, use /.

9. ng test and ng e2e

Testing is used to check whether the app works correctly.

Unit Test

ng test

Unit tests check smaller pieces such as components, services, and pipes.

End-to-End Test

ng e2e

End-to-end tests check the application like a real user would use it.

Test Type Command Checks
Unit Test ng test Small pieces of code.
End-to-End Test ng e2e Full user journey.

10. ng deploy: Deploy the App

ng deploy runs a deployment builder configured for your project. For GitHub Pages, many beginners use angular-cli-ghpages.

Add GitHub Pages Deployment Tool

ng add angular-cli-ghpages

Deploy to GitHub Pages Repository URL

ng deploy --base-href=/my-repo-name/

Deploy to Custom Domain Root

ng deploy --base-href=/

For Your Angular Subdomain

ng deploy --base-href=/

Final custom domain:

https://angular.learnwithchampak.live/

11. ng update: Update Angular

Use ng update to update Angular packages and dependencies.

Check Available Updates

ng update

Update Angular Core and CLI

ng update @angular/core @angular/cli
Before updating a serious project, commit your code first. 
git add .
git commit -m "Before Angular update"

12. ng config: Read or Change Angular Configuration

Angular workspace configuration is stored in angular.json. ng config can read or change configuration values.

Read Full Config

ng config

Read Projects

ng config projects

Example Config Idea

ng config cli.analytics false
Beginners should usually edit angular.json carefully in VS Code instead of using complex config commands.

13. ng run: Run a Target from angular.json

ng run is an advanced command. It runs a specific target defined in angular.json.

Command Shape

ng run project-name:target-name:configuration

Examples

ng run my-app:build
ng run my-app:build:production
ng run my-app:serve:development
ng build and ng serve are easier shortcuts. ng run is useful when you need exact target control.

14. ng extract-i18n: Translation Messages

Use ng extract-i18n when your Angular app needs multiple languages. 

ng extract-i18n

It extracts marked translation messages from the app so that translators can translate them.

This is an advanced topic. Beginners can skip it until the app needs multilingual support.

15. Angular CLI Shortcuts

Angular CLI has useful shortcuts. These save typing.

Full Command Shortcut Example
ng new ng n ng n demo
ng serve ng s ng s -o
ng generate ng g ng g c header
ng generate component ng g c ng g c pages/home
ng generate service ng g s ng g s services/course
ng build ng b ng b
ng test ng t ng t
ng version ng v ng v

16. Practical Angular CLI Workflows

Beginner Workflow

ng new my-app
cd my-app
ng serve

Create a Page

ng generate component pages/home
ng generate component pages/about
ng generate component pages/courses

Create Layout

ng generate component shared/header
ng generate component shared/footer
ng generate component shared/sidebar

Create API Service and Model

ng generate service core/services/course
ng generate interface core/models/course

Build and Deploy

ng build --configuration production
ng deploy --base-href=/
This is the real-world rhythm: create → generate → serve → edit → build → deploy.

17. Expert-Level CLI Usage

Expert Angular developers use CLI not only for creating files, but for architecture, automation, team consistency, and deployment workflows.

Expert Command Patterns

Use Case Command Why It Matters
Preview file generation ng g c pages/dashboard --dry-run See changes before writing files.
Force generation ng g c header --force Overwrite files carefully.
Skip tests for generated file ng g c header --skip-tests Avoid spec files when teaching beginners.
Production build ng build -c production Create optimized output.
Different environment build ng build -c staging Use staging configuration.
Specific port ng s --port 4300 Run multiple Angular apps.
Exact target ng run my-app:build:production Run precise angular.json target.
Update safely ng update @angular/core @angular/cli Upgrade project.

Expert Folder Workflow

ng g c features/students/pages/student-list
ng g c features/students/pages/student-form
ng g c features/students/components/student-card
ng g s features/students/services/student
ng g interface features/students/models/student
ng g guard core/auth/auth
ng g interceptor core/interceptors/auth
Expert CLI usage follows project architecture. First design folders, then generate files in the correct place.

18. Common CLI Mistakes

Mistake Problem Fix
Running ng serve outside project folder Angular cannot find workspace files. Run cd project-name first.
Editing node_modules Changes disappear after reinstall. Edit your source files only.
Wrong base href for GitHub Pages Blank page or broken CSS/JS. Use --base-href=/repo-name/ or / for custom domain.
Generating everything in root app folder Project becomes messy. Use folders like pages, shared, core, features.
Using --force blindly Can overwrite files. Use --dry-run first.
Updating without Git commit Difficult to rollback. Commit before ng update.

19. Student Assignment

Create a small Angular project using only CLI commands.

Project Name

angular-cli-practice

Commands to Run

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

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

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

ng serve

Checklist

Final Build

ng build --configuration production
Final learning: Angular CLI is not just a command tool. It is the main workflow engine of Angular development.

Final Summary

Question Answer
What creates a new Angular project? ng new
What runs the app locally? ng serve
What creates components and services? ng generate
What builds the app? ng build
What runs unit tests? ng test
What deploys the app? ng deploy
What updates Angular? ng update
What shows Angular version? ng version
What is the safest generate option? --dry-run