Chapter 1.2☕ 16 min read

Setting Up — Node, npm, ng new, VS Code

Let's get your Angular development environment ready.

01Install Node.js and npm

Before you can build Angular apps, you need Node.js and npm (Node Package Manager). Node.js lets you run JavaScript on your computer, and npm lets you install packages — like Angular CLI.

Step 1: Go to nodejs.org and download the LTS (Long Term Support) version. LTS is the stable version recommended for most users.

Step 2: Run the installer. It will install both Node.js and npm together.

Step 3: Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and check if everything is installed:

node --version
# Output: v18.19.0 or higher

npm --version
# Output: 10.2.0 or higher

Hyderabad Tip: Bhai agar office WiFi slow hai, toh offline installer use kar. Node.js website se LTS binary download karo, direct install ho jayega bina internet ke.

Node.js 18+ is required for Angular 17+. If you have an older version, just download the latest LTS and install over it — it will upgrade automatically.

02Install Angular CLI

Now that Node.js and npm are ready, let's install Angular CLI — the command line tool that helps you create, build, test, and deploy Angular apps.

Open your terminal and run:

npm install -g @angular/cli

The -g flag means global install — this installs the Angular CLI so you can run the ng command from any folder on your computer. Think of it like installing the TSRTC app on your phone — once installed, you can use it anywhere.

After installation completes, verify it worked:

ng version

You should see Angular CLI version 17 or 18. Congratulations — Angular CLI is ready!

Troubleshooting: If you get a permission error on Mac/Linux, try sudo npm install -g @angular/cli. On Windows, open terminal as Administrator.

03Create Your First Angular Project

Now for the fun part — let's create your first Angular project!

Run this command in your terminal:

ng new hyderabad-biryani --standalone --style=scss --routing

Let's understand what each flag means:

hyderabad-biryani — This is your project name. Give it a fun name!
--standalone — Creates a project with standalone components (new Angular 17+ way, no NgModule needed). Always use this.
--style=scss — Uses SCSS/Sass for styling instead of plain CSS. More powerful, better nesting.
--routing — Adds routing module automatically. You'll need routing for multi-page apps.

The CLI will ask a few questions. For Angular 17+, it might ask about SSR (Server-Side Rendering). Select "No" for now — we'll cover SSR in Stage 14.

Once it finishes, you'll see a message like:

✔ Packages installed successfully.
    Successfully initialized git.

Your project is ready! cd hyderabad-biryani to enter the project folder.

Chai pe charcha karte hue project banate hai ☕

04Install VS Code Extensions

VS Code is the most popular editor for Angular development. Let's install the essential extensions that will make your coding experience smooth.

1. Angular Language Service (MUST have)

This is the most important extension. It provides syntax highlighting, autocomplete, and error checking for Angular templates. Without this, coding Angular is like driving in Hyderabad without Google Maps — possible but painful.

2. ESLint — Catches syntax errors and enforces code quality rules as you type.

3. Prettier — Auto-formats your code so every file looks clean and consistent.

4. Material Icon Theme — Adds nice icons to your file explorer. Visual feedback helps you find files faster.

5. Live Share — If you're pair programming with a friend, this lets both of you edit the same file in real time.

Hyderabad Tip: Extension nahi lagaya toh coding footpath pe chalane jaisa hai. Angular Language Service is non-negotiable bhai!

05Run Your First App

Your project is created, extensions are installed — now let's see it in action!

In your terminal, inside the project folder (hyderabad-biryani), run:

ng serve --open

Let's understand what happens:

ng serve — Starts a development server that watches your files for changes
--open (or -o) — Automatically opens your browser
The server runs on localhost:4200 by default

After compilation (usually 5-15 seconds the first time), your browser will open and you'll see the default Angular welcome page!

Every time you save a file, the page will automatically reload with your changes. This is called Hot Module Replacement (HMR).

Congratulations bhai! Tumhara pehla Angular app chal raha hai! localhost:4200 pe jaa ke apna naam change kar ke dekho — AppComponent mein jaake title badlo, browser turant update ho jayega.

You're officially an Angular developer now. The rest of the course will build on this foundation step by step.

Key Takeaways

✅ Node.js (LTS version) is required — install from nodejs.org
✅ Angular CLI is installed globally via npm install -g @angular/cli
✅ ng new creates a new project — always use --standalone --style=scss --routing
✅ VS Code + Angular Language Service extension is essential
✅ ng serve --open runs your app on localhost:4200 with auto-reload

Previous1.1 — What is Angular and Why?📋 All Chapters Next Chapter1.3 — Project Structure Explained →