⚙️ Angular CLI Basics

? Topic: Angular CLI

? Quick Overview

The Angular CLI (Command Line Interface) is a powerful tool that helps developers quickly create, build, test, and deploy Angular applications. It automates repetitive tasks and provides a structured, opinionated way of managing Angular projects so you can focus more on writing features and less on manual setup.

? Key Concepts

Project Scaffolding: Create a complete Angular project with one command.
Generators: Quickly generate components, services, pipes, modules, and more.
Development Server: Run a local dev server with live reload using ng serve.
Build System: Bundle and optimize your app for production with ng build.
Testing Integration: Run unit tests and end-to-end tests via simple CLI commands.

? Syntax & Theory

Angular CLI commands follow a consistent structure:

ng <command> [options]

ng new my-app – creates a new Angular project called my-app.
ng serve – runs a local dev server at http://localhost:4200 by default.
ng generate component my-component – generates a new component with all required files.
ng build – builds the project into the dist/ folder.
ng test – runs unit tests using the configured test runner.
ng e2e – runs end-to-end tests (if configured in your project).

? Code Examples

1️⃣ Installing Angular CLI

After installing Node.js and npm, install the Angular CLI globally:

? View Code Example

# Install Angular CLI globally using npm
npm install -g @angular/cli

2️⃣ Creating a New Angular Project

Create a fresh Angular project called my-app:

? View Code Example

# Create a new Angular project named "my-app"
ng new my-app

3️⃣ Running the Development Server

Navigate into the project folder and start the dev server:

? View Code Example

# Move into project folder and start dev server
cd my-app
ng serve

4️⃣ Generating Components and Services

Use generators to quickly create building blocks for your app:

? View Code Example

// Generate a component and a service using Angular CLI
ng generate component my-component
ng generate service my-service

5️⃣ Building and Testing the Project

When your app is ready, build and test it using these commands:

? View Code Example

// Build the project for production
ng build

// Run unit tests
ng test

// Run end-to-end tests (if configured)
ng e2e

? Live Output / Explanation

What happens when you run these commands?

ng new my-app
Creates a new folder my-app with a complete Angular project structure, installs dependencies, and sets up configuration files like angular.json, package.json, and initial components.
ng serve
Compiles the app in memory, starts a development server (typically on http://localhost:4200), and automatically reloads the browser when you change your code.
ng generate component my-component
Adds a new component folder, updates the module declarations, and creates HTML, TypeScript, CSS, and spec files for you—no manual wiring needed.
ng build
Creates an optimized, production-ready bundle in the dist/ folder that you can deploy to a server.

✅ Tips & Best Practices

Run ng help or ng <command> --help to explore all available options.
Always run CLI commands inside your project folder (except when creating a new project).
Use short aliases: ng g c my-component instead of ng generate component my-component.
After cloning a project, run npm install before ng serve to install dependencies.
Name components, services, and modules meaningfully to keep your project clean and readable.

? Try It Yourself

Create a new Angular project called cli-demo using ng new cli-demo.
Inside cli-demo, generate a component named hello-world and display a welcome message in its template.
Start the dev server with ng serve and open the app in your browser.
Run ng build and explore the generated files in the dist/ folder.
Experiment with ng g s log-service to generate a service and inject it into a component.