Angular 2 🅰️ Setting Up the Development Environment - KandZ

Before writing a single line of Angular code, you need a working environment. That means Node.js, npm, and the Angular CLI — three tools that install together and stay with you for the life of the project. Get them right, and every other step is smooth.

Key point: Angular development happens through the Angular CLI. You don’t scaffold files by hand or run a build script you wrote yourself — the CLI does it all. Setting up the environment is mostly about getting Node, npm, and the CLI installed and verified.

What you need

Angular runs on top of Node.js. The CLI is an npm package. So the chain is:

Node.js  →  npm  →  Angular CLI  →  your project

Node.js is the JavaScript runtime that executes tooling outside the browser. Angular’s build system, dev server, and test runner all run on Node.

npm is the package manager that comes with Node. It installs the Angular CLI and every dependency your project needs.

The Angular CLI is a command-line tool that generates code, runs the dev server, builds for production, and manages upgrades. It’s the primary interface to Angular tooling.

You also need a code editor — VS Code is the most common choice, with the Angular Language Service extension for template type-checking and autocomplete.

Why Node first: Everything else depends on it. Install Node, and npm arrives automatically. Install the CLI through npm, and every other tool becomes available. Skipping Node or using the wrong version breaks everything downstream.

Step 1 — Install Node.js

Download the LTS (Long-Term Support) version from https://nodejs.org/. LTS is the recommended track for Angular — it’s stable, supported for years, and matched to what the CLI expects.

What gets installed:

node — the runtime
npm — the package manager

Verify the installation:

node --version
npm --version

You should see version numbers. Angular requires a specific minimum Node version — check the current Angular requirements before installing. Recent Angular versions require Node 20 or later.

Why LTS and not Current: LTS versions are tested and supported. “Current” versions have the newest features but may not be compatible with the CLI’s tooling. Pick LTS unless you have a specific reason.

Step 2 — Install the Angular CLI

Install the CLI globally with npm:

npm install -g @angular/cli

The -g flag installs it globally, so ng works from any directory.

Verify:

ng version

This shows the CLI version plus the versions of Node, npm, and the OS. You should see a header and a list of versions.

On Linux and macOS: if the global install fails with permission errors, either use sudo or configure npm to install globally without sudo. The cleanest solution is a user-level global prefix.

On Windows: run the command in an Administrator shell if you hit permission issues, or use the same user-level prefix approach.

Why global: The CLI is used across all your Angular projects. Installing globally means ng is always on your PATH — no per-project setup.

Step 3 — Install a code editor

VS Code is the most common editor for Angular. Install it, then add the Angular Language Service extension.

The extension gives you:

Type-checking inside templates
Autocomplete for component properties
Go-to-definition for template references
Error highlighting before you build

Other editors work — WebStorm has excellent Angular support built in, and Vim/Neovim have LSP-based options. VS Code is the default recommendation for beginners.

Why the editor extension matters: Angular templates are TypeScript-aware. Without the language service, template errors only appear when you build. With it, they surface as you type.

Step 4 — Verify the full toolchain

Run these in order to confirm everything is wired up:

node --version
npm --version
ng version

If all three return versions, you’re ready to create a project.

What ng version shows:

Angular CLI version
Node version
Package manager version
OS
Angular package versions (if inside a project)

The output confirms the whole chain is installed.

Step 5 — Create your first project

With the CLI installed, generate a project:

ng new my-app

The CLI asks a few questions — whether to add routing, which stylesheet format to use, and whether to enable SSR. For a first project, the defaults are fine.

What ng new produces:

A complete project structure
TypeScript and Angular dependencies in package.json
A working build and dev server
A default component and app shell

Navigate into the project:

cd my-app

Run the dev server:

ng serve

The app is available at http://localhost:4200. Changes to source files reload automatically.

Why use the CLI instead of scaffolding by hand: The CLI knows Angular’s current conventions. It generates the right structure, imports, and configuration for your specific Angular version. Hand-rolled setups tend to miss details that cause confusing build errors later.

Recommended global settings

A few optional settings make daily work smoother.

Shell completion — autocompletes ng commands in bash, zsh, or PowerShell. Optional but handy.

Analytics opt-out — Angular CLI asks about usage analytics on first run. You can opt out with:

ng analytics disable --global

Package manager — npm is the default. The CLI also works with yarn and pnpm.

Node version managers — nvm (macOS/Linux) or nvm-windows let you switch Node versions per project. Useful when working on multiple Angular versions.

Global CLI vs local CLI:

