Installing the Angular CLI

Installing the Angular CLI

The Angular CLI (Command Line Interface) is the official tool for creating, building, and managing Angular projects. Let's get it set up.

Step 1: Install Node.js

Angular requires Node.js. Download and install the LTS version from nodejs.org.

# Verify installation:
node --version    # v18.x.x or higher
npm --version     # 9.x.x or higher

Step 2: Install the Angular CLI

# Install globally with npm:
npm install -g @angular/cli

# Verify installation:
ng version

You should see the Angular CLI version and a summary of installed packages.

Step 3: Create a New Project

# Create a new Angular app:
ng new my-first-app

# The CLI will ask:
# ? Would you like to add Angular routing? → Yes
# ? Which stylesheet format? → CSS (or SCSS)

Step 4: Run the Dev Server

cd my-first-app
ng serve

# Or with auto-open in browser:
ng serve --open

The app runs at http://localhost:4200. The dev server watches for changes and reloads automatically.

What ng new Creates

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      ← Root component
│   │   ├── app.component.html    ← Root template
│   │   ├── app.component.css     ← Root styles
│   │   ├── app.component.spec.ts ← Root tests
│   │   ├── app.module.ts         ← Root module
│   │   └── app-routing.module.ts ← Routing config
│   ├── assets/                   ← Static files
│   ├── index.html                ← Main HTML page
│   ├── main.ts                   ← App entry point
│   └── styles.css                ← Global styles
├── angular.json                  ← CLI configuration
├── package.json                  ← Dependencies
├── tsconfig.json                 ← TypeScript config
└── node_modules/                 ← Installed packages

Useful CLI Commands

Command	What It Does
ng new <name>	Create a new Angular project
ng serve	Start the development server
ng generate component <name>	Create a new component
ng generate service <name>	Create a new service
ng build	Build for production
ng test	Run unit tests

Shorthand Commands

ng g c my-component    # generate component
ng g s my-service      # generate service
ng g p my-pipe         # generate pipe
ng g d my-directive    # generate directive
ng g m my-module       # generate module

Key Takeaways

• Install Node.js first, then the Angular CLI with npm install -g @angular/cli
• ng new scaffolds a complete Angular project
• ng serve starts a live-reloading dev server at port 4200
• The CLI generates components, services, pipes, and more
• Shorthand: ng g c = generate component, ng g s = generate service