Backend interview prep

Start

Angular CLI

Learn Angular CLI from beginner to advanced with architecture diagrams, commonly used commands, project generation, build process, interview questions, best practices, and real-world examples.

Angular CLI (Command Line Interface) is the official command-line tool provided by the Angular team for creating, developing, testing, and deploying Angular applications.

It automates repetitive development tasks and follows Angular's recommended project structure and best practices.

Whether you are a beginner or an experienced developer, mastering Angular CLI is essential because almost every Angular interview includes questions about it.

Table of Contents

  • What is Angular CLI?
  • Why Angular CLI?
  • Angular CLI Architecture
  • Angular CLI Workflow
  • Installation
  • Creating a Project
  • Common CLI Commands
  • Generate Commands
  • Build Process
  • Real-World Example
  • Top 10 Interview Questions
  • Best Practices
  • Common Mistakes
  • Summary

What is Angular CLI?

Angular CLI is a command-line tool that helps developers:

  • Create Angular applications
  • Generate components and services
  • Run development servers
  • Execute unit tests
  • Build optimized production applications
  • Perform code generation
  • Update Angular versions
  • Deploy applications

It significantly reduces manual configuration and improves developer productivity.

Why Use Angular CLI?

Without Angular CLI, developers would manually configure:

  • Webpack
  • TypeScript
  • Babel
  • Testing tools
  • Build configurations
  • Project structure
  • Linting
  • Optimization

Angular CLI automates all of these tasks.

Angular CLI Architecture

flowchart LR

Developer

Developer --> CLI["Angular CLI"]

CLI --> Generator["Code Generator"]

CLI --> Builder["Build System"]

CLI --> DevServer["Development Server"]

CLI --> TestRunner["Testing"]

Generator --> Project

Builder --> Dist["Production Build"]

DevServer --> Browser

TestRunner --> Reports

Angular Development Workflow

flowchart TD

Start

Start --> InstallCLI

InstallCLI --> CreateProject

CreateProject --> GenerateComponents

GenerateComponents --> WriteCode

WriteCode --> RunApplication

RunApplication --> Test

Test --> Build

Build --> Deploy

Angular CLI Installation

Install Node.js

Angular requires Node.js.

Verify installation:

node -v
npm -v

Install Angular CLI

npm install -g @angular/cli

Verify installation:

ng version

Create a New Angular Project

ng new employee-management

Angular CLI asks several questions:

  • Routing?
  • Stylesheet format?
  • Standalone API?
  • Package manager?

After project creation:

cd employee-management

Run the application:

ng serve

Open:

http://localhost:4200

Angular CLI Project Generation

flowchart TD

ngNew["ng new project"]

ngNew --> CreateFolders

CreateFolders --> InstallPackages

InstallPackages --> GenerateConfiguration

GenerateConfiguration --> ReadyApplication

Angular Project Structure

employee-management/

├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── main.ts
│   ├── index.html
│   └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
├── node_modules/
└── README.md

Most Frequently Used CLI Commands

Create Project

ng new employee-management

Run Project

ng serve

Run on Different Port

ng serve --port 4300

Production Build

ng build

Production Optimization

ng build --configuration production

Watch Mode

ng build --watch

Run Tests

ng test

End-to-End Tests

ng e2e

Check Angular Version

ng version

Update Angular

ng update

Generate Commands

Angular CLI automatically generates boilerplate code.

Component

ng generate component dashboard

or

ng g c dashboard

Service

ng g s services/user

Pipe

ng g pipe currency

Directive

ng g directive highlight

Guard

ng g guard auth

Interface

ng g interface employee

Enum

ng g enum roles

Angular Code Generation

flowchart LR

Command

Command --> Generator

Generator --> Component

Generator --> Service

Generator --> Pipe

Generator --> Directive

Generator --> Guard

Generator --> Interface

Build Process

flowchart TD

SourceCode

SourceCode --> TypeScriptCompiler

TypeScriptCompiler --> AngularCompiler

AngularCompiler --> Bundler

Bundler --> Optimization

Optimization --> Minification

Minification --> DistFolder

