Skip to main content
Angular Basics
CHAPTER 02 Beginner

Installing Angular and Environment Setup

Updated: May 18, 2026
5 min read

# CHAPTER 2

Installing Angular and Environment Setup

1. Chapter Introduction

Unlike a simple HTML website where you just create an index.html file and open it in Chrome, Angular requires an environment setup. Because Angular is written in TypeScript, the browser cannot understand it. It must be "transpiled" (translated) into standard JavaScript before it runs. To handle this, we need to install Node.js and the official Angular Command Line Interface (CLI).

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Install Node.js and NPM on your machine.
  • Install the Angular CLI globally.
  • Use the CLI to generate a new Angular project.
  • Launch the Angular local development server.

3. Step 1: Installing Node.js

Angular requires Node.js to manage its development server and build process. Node.js comes bundled with NPM (Node Package Manager), which we will use to download the Angular framework.
  1. 1. Go to nodejs.org.
  1. 2. Download the LTS (Long Term Support) version.
  1. 3. Install it using the default settings.
  1. 4. Verify the installation by opening your terminal or command prompt and typing:
bash
12345 
# Check Node version
node -v

# Check NPM version
npm -v

4. Step 2: Installing the Angular CLI

The Angular CLI is a powerful tool provided by the Angular team. It automates the painful process of configuring Webpack, TypeScript transpilers, and testing frameworks.

To install it globally on your computer, run this command in your terminal:

bash
1 
npm install -g @angular/cli

Once installed, verify it by checking the version:

bash
1 
ng version

*(Note: Every Angular CLI command starts with ng).*

5. Step 3: Creating an Angular Project

Navigate to the folder where you want to store your project using the cd command, and then generate a new app:
bash
1 
ng new my-first-angular-app

The CLI will ask you a few questions:

  • Which stylesheet format would you like to use? Choose CSS or SCSS.
  • Do you want to enable Server-Side Rendering (SSR)? For now, type N (No).

The CLI will download hundreds of megabytes of dependencies into a node_modules folder. This takes a minute or two.

6. Step 4: Running the Angular App

Once the installation finishes, you must move into the newly created project folder before you can run it!
bash
12345 
# Move into the project directory
cd my-first-angular-app

# Start the local development server
ng serve

Wait until it says Compiled successfully. Now, open your web browser and navigate to: http://localhost:4200/

Congratulations! You should see the default Angular welcome screen!

7. Step 5: Visual Studio Code Setup

To edit your code, we highly recommend Visual Studio Code (VS Code). To make development easier, install the following VS Code Extensions:
  • Angular Language Service: Provides autocomplete and error checking inside HTML templates.
  • Material Icon Theme: Adds nice icons to your file explorer so you can easily distinguish between Component, Service, and Module files.

8. Common Mistakes

  • Running ng serve outside the project folder: Beginners often run ng new app-name, then immediately type ng serve without typing cd app-name first. The terminal will throw an error saying it cannot find the angular workspace.
  • Outdated Node.js: If ng new fails with cryptic errors, it almost always means your version of Node.js is too old. Update Node to the latest LTS version.

9. Real-World Analogy

Think of the Angular CLI as a highly skilled construction foreman. If you ask him to build a house (ng new), he brings the concrete, the wood, and the architects for you. You don't have to worry about configuring the blueprint; you just tell him what color to paint the walls!

10. MCQs with Answers

Question 1

Why does Angular require Node.js to be installed?

Question 2

What is NPM?

Question 3

What command installs the Angular CLI globally?

Question 4

What command generates a brand new Angular project?

Question 5

What command starts the local development server so you can view your app in the browser?

Question 6

What is the default port that Angular runs on locally?

Question 7

If you get an error "This command is not available when running the Angular CLI outside a workspace", what did you likely forget to do?

Question 8

What VS Code extension is deemed absolutely essential for Angular developers as it provides autocomplete in HTML files?

Q9. Does Angular code execute directly in the browser as TypeScript? a) Yes b) No, the Angular CLI transpiles the TypeScript into standard JavaScript behind the scenes so the browser can read it. Answer: b) No, it is transpiled to JS.
Question 10

What does the -g flag do in npm install -g?

11. Interview Questions

  • Q: Explain what the Angular CLI is and why it is beneficial for development teams.
  • Q: What is the underlying compiler/bundler that the Angular CLI uses behind the scenes to bundle the application? (Answer: Webpack, though modern Angular is transitioning to Vite/Esbuild).

12. Summary

Setting up an Angular environment is a one-time process. By installing Node.js and the Angular CLI, you equip your machine with an enterprise-grade build system. The ng serve command provides "Hot Module Replacement"—meaning every time you save a file in VS Code, your browser will instantly refresh to show the changes without you having to click reload!

13. Next Chapter Recommendation

When you generate a new app, the CLI creates dozens of files and folders automatically. It can be overwhelming! In Chapter 3: Angular Project Structure, we will demystify this folder structure and explain exactly what angular.json, package.json, and the src folder do.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Introduction to Angular
Next Chapter Angular Project Structure

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1