Setting Up Angular Environment

Before writing Angular code, the development machine needs the right tools installed. The Angular development environment consists of Node.js, npm (Node Package Manager), the Angular CLI (Command Line Interface), and a code editor. Each of these plays a specific role in building and running Angular applications.

Tools Required

Node.js

Node.js is a runtime that allows JavaScript (and TypeScript) to run outside the browser, directly on the computer. Angular's build process, local development server, and CLI all depend on Node.js to function. Angular does not use Node.js in the final browser application — it only uses it during development.

npm (Node Package Manager)

npm comes bundled with Node.js automatically. It is a tool that installs and manages the third-party libraries and packages that an Angular project depends on. Every Angular project uses npm to download Angular itself, along with all supporting packages.

Angular CLI

The Angular CLI (Command Line Interface) is an official tool provided by the Angular team. It allows developers to create new Angular projects, generate components and services, run a local development server, and build the final application — all using simple commands typed in the terminal.

Code Editor

A code editor is the tool used to write and manage the application's files. Visual Studio Code (VS Code) is the most widely used editor for Angular development. It is free, lightweight, and has excellent support for TypeScript and Angular through extensions.

Step-by-Step Installation Guide

Step 1 — Install Node.js

Visit the official Node.js website at nodejs.org and download the LTS (Long-Term Support) version. LTS versions are more stable and recommended for most users. Run the downloaded installer and follow the on-screen instructions.

After installation, open the terminal (Command Prompt on Windows, Terminal on Mac/Linux) and verify the installation by running the following commands:


node --version
npm --version

Both commands should display version numbers, confirming the installation was successful. For example:


v20.11.0
10.2.4

Step 2 — Install the Angular CLI

With npm available, install the Angular CLI globally on the machine using this command:


npm install -g @angular/cli

The -g flag means "global" — it installs the CLI once and makes it available from any folder on the computer. After installation, verify it with:


ng version

This command displays the Angular CLI version along with information about Node.js and npm. The output confirms the CLI is ready to use.

Step 3 — Install Visual Studio Code

Visit code.visualstudio.com and download the version for the operating system being used (Windows, Mac, or Linux). Install it using the standard installation process. VS Code works out of the box for Angular development.

Step 4 — Install Helpful VS Code Extensions

Open VS Code and install the following extensions from the Extensions panel (the icon on the left sidebar that looks like four squares):

Angular Language Service — Provides auto-complete and error checking inside Angular HTML templates.
Prettier - Code Formatter — Automatically formats code to keep it clean and consistent.
ESLint — Highlights code quality issues in TypeScript files.

Creating the First Angular Project

With all tools installed, the next step is to create a new Angular project using the Angular CLI.

Open the Terminal

Navigate to the folder where the project should be created. For example, to create the project inside a folder called projects on the desktop:


cd Desktop/projects

Generate a New Angular Application

Run the following command to create a new Angular project:


ng new my-first-app

The CLI will ask two questions during setup:

Would you like to add Angular routing? — Type y (yes) and press Enter. Routing allows navigation between different pages in the app.
Which stylesheet format would you like to use? — Select CSS and press Enter. This is the simplest option for beginners.

The CLI creates the project folder, downloads all dependencies, and sets up the project structure automatically. This may take a minute or two.

Open the Project in VS Code

Navigate into the new project folder and open it in VS Code:


cd my-first-app
code .

The code . command opens the current folder directly in VS Code.

Understanding the Project Structure

After creating the project, the following folders and files will be visible in VS Code:


my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       ← Main component logic
│   │   ├── app.component.html     ← Main component template
│   │   ├── app.component.css      ← Main component styles
│   │   ├── app.component.spec.ts  ← Main component tests
│   │   └── app.module.ts          ← Root module
│   ├── index.html                 ← Entry HTML file
│   ├── main.ts                    ← Application entry point
│   └── styles.css                 ← Global styles
├── angular.json                   ← Angular project configuration
├── package.json                   ← Project dependencies list
└── tsconfig.json                  ← TypeScript configuration

Key Files Explained

src/index.html

This is the single HTML file that the browser loads. It contains the <app-root> tag, which is where the entire Angular application renders.

src/main.ts

This is the starting point of the Angular application. It tells Angular which module to load first when the application starts.

src/app/app.module.ts

This is the root module. It declares which components, services, and other modules are part of the application. Think of it as the master list of everything the application uses.

src/app/app.component.ts

This is the root component — the first component that Angular loads. Every other component in the application is nested inside this one directly or indirectly.

angular.json

This file stores configuration settings for the project — such as the location of the source files, build options, and test settings. Beginners rarely need to modify this file directly.

package.json

This file lists all the packages the project depends on. When the project is shared with others, they run npm install to download all the dependencies listed here.

Running the Development Server

To see the application running in the browser, start the local development server with this command:


ng serve

After a moment, the terminal will display a message like:


** Angular Live Development Server is listening on localhost:4200 **

Open a browser and visit http://localhost:4200. The default Angular welcome page will appear. The development server watches for file changes — whenever a file is saved, the browser refreshes automatically.

To stop the server, press Ctrl + C in the terminal.

Quick Reference — Common Angular CLI Commands


ng new project-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 the app for production
ng test                     ← Run unit tests

Summary

Setting up the Angular environment requires four tools: Node.js, npm, the Angular CLI, and a code editor like VS Code. After installing these, the Angular CLI command ng new creates a fully structured project in seconds. The project contains a clear folder hierarchy with components, modules, and configuration files. The ng serve command starts a local development server that reflects code changes instantly in the browser.

Previous lessons

Back to courses

Next lessons