Example Generated Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  templateUrl: './dashboard.html'
})
export class DashboardComponent {

}

Generated automatically using:

ng g c dashboard

Common Angular CLI Commands

Command Purpose
ng new Create project
ng serve Start development server
ng build Build application
ng test Execute unit tests
ng update Upgrade Angular
ng generate Generate code
ng version Display Angular version
ng lint Analyze code quality
ng add Install Angular packages
ng config Modify Angular configuration

Real-World Example

Suppose a banking project needs a new "Transaction" feature.

Instead of manually creating folders and files:

ng g c features/transaction
ng g s services/transaction
ng g guard auth

Angular CLI automatically creates the required files using Angular best practices.

Advantages of Angular CLI

Feature Benefit
Automatic Configuration Less manual work
Code Generation Faster development
Production Build Optimized bundles
Testing Support Easy testing
Live Reload Faster development
Angular Updates Easy migration
Consistent Structure Maintainable projects
Best Practices Enterprise-ready applications

Top 10 Angular CLI Interview Questions

1. What is Angular CLI?

Answer

Angular CLI is the official command-line tool for creating, building, testing, and maintaining Angular applications.

2. Why do we use Angular CLI?

Answer

Angular CLI automates project creation, code generation, building, testing, and deployment, saving time and reducing manual configuration.

3. How do you install Angular CLI?

Answer

npm install -g @angular/cli

Verify installation:

ng version

4. How do you create a new Angular project?

Answer

ng new my-app

This command creates a new Angular application with the recommended project structure.

5. What is the purpose of ng serve?

Answer

ng serve starts the development server, compiles the application, watches for file changes, and automatically reloads the browser when changes are detected.

6. Difference between ng build and ng serve?

ng serve ng build
Runs development server Creates build artifacts
Live reload Optimized output
Development only Used for deployment
Watches files Generates dist/ folder

7. What does ng generate do?

Answer

It generates Angular artifacts such as:

  • Components
  • Services
  • Pipes
  • Guards
  • Directives
  • Interfaces
  • Enums

8. What is the purpose of angular.json?

Answer

angular.json is the Angular workspace configuration file. It defines build options, assets, styles, scripts, environments, and project settings.

9. What happens during a production build?

Answer

Angular performs:

  • Ahead-of-Time (AOT) compilation
  • Tree shaking
  • Minification
  • Dead code elimination
  • Bundle optimization
  • Asset optimization

These steps produce a faster and smaller production bundle.

10. How do you update an Angular project?

Answer

Use:

ng update

To update Angular CLI and core packages:

ng update @angular/core @angular/cli

Common Interview Follow-Up Questions

  • What is ng add?
  • What is ng config?
  • What is angular.json?
  • What is Ahead-of-Time (AOT) compilation?
  • What is the dist folder?
  • What is tree shaking?
  • How does live reload work?
  • How do you generate standalone components?
  • What happens during ng serve?
  • How do you create a production build?

Common Mistakes

  • Installing incompatible Node.js versions.
  • Editing generated files without understanding their purpose.
  • Committing the node_modules directory to source control.
  • Using development builds in production.
  • Ignoring Angular CLI update recommendations.
  • Modifying angular.json incorrectly.

Best Practices

  • Keep Angular CLI updated.
  • Use ng generate instead of creating files manually.
  • Use production builds for deployment.
  • Follow the default project structure.
  • Commit only source code, not generated dependencies.
  • Review changes after major Angular upgrades.
  • Use standalone components for new Angular applications.

Summary

Angular CLI is an essential tool that streamlines Angular development by automating project creation, code generation, testing, building, and deployment. It promotes consistency, follows Angular best practices, and simplifies enterprise application development. A strong understanding of Angular CLI commands and workflows is crucial for both day-to-day development and technical interviews.

Interview Cheat Sheet

Topic Remember
Tool Angular CLI
Install npm install -g @angular/cli
New Project ng new app-name
Run ng serve
Build ng build
Production Build ng build --configuration production
Generate Component ng g c component-name
Generate Service ng g s service-name
Update Angular ng update
Configuration angular.json

Next Article

➡️ 04-Angular-Project-Structure-QA.md