Context	Version used
Outside a project	Global CLI
Inside a project	Local CLI (from `node_modules`)

Inside a project, the CLI always uses the version in the project’s own dependencies — so different projects can use different Angular versions without conflict.

Why version managers help: Different Angular projects may require different Node versions. A version manager lets you switch with one command.

Complete Example Session

# ============================================
# PART 1: VERIFY NODE IS INSTALLED
# ============================================

node --version
# [ v20.11.0 ]

npm --version
# [ 10.2.4 ]

# ============================================
# PART 2: INSTALL THE ANGULAR CLI
# ============================================

npm install -g @angular/cli
# [ added 250 packages in 15s ]

# ============================================
# PART 3: VERIFY CLI
# ============================================

ng version
# [      _                      _                 ____ _     ___  ]
# [     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _| ]
# [    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |  ]
# [   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |  ]
# [  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___| ]
# [                 |___/                                        ]
# [
# [ Angular CLI: 20.0.0
# [ Node: 20.11.0
# [ Package Manager: npm 10.2.4
# [ OS: linux x64
# ]

# ============================================
# PART 4: CREATE A NEW PROJECT
# ============================================

ng new my-app
# [ ? Which stylesheet format would you like to use? CSS ]
# [ ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No ]
# [ CREATE my-app/angular.json ]
# [ CREATE my-app/package.json ]
# [ CREATE my-app/tsconfig.json ]
# [ CREATE my-app/src/main.ts ]
# [ CREATE my-app/src/app/app.component.ts ]
# [ ... ]
# [ ✔ Packages installed successfully. ]

# ============================================
# PART 5: ENTER THE PROJECT
# ============================================

cd my-app

# ============================================
# PART 6: RUN DEV SERVER
# ============================================

ng serve
# [ ✔ Browser application bundle generation complete. ]
# [ Initial chunk files | Names | Raw size ]
# [ main.js | main | 250.00 kB ]
# [ styles.css | styles | 5.00 kB ]
# [
# [ Local:   http://localhost:4200/ ]
# ]

# Open in browser to see the default app

# ============================================
# PART 7: GENERATE A COMPONENT
# ============================================

ng generate component hello
# [ CREATE src/app/hello/hello.component.ts ]
# [ CREATE src/app/hello/hello.component.html ]
# [ CREATE src/app/hello/hello.component.css ]
# [ CREATE src/app/hello/hello.component.spec.ts ]
# [ UPDATE src/app/app.component.ts ]

# ============================================
# PART 8: BUILD FOR PRODUCTION
# ============================================

ng build
# [ ✔ Browser application bundle generation complete. ]
# [ Initial total | 500 kB ]
# [ Output location: dist/my-app ]

Quick Reference

Required Tools

Tool	Purpose
Node.js	Runtime for Angular tooling
npm	Package manager
Angular CLI	Generate, build, serve, test
Editor	VS Code + Angular extension

Install Commands

Command	Purpose
`npm install -g @angular/cli`	Install CLI globally
`ng new my-app`	Create a project
`cd my-app`	Enter the project
`ng serve`	Run dev server

Verify

Command	Shows
`node --version`	Node version
`npm --version`	npm version
`ng version`	CLI + toolchain
`ng --help`	CLI help

Global Settings

Command	Purpose
`ng analytics disable --global`	Opt out of analytics
`ng config --global ...`	Other global settings

CLI vs Project

Context	Version used
Outside project	Global CLI
Inside project	Local CLI

Editor Setup

Item	Purpose
VS Code	Editor
Angular Language Service	Template type-checking
ESLint extension	Linting (if used)
Prettier extension	Formatting (if used)

Best Practices

✅ Do This:

# Install Node from nodejs.org LTS
# Use the LTS version, not Current                  # ✅

# Install the CLI globally
npm install -g @angular/cli                         # ✅

# Verify before creating a project
node --version && npm --version && ng version       # ✅

# Use the CLI for everything
ng new, ng generate, ng serve, ng build             # ✅

# Install the Angular Language Service in VS Code
# Template errors surface as you type               # ✅

# Use a Node version manager for multi-project work
nvm install 20 && nvm use 20                        # ✅

❌ Don’t Do This:

# Don't install Node without checking the LTS
# Current versions may break tooling                # ⚠️

# Don't skip the CLI
# Manual scaffolding misses conventions              # ❌

# Don't fight global install permissions with sudo
# Configure a user-level prefix instead              # ⚠️

# Don't scaffold files by hand
# Use `ng generate` for consistency                  # ❌

# Don't edit package.json versions manually
# Use `ng update`                                    # ⚠️

# Don't ignore the editor extension
# Template errors will pile up                       # ⚠️

# Don't use a random Node version
# Match what Angular expects                         # ❌

Common Pitfalls

Pitfall	Problem	Solution
Wrong Node version	CLI fails	Install LTS
Global install permission denied	`npm install -g` fails	Use user-level prefix or sudo
CLI not on PATH	`ng: command not found`	Reinstall or fix PATH
Missing editor extension	Template errors missed	Install Angular Language Service
Multiple Node versions	Confusing errors	Use a version manager
Old CLI	Features missing	`npm install -g @angular/cli@latest`
Project CLI mismatch	Global vs local version	CLI auto-uses local inside projects

Real-World Examples

1. Install Node

Download LTS from nodejs.org. Run the installer and accept defaults.

2. Verify Node and npm

node --version
npm --version

Both should print versions.

3. Install the Angular CLI

npm install -g @angular/cli

Global install.

4. Verify the CLI

ng version

Prints CLI, Node, npm, OS versions.

5. Create a project

ng new my-app

Follow the prompts. Use defaults for the first project.

6. Enter the project

cd my-app

7. Run the dev server

ng serve

Available at http://localhost:4200.

8. Generate a component

ng generate component hello

Creates .ts, .html, .css, .spec.ts files.

9. Build for production

ng build

Output goes to dist/.

10. Update the CLI

npm install -g @angular/cli@latest

Keeps the CLI current across all projects.

Visual: The Toolchain

┌──────────────────────────────────────────────┐
│  Node.js                                     │
│       │                                      │
│       ▼                                      │
│  npm                                         │
│       │                                      │
│       ▼                                      │
│  @angular/cli                                │
│       │                                      │
│       ▼                                      │
│  Your Angular project                        │
│                                              │
│  Each layer depends on the one above         │
│                                              │
└──────────────────────────────────────────────┘

Visual: Global vs Local CLI

┌──────────────────────────────────────────────┐
│  Global CLI                                  │
│                                              │
│  /usr/local/lib/node_modules/@angular/cli    │
│                                              │
│  Used when outside a project                 │
│  Used to run `ng new`                        │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Local CLI                                   │
│                                              │
│  ./node_modules/@angular/cli                 │
│                                              │
│  Used when inside a project                  │
│  Matches the project's Angular version       │
│                                              │
└──────────────────────────────────────────────┘

Visual: Project Structure After `ng new`

my-app/
├── angular.json          ← build config
├── package.json          ← dependencies
├── tsconfig.json         ← TypeScript config
├── src/
│   ├── main.ts           ← bootstrap
│   ├── index.html        ← host page
│   ├── styles.css        ← global styles
│   └── app/
│       ├── app.component.ts
│       ├── app.component.html
│       ├── app.component.css
│       └── app.config.ts
└── node_modules/         ← dependencies

Visual: Dev Server Workflow

┌──────────────────────────────────────────────┐
│  ng serve                                    │
│       │                                      │
│       ├──► build project                     │
│       ├──► serve at :4200                    │
│       └──► watch for changes                 │
│                                              │
│  Edit a file                                 │
│       │                                      │
│       ▼                                      │
│  Rebuild + hot reload                        │
│                                              │
│  Browser updates automatically               │
│                                              │
└──────────────────────────────────────────────┘

Summary

Tool	Purpose	Install
Node.js	Runtime	LTS from nodejs.org
npm	Package manager	Ships with Node
Angular CLI	Generate, build, serve	`npm install -g @angular/cli`
VS Code + Angular extension	Editor with template support	Extension marketplace

Key takeaways:

Node.js LTS is the foundation — install it first
npm ships with Node — no separate install
The Angular CLI is the primary interface for all Angular tooling
Install the CLI globally with npm install -g @angular/cli
Verify with ng version before creating a project
Use the CLI for everything — ng new, ng generate, ng serve, ng build
Inside a project, the CLI uses the local version from node_modules
Install the Angular Language Service extension in VS Code for template type-checking
Node version managers like nvm help when working on multiple projects with different requirements
ng serve runs the dev server with hot reload at http://localhost:4200

Remember: Setup is a one-time investment. Install Node LTS, install the Angular CLI globally, verify the toolchain, and add the editor extension. Then ng new gives you a working project, ng serve runs it, and ng generate builds out the code. The environment stays out of your way — the CLI handles the rest.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!